Font Optimization

next/font yazı tiplerinizi (özel yazı tipleri dahil) otomatik olarak optimize edecek ve gelişmiş gizlilik ve performans için harici ağ isteklerini kaldıracaktır.

🎥 İzleyin: next/font → YouTube'u nasıl kullanacağınız hakkında daha fazla bilgi edinin (6 dakika).

next/font herhangi bir yazı tipi dosyası için yerleşik otomatik kendi kendine barındırma içerir. Bu, kullanılan temel CSS size-adjust özelliği sayesinde web yazı tiplerini sıfır düzen kayması ile en iyi şekilde yükleyebileceğiniz anlamına gelir.

Bu yeni yazı tipi sistemi, performans ve gizliliği göz önünde bulundurarak tüm Google Yazı Tiplerini rahatça kullanmanıza da olanak tanır. CSS ve yazı tipi dosyaları derleme sırasında indirilir ve statik varlıklarınızın geri kalanıyla birlikte kendi kendine barındırılır. Tarayıcı tarafından Google'a hiçbir istek gönderilmez.

Google Fonts

Herhangi bir Google Yazı Tipini otomatik olarak kendi kendine barındırın. Yazı tipleri dağıtıma dahil edilir ve dağıtımınızla aynı etki alanından sunulur. Tarayıcı tarafından Google'a hiçbir istek gönderilmez.

Kullanmak istediğiniz yazı tipini next/font/google adresinden bir işlev olarak içe aktararak başlayın. En iyi performans ve esneklik için değişken yazı tiplerini kullanmanızı öneririz.

Yazı tipini tüm sayfalarınızda kullanmak için, aşağıda gösterildiği gibi /pages altındaki _app.js dosyasına ekleyin:

pages/_app.js
import { Inter } from 'next/font/google'
 
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({ subsets: ['latin'] })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

Değişken bir yazı tipi kullanamıyorsanız, bir ağırlık belirtmeniz gerekecektir:

pages/_app.js
import { Roboto } from 'next/font/google'
 
const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
})
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={roboto.className}>
      <Component {...pageProps} />
    </main>
  )
}

Bir dizi kullanarak birden fazla ağırlık ve/veya stil belirtebilirsiniz:

app/layout.js
const roboto = Roboto({
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
})

Bilmekte fayda var: Birden fazla sözcük içeren yazı tipi adları için alt çizgi (_) kullanın. Örneğin Roboto Mono, Roboto_Mono olarak içe aktarılmalıdır.

Apply the font in <head>

<head> Yazı tipini sarmalayıcı olmadan ve className adresine aşağıdaki gibi enjekte ederek de kullanabilirsiniz:

pages/_app.js
import { Inter } from 'next/font/google'
 
const inter = Inter({ subsets: ['latin'] })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{`
        html {
          font-family: ${inter.style.fontFamily};
        }
      `}</style>
      <Component {...pageProps} />
    </>
  )
}

Single page usage

Yazı tipini tek bir sayfada kullanmak için, aşağıda gösterildiği gibi belirli bir sayfaya ekleyin:

pages/index.js
import { Inter } from 'next/font/google'
 
const inter = Inter({ subsets: ['latin'] })
 
export default function Home() {
  return (
    <div className={inter.className}>
      <p>Hello World</p>
    </div>
  )
}

Specifying a subset

Google Yazı Tipleri otomatik olarak alt kümesine yerleştirilir. Bu, yazı tipi dosyasının boyutunu azaltır ve performansı artırır. Bu alt kümelerden hangilerini önceden yüklemek istediğinizi tanımlamanız gerekir. Bu sırada herhangi bir alt küme belirtmezseniz preloadtrue bir uyarı ile sonuçlanacaktır.

Bu, fonksiyon çağrısına eklenerek yapılabilir:

pages/_app.js
const inter = Inter({ subsets: ['latin'] })

Daha fazla bilgi için Font API Referansına bakın.

