Next.js, web siteleri için fontların yüklenmesi için birkaç seçenek sunar. En yaygın yöntem, CSS’ye @font-face kuralları eklemek ve bu kuralları bir dosyaya yerleştirmektir.
Aşağıdaki adımları izleyerek Next.js web sitesine web fontları ekleyebilirsiniz:
Öncelikle, kullanacağınız fontu seçin ve bunu indirin veya doğrudan font servislerinden alın.
Font dosyalarını /public klasörüne yükleyin. Bu dosyalar web tarayıcısı tarafından doğrudan erişilebilir olmalıdır.
CSS dosyanıza @font-face kurallarını ekleyin ve font dosyalarına doğru yolu belirtin. Örneğin:
@font-face {
font-family: 'Open Sans';
src: url('/fonts/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('/fonts/OpenSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
body {
font-family: 'Open Sans', sans-serif;
}
Bu örnekte, Open Sans font dosyaları /public/fonts klasörüne yüklendi. @font-face kuralları, font dosyalarının doğru yolunu belirtir. Son satırda, font ailesi ‘Open Sans’ olarak belirtilir ve tüm sayfa fontu olarak kullanılır.
CSS dosyanızı Next.js sayfanıza ekleyin. Bu, stil dosyanızın yüklenmesini ve Next.js sayfanızın özelleştirilmesini sağlar.
import Head from 'next/head';
import styles from '../styles/Home.module.css';
export default function Home() {
return (
<div className={styles.container}>
<Head>
<link href="/fonts.css" rel="stylesheet" />
</Head>
<h1>Welcome to my website</h1>
<p>This is some text using the Open Sans font</p>
</div>
)
}
Bu örnekte, CSS dosyasının yolunu belirtmek için <link> etiketi kullanıldı ve dosya adı “fonts.css” olarak belirtildi.
Bu adımları takip ederek, Next.js web sitenize web fontları ekleyebilir ve kullanabilirsiniz.