Cara Menambahkan Font Web ke Situs Web Next.js

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.



di mana mendapatkan anak anjing di dekat saya
VIDEO MAKEUSEOF HARI INI

Menggunakan Font yang Dihosting Sendiri di Next.js

Untuk menambahkan font yang dihosting sendiri di Next.js, Anda perlu gunakan 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 situs web font, fontspace, dan dafont Google.

Setelah Anda mengunduh font web, konversikan ke format font yang berbeda untuk mendukung banyak browser. Kamu dapat memakai 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:



@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.

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 di a pemilih CSS seperti ini:

CD2E15590105E38A01559C54AC07E3A16C83D665

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.

cara ganti nama ps4

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.