Impossible d'importer des polices personnalisées

Question

Je viens de créer une application nextjs et j'ai un problème, je ne peux pas importer de polices personnalisées, j'ai essayé d'ajouter un fichier ttg et d'utiliser @fontface mais les polices ne fonctionnent pas. S'il vous plaît, aidez

Voici mon fichier 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;

Voici mon fichier 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: [],
}

Voici mon fichier layout.jsx,

import '@styles/globals.css';

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

export default layout;

Voici mon fichier page.jsx

import '@styles/globals.css';

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

export default Home;

J'ai essayé d'ajouter le vent arrière comme className="font-bornStrong" mais cela ne fonctionne toujours pas.

J'ai également essayé d'ajouter la police dans 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

L'erreur que vous rencontrez peut être due au référencement du fichier de police dans globals.css 文件中为自定义字体指定的路径不正确造成的。您使用路径 /public/fonts/ mais ce chemin est incorrect dans Next.jsn, pour résoudre ce problème, vous devez mettre à jour le chemin du fichier de police dans le fichier .css global, vous pouvez le faire depuis le fichier de police Supprimez la partie /public/ du chemin.

Dans le fichier tailwind.config.js vous avez défini les familles de polices mais ne les avez pas activées dans la section fontFamily

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