Di posting sebelumnya, saya menulis tentang font sistem dan kelebihannya dibandingkan font web. Saya mendukung pendekatan "font sistem dulu", dengan alasan bahwa dibandingkan dengan font sistem, font web (a) dapat berdampak negatif pada performa, (b) menggunakan lebih banyak data, dan (c) meningkatkan konsumsi daya situs Anda. Tetapi web tanpa font web akan menjadi kurang menarik - mungkin dengan menggunakan font web secara lebih bertanggung jawab, kita bisa mendapatkan semua manfaatnya sambil meminimalkan kerugiannya.
Di bagian pertama tutorial ini, saya akan membahas lima metode untuk meningkatkan kinerja font web yang menurut saya akan berdampak paling besar dengan sedikit usaha.
Penghargaan untuk Zach Leserman, yang banyak menulis tentang font web di situsnya. Semua artikelnya patut dibaca, terutama The Font Loading Checklist dan A Comprehensive Guide to Font Loading Strategies (yang benar-benar sangat komprehensif), yang keduanya terbukti sangat membantu saat saya menulis postingan ini.
, , :
(typeface) — , . ( , , ). Helvetica — . .
(font) — . , , , , «Helvetica Bold Italic 10 ». , ( , ).
1.
Format Font Terbuka Web 2.0 (woff2) adalah format file terkecil dan paling efisien untuk font web pada saat penulisan. Saat menggunakan @ font-face at-rules di CSS, pastikan font woff2 dirender sebelum format file yang lebih lama dan kurang efisien seperti ttf. Browser akan menggunakan font pertama dalam daftar yang dipahami, meskipun itu adalah file yang lebih besar.
@font-face { font-family: 'Typefesse'; src: url('typefesse.woff2') format('woff2'), url('typefesse.woff') format('woff'); }
Jika Anda tidak memerlukan dukungan IE8, Anda tidak memerlukan apa pun selain woff2 dan woff. Jika Anda tidak memerlukan dukungan IE11, Anda hanya perlu woff2.
Jika Anda hanya memiliki file ttf (misalnya, jika Anda mengunduh font dari Google Fonts), Anda perlu mengonversinya menggunakan alat seperti Online Font Converter . Jika Anda tidak menggunakan font open source sepenuhnya, pertama-tama periksa apakah lisensi mengizinkannya.
2. Gunakan tampilan font deskriptor
Ada dua akronim yang akan sering Anda lihat saat Anda mulai memahami strategi pemuatan font:
- Flash of Invisible Text (foit) adalah periode waktu di mana teks tidak terlihat sebelum browser memuat font web.
- Flash of Unstyled Text (fout) adalah periode waktu teks dirender menggunakan font fallback sebelum browser memuat font web.
Tidak ada satu pun di atas yang sempurna, tetapi jika Anda menggunakan font web, beberapa di antaranya mungkin terjadi saat pertama kali pengguna mengunjungi situs web Anda (mudah-mudahan, saat halaman kedua dimuat, browser akan dapat menampilkan font dari situs web Anda). cache). Jika kita mengambil font-face at-rule dari yang sebelumnya dan menambahkan deskriptor font-display , kita dapat memberi tahu browser mana yang kita sukai.
@font-face { font-family: 'Typefesse'; src: url('typefesse.woff2') format('woff2'), url('typefesse.woff') format('woff'); font-display: swap; }
Ada lima kemungkinan nilai tampilan font: pertama, otomatis adalah perilaku browser default (kebanyakan browser lebih memilih foit). Ini empat lagi:
menukar
swap memberi tahu browser bahwa kami ingin teks ditampilkan menggunakan font fallback sampai font web dimuat (yaitu, kami lebih suka menggunakan fout). Apakah itu membutuhkan waktu 5 detik atau 5 menit, segera setelah font diunduh, itu akan diganti. Ini adalah fondasi yang baik karena memungkinkan pengunjung situs web untuk langsung mulai membaca konten Anda, tetapi pastikan untuk memilih opsi yang serupa (kami: Di bagian dua seri artikel ini, kami akan membahas opsi fallback) untuk mencegah ketidaksejajaran tata letak yang besar saat mengubah font.
blok
Jika kita lebih suka browser menyembunyikan teks sampai font web dimuat (yaitu kita lebih suka foit), kita dapat menggunakan font-display: block. Namun, teks tidak akan tetap terlihat selamanya: jika font tidak dimuat selama jangka waktu tertentu (biasanya tiga detik), browser akan tetap menggunakan font fallback, menggantinya dengan font web setelah dimuat.
Jika menurut Anda ini adalah opsi terbaik karena menurut Anda gambar terlihat buruk, ingatlah bahwa ketika teks tidak terlihat, halaman Anda tidak dapat digunakan dan konten Anda tidak dapat dibaca.
fallback
fallback mirip dengan swap dengan dua perbedaan:
- Ini dimulai dengan periode "blok" yang sangat kecil (~ 100 md) saat teks disembunyikan, setelah itu font pengganti ditampilkan.
- Jika font web tidak dimuat dalam waktu singkat (~ 3 dtk), font pengganti akan digunakan hingga akhir halaman.
Jika Anda tidak khawatir tentang apakah pengguna melihat font web Anda saat pertama kali mengunjungi situs Anda (mereka mungkin tidak terlalu peduli tentang itu), fallback adalah pilihan yang baik.
pilihan
opsional mirip dengan fallback, tetapi memberi font waktu yang sangat singkat (~ 100 md) untuk dimuat, setelah itu font tidak akan diganti. Namun, ia memiliki fitur tambahan yang memungkinkan browser memutuskan untuk membatalkan permintaan font jika koneksi terlalu lambat untuk memuat font.
foit/fout — , . ( . - Mitt Romney). JavaScript ( ).
3.
Untuk meminimalkan periode foit / fout, kami ingin memuat file font web kami secepat mungkin. Dengan menggunakan
link rel = "preload"
html kami
head
, kami dapat memberi tahu browser untuk mulai mengambil font kami lebih awal. Tambahkan tag berikut ke bagian atas Anda
head
(sebelum css apa pun) dengan menyetel atribut
href
ke url file font Anda:
link rel="preload" href="/typefesse.woff2" as="font" type="font/woff2" crossorigin
Dengan menambahkan tag ini kami memberi tahu browser untuk mulai mengunduh file font kami sekarang, sedangkan biasanya tidak mulai sampai menemukan tautan ke font tertentu di CSS Anda dan tidak akan menemukan elemen dom yang menggunakannya.
Browser biasanya cukup pintar untuk hanya memuat font saat diperlukan di halaman saat ini. Menggunakan pramuat menimpa perilaku ini, memaksa browser untuk mengunduh font bahkan saat tidak digunakan. Oleh karena itu, selalu muat hanya satu format untuk setiap font (woff2, jika Anda memilikinya).
Semakin banyak font yang Anda muat sebelumnya, semakin sedikit manfaat yang akan Anda peroleh dari metode ini, jadi pilih font yang muncul "paro atas" (100vh pertama yang dilihat pengguna tanpa menggulir).
Anda dapat membaca lebih lanjut tentang pramuat dalam artikel ini oleh Yoav Weiss: Preload: What Is It Good For?
4. Ambil file font
Dengan membuat subset dari font, kita dapat menghasilkan file font baru yang lebih kecil yang hanya menyertakan mesin terbang (mesin terbang adalah satu karakter atau karakter) yang kita butuhkan. Saya menggunakan alat Font Subsetter di Everything Fonts agar sesuai dengan font Space Grotesk Bold yang digunakan untuk tajuk di situs ini untuk hanya menyertakan karakter Latin Dasar. Ini mengurangi ukuran file versi woff2 dari 30KB menjadi 7KB.
Subset adalah alat yang ampuh, tetapi memiliki beberapa kekurangan potensial. Jika Anda membuat situs web yang menampilkan konten buatan pengguna, nama orang, atau nama tempat, Anda harus menggunakan karakter selain 26 huruf standar, 10 angka, dan beberapa karakter yang umum dalam tulisan bahasa Inggris.
Minimal, Anda harus memikirkan diakritik: mesin terbang yang muncul di atas atau di bawah karakter yang mengubah pelafalannya. Mereka umum dalam bahasa termasuk Prancis, Spanyol, Vietnam, dan teks transliterasi (atau "diromanisasi") dari alfabet seperti Yunani atau Ibrani; mereka juga muncul dalam kata pinjaman (kata-kata yang diambil dari bahasa lain).
Jika Anda terlalu membuat subset, Anda mungkin akan berakhir dengan kombinasi font dalam satu kata.
Jika saya ingin menulis tentang do-it-yourselfer, saya mungkin harus menyesuaikan file subset font yang saya gunakan untuk tajuk. Perhatikan bagaimana bentuk "â" dan "é" (dengan aksen) tidak cocok dengan versi non-aksen dari huruf-huruf ini.
Untungnya, Anda tidak perlu memeriksa setiap halaman di situs Anda secara manual untuk mencari karakter yang berbeda. Mesin terbangAdalah alat baris perintah yang melakukan dua hal: pertama, merayapi laman web Anda dan menentukan rentang karakter Unicode yang digunakan (rentang ini sesuai dengan skrip atau bahasa, misalnya Latin Dasar, Sirilik, Thai); kedua, ini adalah bagian dari file font, mengeluarkan versi baru yang hanya berisi karakter dari rentang yang ditentukan.
Memulai Glyphhanger bisa sedikit rumit (Anda memerlukan python dan pip) - Sarah Sueidan menjelaskan bagaimana dia melakukannya di artikel ini: Bagaimana saya mengatur Glyphhanger di macOS untuk mengoptimalkan dan mengonversi file font untuk Web .
Seperti halnya mengubah format file, pastikan lisensi font Anda mengizinkan subset dari.
5. Tempatkan fon sendiri
Ini bukan aturan universal, seperti kebanyakan aturan lainnya. Ada dua alasan bagus mengapa Anda mungkin ingin menggunakan layanan yang dihosting seperti Google Fonts atau Adobe Fonts :
Ini seringkali merupakan cara termurah atau satu-satunya untuk menggunakan tipografi tertentu di Internet. Jika Anda tidak punya pilihan selain menggunakan salah satu layanan ini, lihat apakah layanan ini mendukung subsetting atau menambahkan deskriptor tampilan font.
Mereka berguna: menyalin dan menempelkan baris html di situs Anda akan lebih cepat daripada alternatif: mengunduh file font, mengonversi dan subset file font, lalu menulis @ font-face at-rules untuk setiap bobot dan gaya.
Jika Anda masih menggunakan Google Font hanya untuk kenyamanan, lihat google-webfonts-helper . Alat ini memungkinkan Anda membuat paket font web Anda sendiri dari kumpulan font Google lengkap, menentukan bobot dan kumpulan karakter yang Anda inginkan, dan kemudian memberi Anda satu unduhan yang berisi semua file css dan font (dalam format terbaru) yang Anda butuhkan.
Mitos # 1 Tentang Font Web Anda
mungkin pernah mendengar pernyataan (yang diulangi di Google Fonts) bahwa jika pengguna sebelumnya telah mengunjungi situs yang mendownload font yang sama dari sumber yang sama, browser tidak perlu mendownloadnya lagi karena mereka di-cache ...
Sekali ini mungkin benar, tetapi saya tidak dapat menemukan bukti bahwa ini adalah fenomena yang cukup umum yang akan mempengaruhi sesuatu. Faktanya, baik Google Chrome dan Safari secara eksplisit melarang berbagi sumber daya pihak ketiga yang disimpan dalam cache di seluruh domain karena masalah pelacakan.
Berikut adalah daftar alasan bagus untuk tidak menggunakan layanan yang dihosting dan sebagai gantinya menghosting font sendiri:
Performa
Menemukan domain membutuhkan waktu, Anda dapat menggunakan petunjuk sumber daya untuk meredakan situasi, tetapi kinerja selalu menurun dengan membuka koneksi TCP ke domain baru. Ini mungkin alasan mengapa beberapa situs Google sendiri (termasuk web.dev ) sekarang menggunakan font asli, bukan font Google.
Kerahasiaan
Layanan font web berbayar seperti Adobe Fonts harus menentukan tampilan halaman untuk penghitungan, tetapi mereka mungkin mengumpulkan lebih banyak data daripada yang benar-benar diperlukan. Jika Anda punya pilihan, muat font menggunakan css (
link rel = "stylesheet"
) daripada JavaScript (
script
) untuk meminimalkan jumlah data yang mungkin dikumpulkan pihak ketiga tentang pengguna Anda.
Sepertinya Google Font tidak mengumpulkan pengunjung situs web sebanyak alamat IP dan string Agen pengguna, tetapi Google tidak sepenuhnya tanpa pamrih dalam menyediakan layanan secara gratis. Masing-masing dari lima puluh triliun tampilan halaman yang menggunakan font Google adalah titik data yang tidak akan dimiliki Google jika situs web menggunakan font mereka sendiri.
Kontrol
Dengan font offline, Anda memiliki kendali penuh atas bagaimana Anda memuat font, memungkinkan Anda untuk melayani subset kustom, menentukan opsi tampilan font, dan menentukan berapa lama browser harus menyimpan file font.
Keandalan
Layanan pihak ketiga mungkin melambat, terputus, atau berhenti bekerja sama sekali . Dengan font yang dihosting sendiri, saat situs web Anda aktif dan berjalan, font Anda akan tersedia.
Kesimpulan
Masing-masing langkah ini dapat memiliki manfaatnya sendiri, tetapi menggunakannya bersama dapat menghasilkan peningkatan besar. Jika Anda memutuskan untuk mengikuti beberapa langkah dalam artikel ini, coba gunakan alat seperti Lighthouse atau Tes Halaman Web sebelum dan sesudah membuat perubahan untuk melihat efek dari setiap perubahan individual.
Di bagian dua, kita akan melihat beberapa teknik yang lebih canggih, termasuk strategi pemuatan font JavaScript dan font variabel. Kami juga akan melihat pentingnya memilih font fallback yang tepat dan memperkenalkan akronim baru - FOFT, Flash Of Faux Text.
Agar tidak kehilangan temuan desain saya dalam banyak bookmark di komputer saya, saya membuat saluran Telegram Drin Design . Semua materi keren dan bermanfaat (tutorial, artikel, link ke akun cowok keren) yang saya temukan sendiri, akan saya posting di sana. Silahkan.