Penggunaan System Font Sebagai Solusi Untuk Menghilangkan Loading Dari Font

Berawal dari keterbatasan penggunakan CSS pada AMP yang mengharuskan size CSS maksimal sebesar 50000byte, maka aku memutar otak untuk terus mencari solusi mengurangi ukuran CSS dengan mengurangi CSS @font-face.

Seperti kita ketahui bahwa CSS @font-face dapat mempunyai ukuran yang cukup banyak apalagi jikalau kita memakai 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 aku menemukan cara kondusif untuk memakai font selain memakai web safe font ialah dengan memakai system font.

Ternyata penggunaan system font juga sudah dipakai web-web besar ibarat 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 ibarat berikut ini jikalau 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 dipakai oleh system dari perangkat yang dipakai user.

Penjelasannya ibarat 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 jikalau user meng-install font Roboto pada Windows maka di Windows akan tampil sebagai font Roboto.

Sebagai demonya, blog ini sudah memakai system font ini, font yang tampil akan sesuai dengan font pada system perangkat Anda dan Anda juga dapat periksa Github, Bootstrap, atau AMP by example.

Semoga bermanfaat.


Sumber https://www.kompiajaib.com/

Share this post