Font Module

Bu API referansı, API'yi nasıl kullanacağınızı anlamanıza yardımcı olacaktır next/font/google ve next/font/local. Özellikler ve kullanım için lütfen Yazı Tiplerini Optimize Etme sayfasına bakın.

Font Function Arguments

Kullanım için Google Fonts ve Local Fonts'u inceleyin.

src

Font yükleyici işlevinin çağrıldığı dizine göre bir dize veya bir nesne dizisi ( Array<{path: string, weight?: string, style?: string}> türünde) olarak font dosyasının yolu.

İçinde kullanılır next/font/local

• Gerekli

Örnekler:

• src:'./fonts/my-font.woff2' burada my-font.woff2, app dizininin içinde fonts adlı bir dizine yerleştirilir
• src:[{path: './inter/Inter-Thin.ttf', weight: '100',},{path: './inter/Inter-Regular.ttf',weight: '400',},{path: './inter/Inter-Bold-Italic.ttf', weight: '700',style: 'italic',},]
• yazı tipi yükleyici işlevi src:'../styles/fonts/my-font.ttf' kullanılarak app/page.tsx içinde çağrılırsa, my-font.ttf projenin kökünde styles/fonts içine yerleştirilir

weight

Yazı tipi weight aşağıdaki olasılıklarla:

• Belirli bir yazı tipi için mevcut ağırlıkların olası değerlerini içeren bir dize veya değişken bir yazı tipiyse bir değer aralığı
• Yazı tipi değişken bir google yazı tipi değilse ağırlık değerleri dizisi . Yalnızca next/font/google için geçerlidir.

next/font/google ve next/font/local

• Kullanılan yazı tipi değişken değilse gereklidir

Örnekler:

• weight: '400': Tek bir ağırlık değeri için bir dize - yazı tipi için Interolası değerler '100', '200', '300', '400', '500', '600', '700', '800', '900' veya 'variable' olup 'variable' varsayılandır)
• weight: '100 900': Değişken bir yazı tipi için 100 ile 900 arasındaki aralığı gösteren bir dize
• weight: ['100','400','900']: Değişken olmayan bir yazı tipi için 3 olası değerden oluşan bir dizi

style

Yazı tipi style aşağıdaki olasılıklarla:

• Varsayılan değeri olan bir dize değeri 'normal'
• Yazı tipi değişken bir google yazı tipi değilse bir stil değerleri dizisi . Yalnızca next/font/google için geçerlidir.

next/font/google ve next/font/local

• Opsiyonel

Örnekler:

• style: 'italic': Bir dize - normal veya italic için olabilir next/font/google
• style: 'oblique': Bir dize - next/font/local için herhangi bir değer alabilir ancak standart yazı tipi stillerinden gelmesi beklenir
• style: ['italic','normal']: next/font/google için 2 değerden oluşan bir dizi - değerler normal ve italic

subsets

Yazı tipi subsetsönceden yüklenmesini istediğiniz her bir alt kümenin adlarını içeren bir dizi dize değeri ile tanımlanır. subsets aracılığıyla belirtilen yazı tipleri, aşağıdaki durumlarda başlığa enjekte edilen bir bağlantı ön yükleme etiketine sahip olacaktır preload seçeneği varsayılan değer olan true'dur.

İçinde kullanılır next/font/google

• Opsiyonel

Örnekler:

• subsets: ['latin']: Alt kümesi olan bir dizi latin

Yazı tipiniz için Google Fonts sayfasında tüm alt kümelerin bir listesini bulabilirsiniz.

axes

Bazı değişken yazı tiplerinde dahil edilebilecek ekstra axes vardır. Varsayılan olarak, dosya boyutunu düşük tutmak için yalnızca yazı tipi ağırlığı dahil edilir. Olası axes değerleri belirli yazı tipine bağlıdır.

İçinde kullanılır next/font/google

• Opsiyonel

Örnekler:

• axes: ['slnt']: Burada gösterildiği gibi ek axes olarak slnt olan Inter değişken yazı tipi için slnt değerine sahip bir dizi . Yazı tipiniz için olası axes değerlerini, Google değişken yazı tipleri sayfasındaki filtresini kullanarak ve aşağıdakiler dışındaki eksenleri arayarak bulabilirsiniz wght

display

Yazı tipi display olası dize değerleri ile 'auto', 'block', 'swap', 'fallback' veya 'optional' varsayılan değeri 'swap'.

next/font/google ve next/font/local

• Opsiyonel

Örnekler:

• display: 'optional': optional değerine atanan bir dize

preload

Yazı tipinin önceden yüklenip yüklenmeyeceğini belirten boolean değeri. Varsayılan değer true'dur.

next/font/google ve next/font/local

• Opsiyonel

Örnekler:

• preload: false

fallback

Yazı tipi yüklenemezse kullanılacak yedek yazı tipi. Varsayılanı olmayan yedek yazı tiplerinin dizelerinden oluşan bir dizi.

• Opsiyonel

next/font/google ve next/font/local

Örnekler:

• fallback: ['system-ui', 'arial']: Yedek yazı tiplerini system-ui veya arial

