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.