Как правильно использовать @next/font для двух шрифтов в Next.JS?

Я использую Next.JS v13 и не понимаю, как@next/fontработает под капотом. В частности, я пытаюсь использовать два шрифта Google с TailwindCSS, но не понимаю, как это работает.

Я использую ,tailwind.config.js, иglobals.css.

layout.tsx:

          import { Alegreya_Sans, PT_Sans } from "@next/font/google";
    
    const header = Alegreya_Sans({
      subsets: ["latin"],
      weight: "500",
    });
    
    const body = PT_Sans({
      subsets: ["latin"],
      weight: "400",
      variable: "--body",
    });
    
    import "../styles/globals.css";
    
    export default function RootLayout({
      children,
    }: {
      children: React.ReactNode;
    }) {
      return (
        <>
          <html lang="en-us" className={`${body.variable} font-body`}>
            <head />
    
            <body>    
              {children}
            </body>
          </html>
        </>
      );
    }

глобальные файлы.css:

          @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    @layer base {
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: "Alegreya Sans", sans-serif;
        font-weight: 500;
      }
   }

хвостовой ветер.config.js:

          const defaultTheme = require("tailwindcss/defaultTheme");
    
    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        "./src/app/**/*.{js,ts,jsx,tsx}",
        "./src/pages/**/*.{js,ts,jsx,tsx}",
        "./src/components/**/*.{js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {
          fontFamily: {
            body: ["var(--body)", ...defaultTheme.fontFamily.sans],
          },
        },
      },
      plugins: [],
    };

Вlayout.tsx, я не использую переменную «заголовок», но на вкладке сети моего браузера видно, что страница все равно загружает из Google шрифт «AlegreyaSans».

Есть ли способ просто вызвать функцию без указания переменной? Это не сработает, если я не объявлю эту переменную «заголовок».

Хотя это, похоже, работает, является ли это оптимизированным способом создания двух шрифтов? Во всей документации показан только один шрифт, который, я подозреваю, является просто способом установить шрифт по умолчанию с помощью класса CSS или переменной CSS, но я не уверен.

Источник

0 ответов

Другие вопросы по тегам