Selamat datang di web TulisanIB. Kali ini penulis ingin menjelaskan tutorial bagaimana caranya memasang font yang ada di Google Fonts ke blog atau website kita. Penulis pada tutorial ini menggunakan blog yang menggunakan platform Blogspot alias Blogger.com, jadi bagi yang platformnya berbeda silahkan menyesuaikan ya.
Google Fonts adalah sebuah website yang menyimpan banyak sekali font-font yang bisa kita gunakan dan bisa kita download alias unduh secara gratis alias free.
Untuk font yang premium alias berbayar sepertinya tidak ada di Google Fonts, karena penulis sendiri pernah mencari font Arial di Google Fonts tetapi tidak ada dan yang muncul malah font arial yang versi lainnya bukan yang penulis cari atau penulis maksud.
Font Helvetica juga tidak ada di Google Fonts, jadi bagi yang ingin mencari alternatif dari font Helvetica bisa menggunakan font Roboto atau Libre Franklin yang ada di Google Fonts karena hampir mirip gaya penulisannya.
Di Google Fonts ternyata juga ada lho untuk font tulisan arab (Huruf Hijaiyah). Font untuk tulisan arab (Huruf Hijaiyah) yang ada di Google Fonts diantaranya adalah Cairo, Tajawal, Amiri, Scheherazade, Lateef, dan masih ada yang lainnya.
Bagi yang mau menginstall atau memasang font arab di blog atau website kalian bisa membaca tutorial di artikel saya yang berjudul "Cara Pasang Font Huruf Arab di Blog Blogspot (Blogger.com)", sudah saya jelaskan di artikel tersebut.
Google Fonts ini tentu sangat bermanfaat sekali untuk blog yang menggunakan cms atau platform Blogspot atau Blogger.com, karena di Blogspot kita tidak bisa melakukan upload file font ke root blog atau website.
Jadi harus menggunakan layanan hosting atau cloud storage pihak ketiga, dan Google Fonts ini layanan penyedia font yang bisa dimanfaatkan karena font-font tersebut telah dihosting oleh pihak Google sendiri di Google Fonts.
TulisanIB pun dulu menggunakan Google Fonts, sekarang sudah tidak lagi.
Tutorial ini penulis praktikkan di bulan November tahun 2020, jadi mungkin akan berbeda diwaktu-waktu yang akan datang dan semoga saja tidak, jadi jika berbeda silahkan menyesuaikan ya.
Baiklah, langsung saja berikut ini tutorialnya, silahkan simak baik-baik dengan seksama ya.
- Pertama buka website Google Fonts terlebih dahulu di link berikut:
https://fonts.google.com
- Jika ingin mencari sebuah font silahkan ketik nama font yang ingin dicari di kotak pencarian yang telah disediakan yang berada tepat di bawah logo tulisan Google Fonts, lalu tekan tombol Enter pada keyboard, maka nanti akan ditampilkan hasil pencariannya. Jika tidak ingin melakukan pencarian font, abaikan langkah nomor 2 ini dan lanjut ke langkah nomor 3.
- Jika ingin mencari font untuk bahasa tertentu silahkan klik tombol dropdown yang bertuliskan Language. Jika tidak ingin mencari font berdasarkan bahasa tertentu, abaikan langkah nomor 3 ini sampai nomor 5 dan lanjut ke langkah nomor 6.
- Maka akan muncul bermacam-macam bahasa. Di sini sebagai contoh saya memilih Arabic untuk memunculkan font yang memang didesain atau dibuat untuk tulisan berbahasa Arab (Huruf Hijaiyah).
- Maka akan muncul bermacam-macam font yang didesain dan dibuat bisa untuk menuliskan tulisan berbahasa Arab.
- Jika ingin contoh preview sebuah kata atau kalimat di setiap font-font yang berada di Google Fonts, kalian bisa menuliskan contoh tulisannya di kotak yang bertuliskan Type something. Jika tidak ingin melakukan contoh preview, abaikan langkah nomor 6 ini dan langkah nomor 7, langsung lanjut saja ke langkah nomor 8.
- Di sini contohnya penulis tuliskan kata-kata "Yuk, baca artikel di web TulisanIB. Tulisan Ilmu Bermanfaat (TIB)" maka akan dipreviewkan di tiap-tiap font, seperti pada gambar nomor 8 di bawah.
- Sekarang silahkan kalian pilih font yang cocok atau kalian inginkan untuk diinstall atau dipasang di blog atau website kalian, di sini saya memilih font Roboto. Klik pada kotak salah satu font yang kamu inginkan.
- Sampai di sini, kamu bisa mendownload font tersebut. Bagi yang ingin mendownload font tersebut silahkan klik pada tombol Download family untuk mendownload font tersebut. Jika tidak ingin mendownload font tersebut, abaikan langkah nomor 9 ini dan nomor 10, langsung lanjut saja ke langkah nomor 11.
- Tunggu sampai proses pengunduhan selesai, maka file font tersebut sudah tersimpan di perangkat kita dengan nama font yang kita pilih tersebut (biasanya di folder Download atau Unduhan, kalau tidak ada cari saja di tempat atau folder lain).
- Baiklah, saatnya kita menginstall atau memasang font ini di blog kita. Klik pada tulisan Select this style yang paling atas.
- Akan muncul bilah kotak persegi panjang di sebelah kanan. Jika tidak muncul kotaknya silahkan klik icon kotak-kotak tiga di sebelah kanannya tombol Download family.
- Copy kode yang saya beri keterangan angka 1 pada gambar di bawah.
- Sekarang buka source code blog atau website kalian di tab baru pada browser kalian. Kalau kalian menggunakan platform blog atau website Blogspot atau Blogger.com, silahkan masuk ke dashboard blog atau website kalian di web Blogger.com terlebih dahulu di link berikut:
https://www.blogger.com
Blogger.com menampilkan gambar makhluk bernyawa di dalam web-nya. Bagi kalian yang ingin menghilangkan gambar pada website tetapi belum tahu caranya, kalian bisa baca artikel saya yang berjudul "Cara Mematikan Gambar Pada Browser dan Browsing di Internet Tanpa Menampilkan Gambar" untuk mengetahui caranya menghilangkan gambar pada browser.
- Lalu masuk ke menu "Tema".
- Klik pada icon anak panah mengarah ke bawah yang berada di sebelah kanan tulisan "SESUAIKAN" pada tombol berwarna orange.
- Akan muncul menu-menu. Kalau kalian ingin mencadangkan (backup) template kalian sebelum diedit, silahkan klik pada menu "Cadangkan", tidak juga tidak mengapa. Lalu silahkan klik pada menu "Edit HTML" untuk masuk ke source code template blog atau website Blogspot atau Blogger.com kalian.
- Lalu silahkan cari kode </body> atau <head> atau </head> (pilih salah satu), tekan Ctrl + F pada keyboard untuk memunculkan kotak pencarian.
- Lalu paste kode yang saya beri keterangan angka 1 di langkah nomor 13 tadi tepat di atasnya kode </body> (direkomendasikan), atau boleh juga diantara tag <head> sampai </head>, atau boleh juga tepat di bawahnya kode <head>, atau boleh juga tepat di atasnya kode </head>, pilih salah satu.
Nomor 20 ini hanya khusus bagi kalian yang memilih menaruh kode yang saya beri keterangan angka 1 di langkah nomor 13 tadi di atasnya kode </body>.
Hapus kode berikut yang berada di kode keterangan 1 di langkah nomor 13 tadi.
Bagi kalian yang memilih menaruh kode yang saya beri keterangan angka 1 tersebut diantara tag <head> sampai </head>, atau tepat di bawahnya kode <head>, atau tepat di atasnya kode </head>, silahkan abaikan atau lewati langkah nomor 20 ini dan langsung lanjut saja ke langkah nomor 21.
Lalu copy kode berikut di atas, lalu paste di tag <head>. Boleh tepat di bawahnya kode <head>, di tengah-tengahnya atau di dalamnya, atau tepat di atasnya kode </head>. Ini dilakukan agar kecepatan web kalian bisa lebih optimal.<link rel="preconnect" href="https://fonts.gstatic.com">
Apabila kalian memasang script anti jingling dan auto visitor pada blog atau website kalian, silahkan paste kode di atas tadi tepat di atasnya kode script anti jingling dan auto visitor.- Lalu beri "/" tanpa tanda petik di akhir dua kode tersebut sebelum kurung penutup dan hapus tulisan di link sebelah kanannya nama font sampai sebelah kirinya &display=swap (bila ada).
Contohnya seperti ini, sebelum:
Sesudah:<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet"><link href='//fonts.gstatic.com' rel='preconnect'/><link href='https://fonts.googleapis.com/css2?family=Roboto&display=swap' rel='stylesheet'/> - Copy kode di bawah ini.
<link href='//fonts.gstatic.com' rel='dns-prefetch'/> - Lalu silahkan cari kode <head> atau </head>, tekan Ctrl + F pada keyboard untuk memunculkan kotak pencarian.
- Lalu paste kode di langkah nomor 22 tadi di antara tag <head> sampai </head> agar tidak terjadi DNS Lookups. Ditaruh dimanapun boleh, bebas asalkan masih di dalam lingkup tag <head>, boleh tepat di bawahnya kode <head>, di tengah-tengah atau di dalamnya tag <head>, atau tepat di atasnya kode </head>, atau boleh juga di samping atau di sebelahnya kode berikut:
<link rel="preconnect" href="https://fonts.gstatic.com"/> - Sekarang silahkan kalian copy kode yang saya beri keterangan angka 2 pada gambar nomor 13 di atas tadi.
- Lalu silahkan cari body yang berada di dalam lingkup tag <b:skin> atau <style>. Tekan Ctrl + F pada keyboard untuk memunculkan kotak pencarian.
- Lalu paste kode yang saya beri keterangan angka 2 pada gambar nomor 13 di atas pada property font di dalam selector body tersebut. Contoh seperti ini:
body{font:normal normal 15px 'Roboto',Arial,Tahoma,Helvetica,FreeSans,sans-serif;} - Atau boleh juga ditaruh di class tertentu, misal mau di class "ratakari", maka penulisannya seperti ini:
.ratakari{font-family:'Roboto',sans-serif} - Lalu kalian save dengan cara mengeklik icon bergambar disket atau kartu memori di kanan atas.
- Apabila muncul kotak yang bertuliskan "org.xml.sax.SAXParseException; lineNumber: nomor urutan menurun kode yang selah; columnNumber: nomor urutan mendatar kode yang salah; The reference to entity "display" must end with the ';' delimiter.".
Silahkan tambahkan "amp;" di samping kanannya "&" pada link di atribut href di kode yang saya beri keterangan angka 1 di langkah nomor 13 tadi.
Berikut contohnya, sebelum:
Sehingga menjadi seperti ini:https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swaphttps://fonts.googleapis.com/css2?family=Roboto&display=swap - Lalu kalian save lagi dengan cara mengeklik icon bergambar disket atau kartu memori di kanan atas.
- Apabila muncul kotak persegi panjang berwarna hitam bertuliskan "Update berhasil." itu berarti kode tadi telah berhasil disimpan.
- Selesai. Coba sekarang dilihat dulu blognya. Otomatis font telah terinstall atau terpasang di blog kita.
Sekian tutorial Cara Pasang Font Google Fonts di Blog Blogspot (Blogger.com) di artikel ini. Apabila kurang jelas silahkan diulangi lagi membacanya.
Semoga artikel ini bermanfaat untuk kita semua dan terutama teruntuk bagi yang sedang membutuhkan. Artikel tentang blogger lainnya: "Alat Pengujian Data Terstruktur Milik Google Apakah Akan Ditutup?".