Google Fonts: Cara Mudah Mengurangi Ukuran File Google Font untuk Situs Web Anda

Google Fonts adalah kumpulan font open source yang dapat Anda gunakan di situs web, dokumen, dan proyek desain lainnya tanpa batasan tentang perizinan.

Dibutuhkan satu baris kode untuk menyematkan salah satu fonts Google Font ke dalam desain situs web. Cukup ganti font-family dalam kode seperti dibawah dengan nama Google Font dan salin lalu rekatkan di dalam tag <head> dari templat HTML.

<link rel=”stylesheet” type=”text/css” href=”https://fonts.googleapis.com/css?family=GOOGLE_FONT”>

Kecepatan Halaman dan Google Fonts Web

Meskipun Google Font dapat membuat situs web Anda terlihat bagus, ada satu masalah yang terjadi, yaiutu loading lama saat membuka halaman situs web karena komputer harus mengunduhnya, seperti font Cabin Sketch, ukuranya kurang lebih 100 KB.

READ  Memilih Jasa Anti Rayap dengan Metode Kapur Barus

Namun ada solusi mudah untuk membantu mengurangi ukuran file Google Font sehingga tidak mengurangi waktu buka halaman web. Alih-alih menggunakan seluruh family google font, Anda dapat menentukan serangkaian huruf atau digit terbatas yang digunakan dalam teks dan Google akan secara dinamis menghasilkan file font baru yang hanya berisi karakter yang diminta.

Cara Mengurangi Ukuran File Font Google

Yang harus dilakukan adalah menambahkan parameter teks baru ke URL permintaan font Google dan nilai parameter ini akan memiliki semua huruf yang dibutuhkan.

Misalnya, jika saya perlu membuat teks Digital Inspiration menggunakan font Cabin Sketch, CSS yang dimodifikasi yang meminta file font Google akan terlihat seperti ini:

<link href=’http://fonts.googleapis.com/css?family=Cabin+Sketch&text=YOUR_TEXT_HERE’ rel=’stylesheet’ type=’text/css’ />

File font Google asli adalah sekitar 101 kb tetapi dengan teks terbatas ini, file font dikurangi, ukuran font menjadi 7,6 KB.

READ  Simak Dan Temukan Rekomendasi Game Aksi Gratis Yang Tepat

Google Fonts biasanya digunakan untuk merender teks logo dan dan judul (h1, h2, h3, dll.) Pada halaman web sehingga Anda dapat memodifikasi CSS yang sesuai. Atau, jika ingin meminta semua huruf dan angka di Google Font dan tanpa trik tambahan, CSS font akan terlihat seperti ini:

<link href=’http://fonts.googleapis.com/css?family=Cabin+Sketch&text=1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%20′ rel=’stylesheet’ type=’text/css’ />

File font dalam hal ini berukuran 37 KB dan itu masih 64% lebih rendah dari file font Google asli. dan, jika Anda bertanya-tanya mengapa saya memasukkan %20 dalam daftar teks, itu mewakili karakter spasi yang disandikan. Demikian pula, Anda dapat menambahkan %27 dan %22 ke daftar masing-masing untuk single quote (‘) and double quote (“).

READ  Rekomendasi Berbagai Game Android Terbaik 2019 untuk Anak-anak Dibawah 10 Tahun

You May Also Like

About the Author: Admin