Как можно использовать шрифты

Что предлагает Next

Сперва загружается шрифт, затем экспортируется:

fonts.ts

import { JetBrains_Mono } from 'next/font/google'

export const mono = JetBrains_Mono({ subsets: ['cyrillic', 'latin'], display: 'swap' })

Далее его className используется в классе разметки:

layout.tsx

import { mono } from '@/fonts'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='ru'>
      <body className={clsx(mono.className, 'h-screen bg-gray-950 p-4')}>...</body>
    </html>
  )
}

При таком подходе, для изменения шрифта в компонент нужно будет импортировать переменную:

component1.tsx

import { mono } from '@/fonts'

export default function Component1() {
  return (
    <ul className={clsx(mono.className, '...')}>
      <li>...</li>
    </ul>
  )
}

Как делаю я

Гарантирую, что знакомым с Tailwind больше понравится следующий подход:

component1.tsx

export default function Component1() {
  return (
    <ul className='... font-mono'>
      <li>...</li>
    </ul>
  )
}

Это класс Tailwind, который был создан через конфиг файл. Чтобы этот класс появился и заработал, перед настройкой конфигурации нужно повесить переменные шрифтов на какой-нибудь высокий элемент, обычно это body. Переменные можно вытащить при объявлении шрифта:

fonts.ts

import clsx from 'clsx'
import { Finlandica, JetBrains_Mono, Prosto_One } from 'next/font/google'

const sans = Finlandica({ subsets: ['latin', 'cyrillic'], variable: '--font-sans', display: 'swap' }) 
const display = Prosto_One({ subsets: ['cyrillic', 'latin'], weight: ['400'], variable: '--font-display', display: 'swap' }) 
const mono = JetBrains_Mono({ subsets: ['cyrillic', 'latin'], variable: '--font-mono', display: 'swap' }) 

export const fontsVars = clsx(sans.variable, display.variable, mono.variable)

После эти переменные можно экспортировать вагончиком как fontsVars и разместить их на body:

layout.tsx

import { fontsVars } from '@/fonts.tsx'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='ru'>
      <body className={clsx(fontsVars, 'h-screen bg-gray-950 p-4')}>...</body>
    </html>
  )
}

После этого body будет иметь на себе 3 новых класса, каждый с причудливым названием:

HTML

<body class="__variable_44041a __variable_e4c6d8 __variable_ac086f ...">
  ...
</body>

Каждый класс объявляет CSS переменную ...

CSS

.__variable_ac086f {
  --font-mono: '__JetBrains_Mono_ac086f', '__JetBrains_Mono_Fallback_ac086f';
}
.__variable_e4c6d8 {
	--font-display: '__Prosto_One_e4c6d8', '__Prosto_One_Fallback_e4c6d8';
}
.__variable_44041a {
  --font-sans: '__Finlandica_44041a', '__Finlandica_Fallback_44041a';
}

..., которую теперь можно использовать в конфиге Tailwind, добавив в тему новые значения для fontFamily:

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: 'var(--font-sans)',
        display: 'var(--font-display)',
        mono: 'var(--font-mono)',
      },
    },
  },
}

Теперь эти классы можно вставлять в компоненты, Tailwind сам подставит переменные из этих классов как семейства шрифтов:

TypeScript JSX

function Component() {
  return (
    <article>
      <h1 className='font-display'>...</h1>
      <p className='font-sans'>
        <code className='font-mono'>...</code>
      </p>
    </article>
  )
}

Шрифты в Next и Tailwind

Расскажу о любимом способе использовать шрифты на проектах с Next и Tailwind

Next / Больше статей

Как можно использовать шрифты

Что предлагает Next

fonts.ts

layout.tsx

component1.tsx

Как делаю я

component1.tsx

fonts.ts

layout.tsx

HTML

CSS

tailwind.config.ts

TypeScript JSX