adjustFontFallback

• next/font/google için: Kümülatif Düzen Kaymasını azaltmak için otomatik bir yedek yazı tipinin kullanılıp kullanılmayacağını belirleyen boolean değer . Varsayılan değer true.
• next/font/local için: Kümülatif Düzen Kaymasını azaltmak için otomatik bir yedek yazı tipinin kullanılıp kullanılmayacağını belirleyen bir dize veya boolean false değeri. Olası değerler 'Arial', 'Times New Roman' veya false şeklindedir. Varsayılan değer 'Arial' şeklindedir.

next/font/google ve next/font/local

• Opsiyonel

Örnekler:

• adjustFontFallback: false: için next/font/google
• adjustFontFallback: 'Times New Roman': için next/font/local

variable

Stil CSS değişkeni yöntemiyle uygulandığında kullanılacak CSS değişkeni adını tanımlamak için bir dize değeri.

next/font/google ve next/font/local

• Opsiyonel

Örnekler:

• variable: '--my-font': CSS değişkeni --my-font bildirilir

declarations

Oluşturulan @font-face adresini daha fazla tanımlayan font yüzü tanımlayıcısı anahtar-değer çiftlerinden oluşan bir dizi.

İçinde kullanılır next/font/local

• Opsiyonel

Örnekler:

• declarations: [{ prop: 'ascent-override', value: '90%' }]

Applying Styles

Yazı tipi stillerini üç şekilde uygulayabilirsiniz:

• className
• style
• CSS Değişkenleri

className

Bir HTML öğesine aktarılmak üzere yüklenen yazı tipi için salt okunur bir CSS className döndürür.

<p className={inter.className}>Hello, Next.js!</p>

style

Yazı tipi ailesi adına ve yedek yazı tiplerine erişmek için style.fontFamily dahil olmak üzere, bir HTML öğesine geçirilecek yüklenen yazı tipi için salt okunur bir CSS style nesnesi döndürür.

<p style={inter.style}>Hello World</p>

CSS Variables

Stillerinizi harici bir stil sayfasında ayarlamak ve ek seçenekleri burada belirtmek isterseniz CSS değişkeni yöntemini kullanın.

Yazı tipini içe aktarmanın yanı sıra, CSS değişkeninin tanımlandığı CSS dosyasını da içe aktarın ve yazı tipi yükleyici nesnesinin değişken seçeneğini aşağıdaki gibi ayarlayın:

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'
 
const inter = Inter({
  variable: '--font-inter',
})

Yazı tipini kullanmak için, stil vermek istediğiniz metnin ana konteynerinin className adresini yazı tipi yükleyicisinin variable değerine ve metnin className adresini harici CSS dosyasındaki styles özelliğine ayarlayın.

<main className={inter.variable}>
  <p className={styles.text}>Hello World</p>
</main>

text seçici sınıfını component.module.css CSS dosyasında aşağıdaki gibi tanımlayın:

.text {
  font-family: var(--font-inter);
  font-weight: 200;
  font-style: italic;
}

Yukarıdaki örnekte, Hello World metni Inter yazı tipi ve font-weight: 200 ve font-style: italic ile oluşturulan yazı tipi geri dönüşü kullanılarak şekillendirilmiştir.

Using a font definitions file

localFont veya Google font işlevini her çağırdığınızda, bu font uygulamanızda bir örnek olarak barındırılacaktır. Bu nedenle, aynı fontu birden fazla yerde kullanmanız gerekiyorsa, fontu tek bir yere yüklemeli ve ilgili font nesnesini ihtiyaç duyduğunuz yere içe aktarmalısınız. Bu, bir font tanımları dosyası kullanılarak yapılır.

Örneğin, uygulama dizininizin kök dizinindeki styles klasöründe bir fonts.ts dosyası oluşturun.

Ardından, yazı tipi tanımlarınızı aşağıdaki gibi belirleyin:

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'
 
// define your variable fonts
const inter = Inter()
const lora = Lora()
// define 2 weights of a non-variable font
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// define a custom local font where GreatVibes-Regular.ttf is stored in the styles folder
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })
 
export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }

Artık bu tanımları kodunuzda aşağıdaki gibi kullanabilirsiniz:

import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'
 
export default function Page() {
  return (
    <div>
      <p className={inter.className}>Hello world using Inter font</p>
      <p style={lora.style}>Hello world using Lora font</p>
      <p className={sourceCodePro700.className}>
        Hello world using Source_Sans_3 font with weight 700
      </p>
      <p className={greatVibes.className}>My title in Great Vibes font</p>
    </div>
  )
}

Kodunuzdaki yazı tipi tanımlarına erişimi kolaylaştırmak için tsconfig.json veya jsconfig.json dosyalarınızda aşağıdaki gibi bir yol takma adı tanımlayabilirsiniz:

{
  "compilerOptions": {
    "paths": {
      "@/fonts": ["./styles/fonts"]
    }
  }
}

Artık herhangi bir yazı tipi tanımını aşağıdaki gibi içe aktarabilirsiniz:

import { greatVibes, sourceCodePro400 } from '@/fonts'

Version Changes