Contoh Banner

Ternyata Tanpa Kode Fonts di HTML Lumayan Mempercepat Loading Blog

Ternyata Tanpa Kode Fonts di HTML Lumayan Mempercepat Loading Blog
Ternyata Tanpa Kode Fonts di HTML Lumayan Mempercepat Loading Blog

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.
Advertisement

Catatan:

File yang kami bagikan kami simpan di google drive, jika file format word dan excel dialihkan ke aplikasi google doc maka unduh / save as dulu ya. Namun jika kesulitan, silahkan baca cara downloadnya