Ditulis oleh: Ditulis pada: 5/30/2020
Penggunaan System Font Sebagai Solusi Untuk Menghilangkan Loading Dari Font - Sebenarnya sudah cukup lama mencari cara menghilangkan loading font.
Sudah banyak yang saya lakukan untuk mengatasi blocking render dari link font atau link Google font mulai dari defer loading link Google font sampai menggunakan CSS @font-face. Namun saya tetap masih penasaran bagaimana cara menggunakan font yang menurut saya cukup nyaman di mata namun irit loading dan CSS.
Sebenarnya untuk menggunakan font tanpa loading dan irit CSS, kita bisa menggunakan web safe font seperti Arial, Georgia, Helvetica, Times New Roman, dan lainnya. Namun sayangnya tampilan font-nya banya yang bilang tidak sesuai selera.
Dan akhirnya saya menemukan cara yang cukup sederhana dan manjur untuk mengatasi loading font dan mengirit CSS font yaitu dengan menggunakan system font.
Berawal dari keterbatasan penggunakan CSS pada AMP yang mengharuskan size CSS maksimal sebesar 50000byte, maka saya memutar otak untuk terus mencari solusi mengurangi ukuran CSS dengan mengurangi CSS @font-face.
Seperti kita ketahui bahwa CSS @font-face bisa memiliki ukuran yang cukup banyak apalagi jika kita menggunakan beberapa jenis font dan beberapa jenis ketebalan font.
Namun @font-face merupakan cara untuk menghilangkan blocking render dari penggunaan link font atau link Google font.
Akhirnya saya menemukan cara aman untuk menggunakan font selain menggunakan web safe font yaitu dengan menggunakan system font.
Ternyata penggunaan system font juga sudah digunakan web-web besar seperti Github, Bootstrap, dan lainnya. Namun ini belum begitu familiar di telingan para developer dan blogger.
Kita cukup menambahkan font-family pada body dan pada element lainnya tinggal mengatur font-size dan font-weight.
font-family dari system font ini seperti berikut ini jika diterapkan pada body.
body{
font-family: -apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
}Dengan itu maka browser akan otomatis mendeteksi font yang digunakan oleh system dari perangkat yang digunakan user.
Penjelasannya seperti berikut ini:
- -apple-system (San Francisco) >> iOS Safari, macOS Safari, macOS Firefox
- BlinkMacSystemFont (San Francisco) >> macOS Chrome
- Segoe UI >> Windows
- Roboto >> Android, Chrome OS
- Oxygen / Oxygen-Sans >> KDE
- Ubuntu >> Ubuntu
- Cantarell >> GNOME
- Helvetica Neue >> macOS versions < 10.11
Namun jika user meng-install font Roboto pada Windows maka di Windows akan tampil sebagai font Roboto.
Sebagai demonya, blog ini sudah menggunakan system font ini, font yang tampil akan sesuai dengan font pada system perangkat Anda dan Anda juga bisa periksa Github, Bootstrap, atau AMP by example.
Semoga bermanfaat.
UPDATE: 05/30/2020
Saat ini blog Kompi Ajaib menggunakan web safe font yaitu Georgia dan Arial dan saya rasa tetap nyaman juga, tapi pilihan tetap ada di masing-masing ya....