Skip to main content
KOMPI AJAIB

follow us

Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. Selamat hari raya Idul Fitri, 1 Syawal 1439 H.

×

Penggunaan System Font Sebagai Solusi Untuk Menghilangkan Loading Dari Font

Sebenarnya saya sudah cukup lama mencari cara untuk menghilangkan loading dari font blog. 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 tidak sesuai selera saya.

Dan akhirnya saya menemukan cara yang cukup sederhana dan manjur untuk mengatasi loading font dan mengirit CSS font yaitu dengan menggunakan system font.

Baca juga:

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.

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar