Next.js web sitesine web fontları eklemek için birkaç farklı yöntem vardır. İşte bazı yaygın yöntemler:
CSS Dosyası Kullanma:
CSS dosyanıza web fontunun kaynağını ekleyebilir ve daha sonra web sitesinde bu stil dosyasını kullanabilirsiniz. İşte örnek bir CSS dosyası:
css
@font-face {
font-family: ‘Open Sans’;
src: url(‘https://fonts.googleapis.com/css2?family=Open+Sans&display=swap’);
}
body {
font-family: 'Open Sans', sans-serif;
}
Bu örnekte, “Open Sans” fontu Google Fonts’tan alınmıştır. Web sitesinde tüm body etiketleri için “Open Sans” fontu kullanılacak şekilde ayarlandı.
Next.js’in Head Component’i:
Next.js’in Head component’i, web sitesine <head> etiketi eklemek için kullanılır. Bu bileşen aracılığıyla web fontu bağlantısını ekleyebilirsiniz. İşte örnek bir Head bileşeni:
import Head from ‘next/head’;
export default function Home() {
return (
<div>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
</Head>
<div>Web sitesi içeriği</div>
</div>
);
}
Bu örnekte, “Open Sans” fontu yine Google Fonts’tan alınmış ve web sitesine bağlantı şeklinde eklenmiştir.
Next.js’in Custom Document’i:
Next.js’in Custom Document’i, web sitesinin HTML sayfasını özelleştirmek için kullanılır. Bu bileşen aracılığıyla web fontlarını <head> etiketi içine ekleyebilirsiniz. İşte örnek bir Custom Document bileşeni:
javascript
import Document, { Html, Head, Main, NextScript } from ‘next/document’;
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Bu örnekte, “Open Sans” fontu yine Google Fonts’tan alınmış ve web sitesine <head> etiketi içine eklenmiştir.
Bu yöntemlerden herhangi biri, Next.js web sitesine web fontları eklemek için kullanılabilir. Seçilen yöntem, web sitesinin ihtiyaçlarına ve projenin gereksinimlerine bağlı olarak değişebilir.