Termasuk tautan Google Web Fonts atau impor?

190

Apa cara yang disukai untuk memasukkan Google Web Fonts ke halaman?

  1. melalui tag tautan?

    <link href = 'http: //fonts.googleapis.com/css? family = Judson: 400.400italic, 700' rel = 'stylesheet' type = 'text / css'>

  2. via impor dalam stylesheet?

    @import url (http://fonts.googleapis.com/css?family=Kameron:400.700);

  3. atau gunakan pemuat font web

    https://developers.google.com/webfonts/docs/webfont_loader

fonts webfonts google-webfonts kajo
sumber
3
Anda mungkin juga ingin membaca pertanyaan ini sebelum menggunakan font google sama sekali. tergantung pada proyek spesifik - itu mungkin tidak selalu menjadi pilihan cerdas.
Obmerk Kronen

Jawaban:

285

Untuk 90% + kasus, Anda kemungkinan menginginkan <link>tag. Sebagai aturan praktis, Anda ingin menghindari @importaturan karena mereka menunda pemuatan sumber daya yang disertakan sampai file diambil .. dan jika Anda memiliki proses pembangunan yang "meratakan" impor @, maka Anda membuat masalah lain dengan font web : penyedia dinamis seperti Google WebFonts menyajikan versi font khusus platform, jadi jika Anda hanya menyejajarkan konten, maka Anda akan berakhir dengan font yang rusak pada beberapa platform.

Sekarang, mengapa Anda menggunakan pemuat font web? Jika Anda perlu lengkap kontrol atas bagaimana font dimuat. Sebagian besar peramban akan menunda pengecatan konten ke layar sampai semua CSS diunduh dan diterapkan - ini menghindari masalah "flash konten yang tidak dilumpuhkan". Kelemahannya adalah .. Anda mungkin memiliki jeda dan penundaan ekstra hingga kontennya terlihat. Dengan JS loader, Anda dapat menentukan bagaimana dan kapan font menjadi terlihat .. misalnya, Anda bahkan dapat memudar setelah konten asli dilukis di layar.

Sekali lagi, kasus 90% adalah <link>tag: gunakan CDN yang baik dan font akan turun dengan cepat dan bahkan lebih mungkin, dilayani keluar dari cache.

Untuk info lebih lanjut, dan pandangan mendalam pada Google Web Fonts, lihat video GDL ini

igrigorik
sumber
1
"karena mereka menunda pemuatan sumber daya yang disertakan sampai file diambil" - bukankah itu alasan yang bagus untuk menggunakan @import? Karena biasanya Anda tidak ingin melihat konten sampai font telah dimuat (untuk menghindari flicker font)
Alex
2
Web Fonts API sangat berguna saat bekerja dengan HTML5 Canvas. Anda tidak dapat menggunakan font yang belum selesai dimuat sebelum menggambar teks dengannya, dan tentu saja setelah font dimuat itu tidak diperbarui secara otomatis. Terkait, API diperlukan untuk melacak kemajuan pemuatan aset, misalnya dalam game.
rvighne
14
Informasi ini harus ada di halaman Google Web Fonts. Ini hanya menyajikan tiga opsi untuk Anda - dan tidak memberikan petunjuk bermanfaat tentang mana yang harus digunakan dan kapan.
Gal
5
Tutorial ' Memulai ' Google sendiri hanya menggunakan <link>metode ini, jadi saya rasa itulah yang mereka rekomendasikan dengan cara yang tak terucapkan
James Cushing
2
Anda mungkin ingin menambahkan rel="preload"ke <link>tag juga, karena font akan dimuat sebelum teks muncul. Lihat 3perf.com/blog/link-rels
Elijah Mock
3

Gunakan yang <link>disediakan oleh Google karena ada versi pada font, tetapi tepat di atasnya menggunakan fitur prekoneksi HTML5 untuk meminta browser untuk membuka koneksi TCP dan menegosiasikan SSL terlebih dahulu dengan fonts.gstatic.com. Berikut ini sebuah contoh, yang jelas perlu berada di <head></head>tag Anda :

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
Mark Cilia Vincenti
sumber
Benarkah preconnect merupakan domain yang sama sekali berbeda dari tautan stylesheet dalam contoh Anda? fonts.gstatic.comversusfonts.googleapis.com
BadHorsie
1
@BadHorsie itulah intinya. Stylesheet di fonts.googleapis.com memiliki tautan ke sumber daya di fonts.gstatic.com. Anda memberi tahu browser untuk memulai koneksi ke host yang terakhir sehingga akan terhubung atau mulai terhubung pada saat ia menemukan tautan di stylesheet.
Mark Cilia Vincenti
3

Jika Anda khawatir tentang SEO (Optimasi Mesin Pencari) dan kinerja, ada baiknya menggunakan <link>tag karena dapat memuat font sebelumnya.

Contoh:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

Untuk info lebih lanjut baca ini: https://ashton.codes/preload-google-fonts-using-resource-hints/

Lobster
sumber