Using Multiple Fonts

Uygulamanızda birden fazla yazı tipini içe aktarabilir ve kullanabilirsiniz. Kullanabileceğiniz iki yaklaşım vardır.

İlk yaklaşım, bir yazı tipini dışa aktaran, içe aktaran ve gerektiğinde className adresini uygulayan bir yardımcı program işlevi oluşturmaktır. Bu, yazı tipinin yalnızca işlendiğinde önceden yüklenmesini sağlar:

app/fonts.ts
import { Inter, Roboto_Mono } from 'next/font/google'
 
export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})
 
export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})

Yukarıdaki örnekte, Inter global olarak uygulanacaktır ve Roboto Mono içe aktarılabilir ve gerektiğinde uygulanabilir.

Alternatif olarak, bir CSS değişkeni oluşturabilir ve bunu tercih ettiğiniz CSS çözümüyle kullanabilirsiniz:

app/global.css
html {
  font-family: var(--font-inter);
}
 
h1 {
  font-family: var(--font-roboto-mono);
}

Yukarıdaki örnekte, Inter global olarak uygulanacak ve tüm <h1> etiketleri Roboto Mono ile şekillendirilecektir.

Öneri: Her yeni yazı tipi müşterinin indirmesi gereken ek bir kaynak olduğundan, birden fazla yazı tipini ihtiyatlı bir şekilde kullanın.

Local Fonts

next/font/local adresini içe aktarın ve yerel yazı tipi dosyanızın src adresini belirtin. En iyi performans ve esneklik için değişken yazı tiplerini kullanmanızı öneririz.

pages/_app.js
import localFont from 'next/font/local'
 
// Font files can be colocated inside of `pages`
const myFont = localFont({ src: './my-font.woff2' })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
      <Component {...pageProps} />
    </main>
  )
}

Tek bir font ailesi için birden fazla dosya kullanmak istiyorsanız, src bir dizi olabilir:

const roboto = localFont({
  src: [
    {
      path: './Roboto-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './Roboto-Italic.woff2',
      weight: '400',
      style: 'italic',
    },
    {
      path: './Roboto-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './Roboto-BoldItalic.woff2',
      weight: '700',
      style: 'italic',
    },
  ],
})

Daha fazla bilgi için Font API Referansına bakın.

With Tailwind CSS

next/font bir CSS değişkeni aracılığıyla Tailwind CSS ile kullanılabilir.

Aşağıdaki örnekte, next/font/google adresinden Inter yazı tipini kullanıyoruz (Google veya Local Fonts'tan herhangi bir yazı tipini kullanabilirsiniz). Yazı tipinizi variable seçeneği ile yükleyerek CSS değişken adınızı tanımlayın ve inter adresine atayın. Ardından, CSS değişkenini HTML belgenize eklemek için inter.variable adresini kullanın.

pages/_app.js
import { Inter } from 'next/font/google'
 
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${inter.variable} font-sans`}>
      <Component {...pageProps} />
    </main>
  )
}

Son olarak, CSS değişkenini Tailwind CSS yapılandırmanıza ekleyin:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}

Artık yazı tipini öğelerinize uygulamak için font-sans ve font-mono yardımcı sınıflarını kullanabilirsiniz.

Preloading

Sitenizin bir sayfasında bir yazı tipi işlevi çağrıldığında, bu işlev global olarak kullanılamaz ve tüm rotalara önceden yüklenmez. Bunun yerine, yazı tipi yalnızca kullanıldığı dosya türüne bağlı olarak ilgili rotaya/rotalara önceden yüklenir:

Reusing fonts

localFont veya Google font işlevini her çağırdığınızda, bu font uygulamanızda bir örnek olarak barındırılır. Bu nedenle, aynı font işlevini birden fazla dosyaya yüklerseniz, aynı fontun birden fazla örneği barındırılır. Bu durumda aşağıdakileri yapmanız önerilir: