self hosting fonts

Permalink
/index.html

Situs web (halaman git)

Font-font yang menjadi tuan rumah sendiri

Banyak dari kita menggunakan Google Fonts melalui CDN. Namun, Jerman telah memutuskan bahwa GDPR yang bertentangan ini, membuat pemilik situs terbuka untuk litigasi.

Kami masih dapat menampilkan font google dengan:

1. Mengunduh font (varian) dari Google Fonts, lalu
2. mengonversi file .ttf ke .woff dan .woff2 menggunakan generator font web, lalu
3. menggunakan @font-face di CSS dan
4. memuat font di HTML.

Catatan : Halaman ini berkonsentrasi di google font, tetapi prinsip yang sama berlaku untuk jenis lain dari font web lainnya.

Generator Font Web

Font Squirrel Ini bekerja untuk "Roboto" tetapi gagal dengan versi font statis dari kedua "Lato" dan "Open Sans".

Creative Fabrica Saya menggunakan ini untuk file statis "Lato" dan "Open Sans". Saya harus mengunggah setiap varian, satu per satu.

Html

Saya disarankan untuk memuat font di kepala halaman HTML. Ini seharusnya mempercepat pengiriman font dan meningkatkan kinerja Google Core Web Vitals (CWVS). Namun, saya melihat peringatan setelah melakukan ini (lihat Testing/Firefox dan Firefox Developer Edition, di bawah).

 < head >
  < link
    rel =" preload "
    href =" roboto-light-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  < link
    rel =" preload "
    href =" roboto-regular-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  < link
    rel =" preload "
    href =" roboto-medium-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  ...
  <!-- CSS file comes after preload -->
</ head > 

CSS

 @font-face {
  font-family : "Roboto" ;
  font-weight : 300 ;
  src : url ( "roboto-light-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-light-webfont.woff" )
      format ( "woff" );
}
/** Regular: 400 **/
@font-face {
  font-family : "Roboto" ;
  font-weight : 400 ;
  src : url ( "roboto-regular-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-regular-webfont.woff" )
      format ( "woff" );
}
/** Medium: 500 **/
@font-face {
  font-family : "Roboto" ;
  font-weight : 500 ;
  src : url ( "roboto-medium-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-medium-webfont.woff" )
      format ( "woff" );
}

Pengujian

• Diuji pada:
• Windows 10
• Chrome
• Firefox, Firefox Developer Edition
  • Catatan . Peringatan ditampilkan di konsol hanya dua browser ini. Peringatan itu terdiri dari 2 jenis:
  1. Tata letak dipaksakan sebelum halaman dimuat sepenuhnya. Jika stylesheet belum dimuat, ini dapat menyebabkan kilatan konten yang tidak terhubung.
  2. Peringatan lainnya adalah untuk setiap varian font, dan terjadi setelah sekitar 10 detik, misalnya untuk "Lato":
  • Sumber daya di “https://chrisnajman.github.io/self-hostting-fonts/fonts/lato/lato-light-webfont.woff2” yang dimuat dengan tautan preload tidak digunakan dalam beberapa detik. Pastikan semua atribut tag preload diatur dengan benar.
  • Sumber daya di “https://chrisnajman.github.io/self-hostting-fonts/fonts/lato/lato-regular-webfont.woff2” yang dimuat dengan tautan preload tidak digunakan dalam beberapa detik. Pastikan semua atribut tag preload diatur dengan benar.
  • Sumber daya di “https://chrisnajman.github.io/self-hostting-fonts/fonts/lato/lato-bold-webfont.woff2” yang dimuat dengan tautan preload tidak digunakan dalam beberapa detik. Pastikan semua atribut tag preload diatur dengan benar.
  • Diskusi dan pencarian di Stack Overflow belum menghasilkan jawaban yang dapat dimengerti. Namun, saya memposting pertanyaan sendiri di Stack Overflow dan jika dijawab, saya akan memperbarui readme.md ini dengan informasi baru.
• Microsoft Edge

Ucapan Terima Kasih

Sebagian besar informasi berasal dari font hosting mandiri yang dijelaskan (termasuk Google Fonts) // @font-face tutorial (YouTube). Informasi tentang preloading/cwvs, dan kepatuhan non-GDPR muncul dari utas komentar di halaman yang sama.