Cara Terbaru Mempercepat Loading Font di Blogspot
Sebenernya cara ini adalah
mengganti dari fungsi penggunaan system
font blocking render dari link font atau link Google font dengan system yang
mengikuti device penggunanya baik desktop ataupun smartphone, sehingga akan
sangat mengurangi beban loading dari blog tersebut.
Tutorial ini adalah 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. Silahkan ganti font-family pada body bawaan template dengan kode dibawah ini
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.