無法匯入自訂字體

Question

我剛剛創建了一個 nextjs 應用程序，但遇到了問題，我無法導入自定義字體，我嘗試添加 ttg 文件並使用 @fontface，但字體不起作用。請幫忙

這是我的 globals.css 檔案

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'bornStrong';
    src: url(/public/fonts/BornStrong-Regular.ttf);
}

@font-face {
    font-family: 'heywow';
    src: url(/public/fonts/HeyWow-Regular.ttf); 
}

html, body {
    font-family: 'heywow';
}

h1, h2, h3 {
    font-family: 'heywow';
}

.main {
  width: 100vw;
  min-height: 100vh;
  position: fixed;
  display: flex;
  justify-content: center;
  padding: 120px 24px 160px 24px;
  pointer-events: none;
}

.main:before {
  background: #1c1d25;
  position: absolute;
  content: "";
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
}

.main:after {
  content: "";
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  filter: invert(1);
}

.gradient {
  height: fit-content;
  z-index: 3;
  width: 100%;
  max-width: 640px;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  filter: blur(100px) saturate(150%);
  top: 80px;
  opacity: 0.15;
}

@media screen and (max-width: 640px) {
  .main {
    padding: 0;
  }
}

/* Tailwind Styles */

.app {
  @apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6;
}

.black_btn {
  @apply rounded-full border border-black bg-black py-1.5 px-5 text-white transition-all hover:bg-white hover:text-black text-center text-sm flex items-center justify-center;
}

.outline_btn {
  @apply rounded-full border border-black bg-transparent py-1.5 px-5 text-black transition-all hover:bg-black hover:text-white text-center text-sm flex items-center justify-center;
}

.head_text {
  @apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl;
}

.orange_gradient {
  @apply bg-gradient-to-r from-amber-500 via-orange-600 to-yellow-500 bg-clip-text text-transparent;
}

.green_gradient {
  @apply bg-gradient-to-r from-green-400 to-green-500 bg-clip-text text-transparent;
}

.blue_gradient {
  @apply bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent;
}

.desc {
  @apply mt-5 text-lg text-gray-600 sm:text-xl max-w-2xl;
}

.search_input {
  @apply block w-full rounded-md border border-gray-200 bg-white py-2.5 pl-5 pr-12 text-sm shadow-lg font-medium focus:border-black focus:outline-none focus:ring-0;
}

.copy_btn {
  @apply w-7 h-7 rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur flex justify-center items-center cursor-pointer;
}

.glassmorphism {
  @apply rounded-xl border border-gray-200 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur p-5;
}

.prompt_layout {
  @apply space-y-6 py-8 sm:columns-2 sm:gap-6 xl:columns-3;
}

/* Feed Component */
.feed {
  @apply mt-16 mx-auto w-full max-w-xl flex justify-center items-center flex-col gap-2;
}

/* Form Component */
.form_textarea {
  @apply w-full flex rounded-lg h-[200px] mt-2 p-3 text-sm text-gray-500 outline-0;
}

.form_input {
  @apply w-full flex rounded-lg mt-2 p-3 text-sm text-gray-500 outline-0;
}

/* Nav Component */
.logo_text {
  @apply max-sm:hidden font-semibold text-lg text-black tracking-wide;
}

.dropdown {
  @apply absolute right-0 top-full mt-3 w-full p-5 rounded-lg bg-white min-w-[210px] flex flex-col gap-2 justify-end items-end;
}

.dropdown_link {
  @apply text-sm text-gray-700 hover:text-gray-500 font-medium;
}

/* PromptCard Component */
.prompt_card {
  @apply flex-1 break-inside-avoid rounded-lg border border-gray-300 bg-white/20 bg-clip-padding p-6 pb-4 backdrop-blur-lg backdrop-filter md:w-[360px] w-full h-fit;
}

.flex-center {
  @apply flex justify-center items-center;
}

.flex-start {
  @apply flex justify-start items-start;
}

.flex-end {
  @apply flex justify-end items-center;
}

.flex-between {
  @apply flex justify-between items-center;

這是我的 tailwind.config.js 檔案

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        'primary-orange': '#FF5722',
      }
    },
  },
  plugins: [],
}

這是我的layout.jsx 文件，

import '@styles/globals.css';

const layout = () => {
  return (
    <div>
      <h1>AUHISI</h1>
    </div>
  );
}

export default layout;

這是我的 page.jsx 檔案

import '@styles/globals.css';

const Home = () => {
  return (
    <div>
      <h1>Page</h1>
    </div>
  );
}

export default Home;

我嘗試將 tailwind 新增為 className="font-bornStrong"，但仍然不起作用。

我還嘗試在 tailwind.config.js 中新增該字型。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        bornStrong: ['bornStrong'],
        heywow: ['heywow'],
      },
      colors: {
        'primary-orange': '#FF5722',
      }
    },
  },

Answer 1

您遇到的錯誤可能是由於在 globals.css 檔案中為自訂字體指定的路徑不正確造成的。您使用路徑/public/fonts/ 來引用字體文件，但此路徑在Next.jsn 中不正確，要解決此問題，您需要更新全域中的字體文件路徑.css 文件，您可以從字型檔案路徑中刪除/public/ 部分。

在 tailwind.config.js 檔案中，您已定義字體系列，但尚未在 fontFamily 部分中啟用它們

variants: {
    extend: {
      fontFamily: ['bornStrong', 'heywow'],
    },
  },
  plugins: [],
};