Ternyata Tanpa Kode Fonts di HTML Lumayan Mempercepat Loading Blog

Ditulis oleh: Ifrod Maksum

Ditulis pada: 3/06/2019

Baca juga:

• Belum Bisa Membuka Jasa Editing HTML / Modifikasi Tampilan Blog
• Kerjaan Orang Iseng Postingan Original Dilaporkan ke DMCA
• Cara Mudah Membuat Brangkas Pribadi HP Oppo

Entah apa yang ada dibenak saya, tapi intinya saya ingin update, itu saja. Seperti ita tahu bahwa penggunaan font di blog lumayan menyumbang loading juga apalagi berupa link eksternal. Alhamdulillah beberapa waktu yang lalu mas adhy memberikan tutorial tentang penggunaan system font pada blog untuk menghilangkan loading dari font.

Gampangnya, dengan menggunakan cara ini font ditampilkan di blog diatur oleh browser seperti chrome, mozilla firefox, opera dan lai-lain. Sehingga kita tak perlu lagi menyimpan font berupa link di HTML seperti ini:

<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'/>

atau berupa @font-face seperti ini:

@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype')}

Hal ini selain mengurangi loading blog, juga memperkecil ukuran penggunaan kode CSS. Hanya saja kita tidak bisa memilih jenis font yang tampil karena penggunaan system font ini secara default browser. Sehingga jika kita ingin font dengan style lain ya tetap harus copas ke html.

Jika ingin menggunakan trik ini, kita cukup menambahkan css pada body seperti ini:

body{font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif}

Untuk lebih jelas bisa anda simak postingan mas adhy di blognya pada link diatas. Maaf postingan ini apa adanya.