Dengan lebih dari 1.250 font sumber terbuka gratis, Google Font adalah sumber yang luar biasa untuk desainer web. Hampir setiap gaya tipografi tersedia di sini, dan 135+ bahasa diwakili.
Biasanya, font ini diimplementasikan melalui Google Fonts API. Tambahkan beberapa cuplikan kode ke situs web Anda, panggil font di CSS Anda, dan selesaikan sehari. Mudah, bukan? Dan prosesnya bisa lebih mudah jika Anda menggunakan plugin atau tema yang memungkinkan Anda memilih font saat digunakan.
Tetapi ada juga alasan kuat untuk meng-host Google Font secara lokal di server web Anda. Privasi adalah satu, seperti yang dimiliki beberapa yurisdiksi diatur bahwa hosting font jarak jauh melanggar undang-undang GDPR Eropa.
Kinerja adalah pertimbangan potensial lainnya. Meskipun ada beberapa perdebatan tentang hosting lokal vs. Google Fonts API, perbedaan tampaknya relatif kecil. Opsi untuk memanfaatkan jaringan pengiriman konten (CDN) juga dimungkinkan.
Jika Anda ingin menghosting Google Font secara lokal, kami akan memperkenalkan Anda cara mudah untuk menerapkannya. Serius – Anda bisa bangun dan berjalan dalam beberapa menit!
Pertama, Identifikasi Google Font yang Ingin Anda Gunakan
Langkah pertama dalam proses ini adalah mengidentifikasi Google Font mana yang ingin Anda gunakan dalam proyek Anda. Jelajahi situs resmi dan perhatikan hal-hal berikut:
- Nama fontnya;
- Gaya yang ingin Anda gunakan;
- Bahasa yang Anda butuhkan;
Kamu sekarang bisa unduh pilihan Anda langsung dari Google Font. Dan meskipun tidak ada yang salah dengan metode ini, ini bisa menjadi sedikit rumit.
Untuk menggunakan font di situs web Anda, Anda juga harus memanggil file yang dihosting secara lokal melalui @font-face di CSS Anda. Itu melibatkan melihat kode sumber Google untuk setiap font, lalu memilih set karakter yang benar dan mengubah src untuk mencocokkan tempat font Anda disimpan.
Misalnya, jika kita ingin menggunakan Roboto’s “lampu”, CSS terlihat seperti ini (komentar ditambahkan/diedit untuk kejelasan):
/* latin - is this the only character set we need? */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2'); /* Change to match your local font location */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; /* This isn't needed at all */
}Mungkin itu bukan hal terburuk di dunia. Tetapi jika Anda memiliki beberapa font, masing-masing dengan beberapa gaya, ini bisa menjadi sangat membosankan.
Tambahkan Font Menggunakan Google Webfonts Helper
Hosting Google Font Anda secara lokal tidak harus terlalu rumit. Itu google-webfonts-helper adalah alat yang membuat prosesnya sangat mulus. Itu melakukan semua pekerjaan berat untuk Anda.
Sebelum kita mulai, perhatikan: mungkin ada perbedaan versi antara google-webfonts-helper dan Google Font itu sendiri. Google Font ditingkatkan dari waktu ke waktu. Tidak menggunakan API berarti tidak selalu memiliki versi terbaru.
Untuk memulai, cari font yang ingin Anda gunakan. Perhatikan bahwa Anda hanya dapat bekerja dengan satu font dalam satu waktu. Langkah-langkah di bawah ini perlu diulang untuk setiap font tambahan.
Dalam kasus kami, kami akan menemukan salah satu font Google yang paling populer, Roboto, dari daftar.
Selanjutnya, saatnya memilih set karakter (charset) dan gaya yang kita butuhkan.
Berdasarkan pilihan karakter dan gaya kami, google-webfonts-helper menghasilkan CSS yang diperlukan. Secara default, kode ini bertujuan untuk mendukung sebanyak mungkin browser. Namun, kami juga dapat memilih untuk fokus pada browser modern.
Bahkan memungkinkan kita untuk mengedit direktori dasar tempat kita ingin menyimpan file font. Ini akan langsung tercermin dalam CSS.
Dengan semua pengaturan kami sekarang diterapkan, arsip .ZIP tersedia untuk diunduh. Kami akan membuka zip arsip ke tujuan yang dipilih dan mengunggahnya ke server web kami.
Akhirnya, kami akan menempelkan yang disediakan @font-face kode ke dalam CSS kita. Membuat catatan tentang font-family atribut, kita dapat menambahkan font ini ke pemilih CSS mana pun yang kita inginkan.
Melayani Google Font Secara Lokal
Dengan beberapa langkah sederhana (dan bantuan dari google-webfonts-helper), Anda dapat mengabaikan Google Fonts API dan menghosting font secara lokal. Ini tidak hanya meningkatkan privasi pengguna tetapi juga membantu menghindari potensi komplikasi dari waktu henti API atau kemacetan kinerja.
Karena itu, font yang dihosting secara lokal berarti lebih banyak pekerjaan untuk server web Anda. Jadi, tetap penting untuk memanfaatkan caching dan pengoptimalan lainnya. Faktor-faktor ini harus dipertimbangkan sebelum Anda mengambil risiko.
Terlepas dari cara Anda menggunakan Google Font, senang mengetahui bahwa ada banyak cara untuk melakukannya. Ini memungkinkan Anda untuk memilih metode terbaik untuk kebutuhan Anda. Dan hosting mereka secara lokal mungkin cara yang tepat untuk pergi.
