Tidak dapat mengimport fon tersuai

Question

Saya baru sahaja mencipta apl nextjs dan saya menghadapi masalah, saya tidak boleh mengimport fon tersuai, saya cuba menambah fail ttg dan menggunakan @fontface tetapi fon tidak berfungsi. Tolong bantu

Ini ialah fail globals.css saya

@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;

Ini ialah fail tailwind.config.js saya

/** @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: [],
}

Ini ialah fail susun atur.jsx saya,

import '@styles/globals.css';

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

export default layout;

Ini ialah fail page.jsx saya

import '@styles/globals.css';

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

export default Home;

Saya cuba menambah tailwind sebagai className="font-bornStrong" tetapi masih tidak berjaya.

Saya juga cuba menambah fon dalam 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

Ralat yang anda hadapi mungkin disebabkan merujuk fail fon dalam globals.css 文件中为自定义字体指定的路径不正确造成的。您使用路径 /public/fonts/ tetapi laluan ini tidak betul dalam Next.jsn, untuk menyelesaikan isu ini, anda perlu mengemas kini laluan fail fon dalam fail .css global, anda boleh melakukannya dari fail fon Alih keluar bahagian /public/ daripada laluan.

Dalam fail tailwind.config.js anda telah menentukan keluarga fon tetapi belum mendayakannya dalam bahagian fonFamily

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