Download next google fonts - Download Kode Sumber next google fonts

next google fonts

Kode Sumber AI

v2.2.0

Unduh

️

Proyek ini telah sudah usang

Pada Next.js 10.2, Google Font dioptimalkan secara otomatis?

Terima kasih atas semua cinta dan dukungan Anda untuk proyek ini,
Joe

FONTS GOOGLE NEXTER

Pembantu Tiny next/head untuk memuat Google Font dengan cepat dan asinkron ⏩

Menggunakan Next.js 10? Lihat "Bagaimana ini dibandingkan dengan optimasi font Next.js?" sebelum melanjutkan.

Daftar isi

Pengaturan
FAQ

Pengaturan

Dalam contoh ini, kita akan menambahkan Inter (khususnya bobot 400 dan 700 ) ke aplikasi Next.js.

Lihat Joebell.co.uk untuk contoh yang berfungsi.

Tambahkan paket ke proyek Next.js Anda:
```
npm i next-google-fonts
```

Buat komponen Head khusus.

Penting untuk mengakui bahwa next-google-fonts adalah komponen kecil next/head dan tidak boleh bersarang di dalam next/head . Untuk menyelesaikan ini, bungkus kedua komponen dengan Fragment .

 // components/head.js
import * as React from "react" ;
import NextHead from "next/head" ;
import { GoogleFonts } from "next-google-fonts" ;

export const Head = ( { children , title } ) => (
  < React . Fragment >
    < GoogleFonts href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;700 & display = swap " />
    < NextHead >
      < meta charSet = "UTF-8" />
      < meta
        name = "viewport"
        content = "width=device-width, initial-scale=1.0"
      />
      < meta httpEquiv = "x-ua-compatible" content = "ie=edge" />

      < title > { title } </ title >

      { children }
    </ NextHead >
  </ React . Fragment >
) ;

Tambahkan Google Font/S yang diminta ke gaya Anda dengan fallback yang masuk akal. Tidak masalah apakah Anda menggunakan CSS atau SASS atau CSS-IN-JS:
```
 body {
  font-family : "Inter" , sans-serif;
}
```
Jalankan aplikasi berikutnya.js Anda untuk melihat hasilnya beraksi!
Anda harus berharap untuk melihat Font Font Font terlebih dahulu, diikuti dengan sakelar ke Google Font/S tanpa peringatan CSS yang memblokir render. Font/S Anda akan terus ditampilkan sampai aplikasi Anda dihidrasi ulang.
Jika JS dinonaktifkan, hanya font fallback yang akan ditampilkan.

FAQ

Bagaimana ini dibandingkan dengan optimasi font selanjutnya?
Mengapa?

Bagaimana ini dibandingkan dengan optimasi font selanjutnya?

Next.js 10 Diperkenalkan Otomatis Google Font Optimization, Anda dapat membuat keputusan tentang solusi mana yang digunakan berdasarkan kriteria berikut:

"Font saya bukan prioritas dan dapat dimuat secara asinkron "-gunakan next-google-fonts .
"Font saya adalah prioritas dan tidak boleh dimuat secara asinkron " - Gunakan Optimalisasi Font Next.js

Untuk bacaan lebih lanjut, lihat diskusi masalah berikutnya.js.

Mengapa?

next-google-fonts bertujuan untuk membuat proses menggunakan Google Font di Next.js lebih konsisten, lebih cepat, dan tidak menyakitkan: itu memberikan penghargaan pada aset font, preload, dan secara asinkron memuat file CSS.

Dalam iterasi saat ini dari next/head , kami tidak dapat memanfaatkan metode "Media Hack" yang akrab dari pemuatan google font asinkron:

 <!-- Plain HTML -->
< link
  rel =" stylesheet "
  href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap "
  media =" print "
  onload =" this.media='all' "
/>