Sebelumnya sudah saya bahas tentang 15 Rekomendasi Font Google Terbaik. Sekarang mari kita lanjutkan mengenai bagaimana cara mendapatkan url gstatic yang nantinya akan kita pasang pada css blog/website.
Untuk mendapatkan sebuah font, terdapat tiga cara yang paling umum dilakukan, yaitu dengan metode <link> kemudian @import dan yang terakhir mengunduh file font yang dipilih secara keseluruhan.
Khusus untuk metode download. Penggunaanya sedikit berbeda, @font hasil unduhan hanya bisa kita install pada PC atau perangkat lain yang mendukung penggunaan font, formatnya adalah.ttf atau .otf. Mari kita fokus ke metode link dan @import saja.
pada metode link semua resource font termasuk css kita panggil mwnggunakan url yang disediakan masing - masing font. Cara ini mungkin efektif untuk meningkatkan waktu loading blog/web, tapi tampilan font mungkin akan sedikit mengalami jeda swbelum bisa menampilkan font yang kita maksudkan secara sempurna.
Sedangkan pada metode @import, tidak jauh berbeda dengan link Hanya saja kita menggunakan perintah CSS untuk meng-embed font dari layanan Google Fonts. Sebagai contoh, berikut perintah CSS untuk meng-import font dari Google font.
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap');
Metode penggunaan font yang baik
Mungkin timbul pertanyaan cara mana yang terbaik dalam menggunakan font, apakah dengan link atau @import?
Menurut saya secara pribadi, penggunaan masing - masing cara ini sesuai kebutuhan saja. Kalau untuk website mungkin saya memilih cara pertama, kalau untuk blog saya sendiri lebih memilih cara kedua atau @import.
Alasanya, supaya lebih praktis saja, dan memudahkan jika ingin berganti font dan juga pengeditan.
Cara Mendapatkan url @font-face gstatic di Google Fonts
Saya sendiri awalnya sempat kesulitan mendapatkan url @font-face gstatic Google font untuk bisa dipasang pada css Blog. Karena jarang sekali yang membahas tentang hal ini.
Untuk mendapatkan url @font-face dari Google font, caranya sangat mudah sekali seperti berikut ini :
1. Masuk ke situs Google Fonts
2. Cari font yang ingin digunakan
3. Tentukan jenis dan ketebalan font dengan klik + Select this style
4. Ganti <link> menjadi @Import.
hasil nya kurang lebih akan seperti ini
<style>
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap');
</style>
5. Salin URL pada bagian yang saya tandai
6. Paste url yang telah disalin pada alamat browser Kalian
https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap
Sehingga muncul seperti ini
/* cyrillic-ext */
@font-face {
font-family: 'Mulish';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/mulish/v10/1Ptyg83HX_SGhgqO0yLcmjzUAuWexRNR8aqvG549LTdlwA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Mulish';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/mulish/v10/1Ptyg83HX_SGhgqO0yLcmjzUAuWexRNR8aOvG549LTdlwA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Mulish';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/mulish/v10/1Ptyg83HX_SGhgqO0yLcmjzUAuWexRNR8aivG549LTdlwA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Mulish';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/mulish/v10/1Ptyg83HX_SGhgqO0yLcmjzUAuWexRNR8amvG549LTdlwA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Mulish';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/mulish/v10/1Ptyg83HX_SGhgqO0yLcmjzUAuWexRNR8aevG549LTc.woff2) format('woff2');
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;
}
7, Salin semua kode CSS yang muncul
8. Tempel kode CSS tersebut di atas ]]></b:skin>
9. Selesai.
Untuk menerapkan font tersebut di tulisan, Kalian hanya cukup memanggil berdasarkan nama dari font tersebut. Contohnya:
font-family: 'Mulish', sans-serif;
Ganti semua nama font lama dengan yang tebaru menggunakan shortcut CTRL + F agar lebih mudah.
Bolehkah Menggunakan Banyak Style Font Sekaligus ?
Jika diperhatikan, sebenarnya penggunakan layanan Google Fonts hanyalah link menuju CSS eksternal yang disediakan oleh Google. Oleh karena itu, bila Kalian menggunakan lebih dari 1 style font, maka gunakanlah style font yang benar-benar Kalian butuhkan. Jangan memilih style font terlalu banyak. Dikarenakan hal ini akan sangat berpengaruh pada waktu loading web Kalian. Akibatnya web Kalian akan terasa lama saat diakases.
Jadi, pikirkan dan lakukan analisa terlebih dahulu untuk style font apa saja yang akan Kalian gunakan.
Kesimpulan
Demikianlah tutorial cara menggunakan Google Fonts. Menggunakan font dari layanan Google Fonts dapat Kalian gunakan untuk memperindah tulisan di halaman web atau blog Kalian. Selamat mencoba dan semoga bermanfaat.