next/font yazı tiplerini nasıl optimize eder?

Question

Accepted Answer

`next/font` web yazı tiplerini derleme sırasında yazı tiplerini kendi sunucularında barındırarak ve yükleme ayrıntılarını sizin için yöneterek, performansı iyileştirmek ve düzen kaymasını ortadan kaldırmak için otomatik olarak optimize eder. ## Google Yazı Tipi Kullanma ```tsx // app/layout.tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], // only load the character sets you need (smaller files) display: "swap", // show fallback text immediately, swap when font loads }); export default function RootLayout({ children }) { return ( {/* apply the font */} {children} ); } ``` ## Otomatik Olarak Neler Yapar - **Kendi Barındırma** — derleme sırasında Next, Google yazı tipini indirir ve **sizin** alan adınızdan sunar. Çalışma zamanında Google sunucularına istek yok → daha hızlı ve gizlilik açısından daha iyi (üçüncü taraf izlemesi yok). - **Sıfır Düzen Kaydırması** — yedek yazı tipinin metriklerini web yazı tipiyle eşleştirmek için hesaplar, bu nedenle gerçek yazı tipi değiştirildiğinde metin sıçramaz (CLS'yi korur). - **Ön Yükleme ve Alt Kümeleme** — yazı tipini önceden yükler ve yalnızca belirtilen karakter alt kümelerini içerir, indirmeyi azaltır. - **İşleme Engelleme İsteği Yok** — yazı tipleri yapınızın bir parçasıdır, engelleme dış getirmesi değil. ## Yerel Yazı Tipleri ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Neden Yazı Tipi Optimizasyonu Önemlidir Yazı tipleri klasik bir performans ve CLS problemidir: metin işlemesini engelleyen üçüncü taraf getirmesi, ardından yazı tipi yüklendiğinde düzen kaydırmasına neden olur (FOUT/FOIT). Bunu manuel olarak iyi yapmak, `@font-face`, `font-display`, ön yükleme ve yedek metrik eşleştirmesi gerektirir. ## Neden önemli `next/font` tüm yazı tipi performansı kontrol listesini otomatikleştirir — kendi barındırma (hız + gizlilik), alt kümeleme ve ön yükleme (daha küçük, daha hızlı) ve yedek metrik eşleştirmesi (düzen kaydırması yok) — tek bir içe aktarmadan. Hatalı yapılması kolay, hassas bir optimizasyonu kaldırır ve Next.js'de hem Google hem de yerel yazı tiplerini kullanmanın önerilen yoludur.