Cara Menambahkan Font Web ke Situs Web Next.js

Font web adalah cara yang bagus untuk menambahkan font khusus ke situs web Anda. Font ini mungkin tidak tersedia di sistem pengguna, jadi Anda perlu memasukkannya ke dalam proyek Anda dengan menghostingnya atau mereferensikannya melalui CDN.


Pelajari cara memasukkan 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 perlu menggunakan aturan CSS @font-face. Aturan ini memungkinkan Anda untuk 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 menggunakan 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 wajah font di gaya/global.css file untuk membuatnya tersedia untuk seluruh situs web. Contoh ini menunjukkan wajah font untuk font putri duyung dalam huruf tebal:

See also  Cara Mengaktifkan atau Menonaktifkan Akselerasi Perangkat Keras di Firefox

@font-face {
font-family: 'Mermaid';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') format('embedded-opentype'),
url('Mermaid-Bold.woff2') format('woff2'),
url('Mermaid-Bold.woff') format('woff'),
url('Mermaid-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}

Setelah Anda menyertakan file font, Anda dapat menggunakan font tersebut dalam file CSS tingkat komponen:

h1 {
font-family: Mermaid;
}

Menyertakan Font Web ke Next.js melalui CDN

Beberapa situs web menyajikan font web melalui CDN yang dapat Anda impor ke aplikasi Anda. Pendekatan ini mudah diatur karena Anda tidak perlu mengunduh font atau membuat tampilan font. Selain itu, jika Anda menggunakan font Google atau TypeKit, 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 dokumen HTML. Untuk menambahkan tag kepala di Next.js, Anda harus membuat dokumen khusus. Dokumen ini memodifikasi tag kepala dan badan yang digunakan untuk merender setiap halaman.

Mulai gunakan fitur dokumen khusus ini dengan membuat file /pages/_document.js.

Kemudian, sertakan tautan ke font di kepala file _document.js.

import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;

Cara Menggunakan Aturan @import untuk Menyertakan Font dalam Proyek Next.js

Opsi lainnya adalah menggunakan aturan @import di file CSS yang ingin Anda gunakan fontnya.

See also  11 Cara Unik untuk Mengatur Aplikasi Android Anda

Misalnya, buat font tersedia di seluruh proyek dengan mengimpor font web di gaya/global.css mengajukan.

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');

Anda sekarang dapat mereferensikan keluarga font dalam pemilih CSS seperti ini:

h1 {
font-family:'Libre Caslon Display', serif;
}

Aturan @import memungkinkan Anda mengimpor font dalam file CSS yang ada. 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 untuk font CDN setelah halaman web dimuat.

Jika Anda ingin menggunakan font yang diimpor, muat terlebih dahulu untuk meningkatkan kinerja situs. Jika font tersedia di font Google atau Typekit, Anda dapat mengimpornya dan memanfaatkan fitur pengoptimalan Next.js.