Font optimizatsiya — next/font, Google Fonts, mahalliy shriftlar

~15 daq · Next.js · Kirish va Asoslar

Muammodan boshlaylik

Siz saytga Google Fonts qo'shmoqchisiz. Odatdagi usul — <head> ga <link> tegi:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
  rel="stylesheet"
/>

Ishlaydi. Lekin muammo bor.

Sahifa ochilganda brauzer avval Google serveriga ulanadi, shrift faylini yuklab oladi, keyin matnni ko'rsatadi. Bu vaqt ichida foydalanuvchi FOIT (Flash of Invisible Text) yoki FOUT (Flash of Unstyled Text) ko'radi — matn bir lahza ko'rinmaydi yoki boshqa shrift bilan ko'rinadi, keyin to'g'ri shriftga o'zgaradi. Sahifa "sakraydi".

Ikkinchi muammo — maxfiylik. Google serveriga so'rov ketadi, foydalanuvchining IP manzili Google ga ma'lum bo'ladi. Ba'zi Yevropa saytlari GDPR tufayli buni qila olmaydi.

next/font ikkalasini ham hal qiladi.

next/font qanday ishlaydi

next/font shrift fayllarini build vaqtida yuklab oladi va o'z serveringizda saqlaydi. Foydalanuvchi brauzeridan Google ga hech qanday so'rov ketmaydi.

Bundan tashqari, Next.js shrift uchun CSS size-adjust xususiyatini avtomatik hisoblaydi — shrift yuklanguncha o'xshash tizim shrifti ko'rsatiladi, lekin o'lcham bir xil bo'lgani uchun layout shift bo'lmaydi.

Google Fonts

// app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

const robotoMono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-mono',  // CSS variable sifatida
})

export default function RootLayout({ children }) {
  return (
    <html lang="uz" className={`${inter.className} ${robotoMono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

subsets: ['latin'] — faqat lotin alifbosi uchun belgilar yuklanadi. Barcha belgilarni yuklamaslik — fayl kichikroq.

display: 'swap' — shrift yuklanguncha tizim shrifti ko'rsatiladi, keyin almashadi. Layout shift minimal bo'ladi.

variable — CSS variable orqali ishlatish

Shriftni butun loyihada Tailwind yoki CSS orqali ishlatish uchun variable prop qo'llanadi:

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',  // CSS variable nomi
})

// html ga qo'shiladi:
// style="--font-inter: 'Inter', sans-serif"

Tailwind bilan:

// tailwind.config.ts
export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-mono)'],
      },
    },
  },
}

<p className="font-sans">Inter shrift</p>
<code className="font-mono">Roboto Mono shrift</code>

Mahalliy shriftlar

Google Fonts o'rniga o'zingizning shrift fayllaringizni ishlatish uchun next/font/local:

import localFont from 'next/font/local'

const myFont = localFont({
  src: [
    {
      path: '../public/fonts/MyFont-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: '../public/fonts/MyFont-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
  ],
  variable: '--font-my',
})

woff2 — eng kichik va keng qo'llab-quvvatlanadigan shrift formati. Agar boshqa format bo'lsa — woff2 ga konvertatsiya qiling.

Faqat ba'zi sahifalarda ishlatish

Shrift butun saytda emas, faqat bitta sahifada kerak bo'lsa — o'sha page.tsx da e'lon qilinadi:

// app/blog/page.tsx
import { Merriweather } from 'next/font/google'

const merriweather = Merriweather({
  subsets: ['latin'],
  weight: '400',
})

export default function BlogPage() {
  return (
    <article className={merriweather.className}>
      <h1>Blog post</h1>
    </article>
  )
}

Shu shrift faqat blog sahifasida yuklanadi — boshqa sahifalarga ta'sir qilmaydi.

Tez-tez uchraydigan xatolar

1. Shriftni komponent ichida e'lon qilish

// ❌ — har render da yangi ob'ekt yaratiladi
export default function Page() {
  const inter = Inter({ subsets: ['latin'] })  // xato!
  return <div className={inter.className}>...</div>
}

// ✅ — modul darajasida, bir marta
const inter = Inter({ subsets: ['latin'] })

export default function Page() {
  return <div className={inter.className}>...</div>
}

2. subsets ko'rsatmaslik

// ❌ — barcha belgilar yuklanadi, fayl katta
const inter = Inter()

// ✅
const inter = Inter({ subsets: ['latin'] })

3. variable ni html ga qo'shmaslik

// ❌ — CSS variable ishlamaydi
<html>

// ✅
<html className={inter.variable}>

Xulosa

next/font — shriftlarni build vaqtida yuklab, o'z serverda saqlaydi. Google ga so'rov ketmaydi, layout shift bo'lmaydi.

next/font/google  → Google Fonts uchun
next/font/local   → mahalliy shrift fayllari uchun

subsets           → faqat kerakli belgilar (fayl kichikroq)
display: 'swap'   → yuklanguncha tizim shrifti
variable          → CSS variable, Tailwind bilan ishlash uchun

Shriftni modul darajasida e'lon qiling — komponent ichida emas.

Keyingi dars

9-dars: Metadata — title, description, Open Graph, Twitter Card

Sahifa nomi, tavsifi, ijtimoiy tarmoqlarda qanday ko'rinishi — bularni Next.js da qanday boshqarish.