Next.js web sitesine web fontları eklemek oldukça kolaydır. Web fontlarını projenize eklemek için aşağıdaki adımları takip edebilirsiniz:
İhtiyacınız olan web fontunu indirin veya bir web font servisinden embed kodunu alın.
Web font dosyalarını Next.js projesindeki /public dizinine ekleyin. Bu, font dosyalarınızın statik olarak sunulmasını sağlayacaktır.
/pages/_document.js dosyasını oluşturun veya açın. Bu dosya, Next.js uygulamanızın belge yapısını özelleştirmenize olanak sağlar. Eğer _document.js dosyası zaten varsa, bu adımı atlayabilirsiniz.
Aşağıdaki kod örneğinde olduğu gibi, _document.js dosyasına web fontları ekleyin:
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet"
/>
<link
href="/fonts/custom-font.woff2"
rel="preload"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Yukarıdaki kodda, Google Fonts’tan Open Sans fontunu rel=”stylesheet” kullanarak ekledik. Ayrıca, /public/fonts/custom-font.woff2 dosyasını rel=”preload” kullanarak ön yükledik.
Web fontlarını kullanmak istediğiniz bileşenlere fontu uygulayın. Bunun için CSS kullanabilirsiniz. Örneğin:
import React from 'react'; import styles from './MyComponent.module.css'; const MyComponent = () => { return ( <div className={styles.container}> <h1 className={styles.heading}>Hello World</h1> <p className={styles.paragraph}>This is a paragraph.</p> </div> ); };export default MyComponent;
Yukarıdaki kodda, MyComponent bileşeninde CSS modülü kullanarak fontları bileşenin içindeki öğelere uyguladık.
Bu adımları takip ederek, Next.js web sitenize web fontları ekleyebilirsiniz.