Font web adalah cara terbaik untuk menambahkan font khusus ke situs web Anda. Font ini mungkin tidak tersedia di sistem pengguna, jadi Anda harus menyertakannya dalam proyek Anda dengan menghostingnya atau mereferensikannya melalui CDN.
Pelajari cara menyertakan font web di situs web Next.js menggunakan dua metode ini.
Menggunakan Font yang Dihosting Sendiri di Next.js
Untuk menambahkan font yang dihosting sendiri di Next.js, Anda harus melakukannya gunakan aturan @font-face CSS. Aturan ini memungkinkan Anda menambahkan font khusus ke halaman web.
Sebelum menggunakan font-face, Anda harus mengunduh font yang ingin Anda gunakan. ada banyak situs di internet yang menawarkan font gratis, termasuk font Google, fontspace, dan situs web dafont.
Setelah Anda mengunduh font web, konversikan ke format font yang berbeda untuk mendukung banyak browser. Anda dapat gunakan alat konversi font online gratis untuk melakukannya. Peramban web modern mendukung format .woff dan .woff2. Jika Anda perlu mendukung browser lawas, Anda juga harus menyediakan format .eot dan .ttf.
Buat folder baru bernama font di direktori situs Anda dan simpan file font yang dikonversi di sana.
Langkah selanjutnya adalah memasukkan tampilan font ke dalam gaya/global.css file untuk membuatnya tersedia untuk seluruh situs web. Contoh ini menunjukkan tampilan font untuk font putri duyung dalam huruf tebal:
@font-wajah {
keluarga font: 'putri duyung';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') bentuk('embedded-opentype'),
url('Mermaid-Bold.woff2') bentuk('woff2'),
url('Mermaid-Bold.woff') bentuk('woff'),
url('Mermaid-Bold.ttf') bentuk('truetype');
font-berat: tebal;
gaya font: normal;
tampilan font: tukar;
}
Setelah Anda menyertakan file font, Anda dapat menggunakan font tersebut dalam file CSS tingkat komponen:
h1 {
font-family: Putri duyung;
}Menyertakan Font Web ke Next.js melalui CDN
Beberapa situs web menyediakan font web melalui CDN yang dapat Anda impor ke aplikasi Anda. Pendekatan ini mudah disiapkan karena Anda tidak perlu mengunduh font atau membuat tampilan font. Selain itu, jika Anda menggunakan font atau TypeKit Google, Next.js secara otomatis menangani pengoptimalan.
Anda dapat menambahkan font dari CDN menggunakan tag tautan atau aturan @import di dalam file CSS.
Tag tautan selalu berada di dalam tag kepala dari dokumen HTML. Untuk menambahkan tag kepala di Next.js, Anda harus membuat dokumen khusus. Dokumen ini memodifikasi tag head dan body yang digunakan untuk merender setiap halaman.
Mulai gunakan fitur dokumen kustom ini dengan membuat file /pages/_document.js.
Kemudian, sertakan tautan ke font di kepala file _document.js.
impor Dokumen, { Html, Head, Main, NextScript } dari "Berikutnya/dokumen";
kelasDokumen SayamemanjangDokumen{
statisasinkron getInitialProps (ctx) {
const Alat Peraga awal = menunggu Document.getInitialProps (ctx);
kembali { ...InitialProps };
}
render() {
kembali (
<Html>
<Kepala>
<tautan
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&tampilan=tukar"
rel="stylesheet"
/>
</Head>
<tubuh>
<Utama />
<Skrip Berikutnya />
</body>
</Html>
);
}
}
eksporbawaan Dokumen Saya;Cara Menggunakan Aturan @import untuk Menyertakan Font di Proyek Next.js
Pilihan lainnya adalah menggunakan aturan @import di file CSS yang ingin Anda gunakan fontnya.
Misalnya, buat font tersedia di seluruh proyek dengan mengimpor font web di gaya/global.css mengajukan.
@impor url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&tampilan=tukar');
Anda sekarang dapat merujuk keluarga font di a pemilih CSS seperti ini:
h1 {
keluarga font:'Tampilan Caslon Gratis', serif;
}Aturan @import memungkinkan Anda untuk mengimpor font dalam file CSS yang terkandung. Menggunakan tag tautan membuat font dapat diakses di seluruh situs.
Haruskah Anda Menghosting Font Secara Lokal atau Mengimpornya melalui CDN?
Font yang dihosting secara lokal biasanya lebih cepat daripada font yang diimpor dari CDN. Ini karena browser tidak perlu membuat permintaan tambahan ke CDN font setelah halaman web dimuat.
Jika Anda ingin menggunakan font yang diimpor, pramuat untuk meningkatkan kinerja situs. Jika font tersedia di font Google atau Typekit, Anda dapat mengimpornya dan memanfaatkan fitur pengoptimalan Next.js.
