Pasang Font Unik di Blog dengan Google Fonts

Arif K Wijayanto
Kadang kita bosen juga sama font di blog kita yang itu-itu aja. Yah font standar yang umum lah, semacam Times New Roman, Arial, atau Helvetica. Trus kalo mau pakai font lain gimana? Biar lebih pas sama template/theme blog kita gitu...

Pakai Google Fonts!

Google Fonts adalah salah satu layanan yang disediakan Google untuk memudahkan web developer (atau juga blogger) untuk menghasilkan desain yang menarik dengan menyediakan font-font gratis. All free! Silakan cek di https://www.google.com/fonts.

Nah buat kamu yang suka ngoprek tampilan blog, mungkin ini berguna.
Trus gimana pakenya rif?


Gampang! Lebih gampang daripada mendaki Gunung Rinjani bersama mantan dan pacar barunya. Aih! *lalu dikeroyok barisan patah hati

Okeh pemirsah! Ini dia cara menggunakan Google Fonts di blog yang bisa turut serta dalam usaha-usaha memperindah blog kalian. Cekidot!


  1. Buka website Google Fonts
    Ini alamatnya:
    https://www.google.com/fonts

    Begitu terbuka, kamu akan langsung masuk ke menu pencarian font. Sampai dengan post ini dibikin, sudah ada 708 koleksi font disana. Nah monggo dicari font yang beneran kamu banget, yang sesuai jati diri kamu sesungguhnya.
  2. Klik Add to Collection

    Kalo udah nemu yang cocok, segera dilamar! klik tombol Add to Collection yang warna biru, di bawah setiap font. Maka font yang kamu pilih akan muncul di bawah, di collection. Yah mirip-mirip shopping cart kalo ente belanja online gitu lah. Masih kurang banyak? Mau cari pilihan lain? Mangga atuh kang dicari lagi. Kalo udah cukup, klik tombol Use
  3. Atur Penggunaan Font

    Setelah klik tombol Use, akan terbuka laman pengaturan untuk penggunaan font. Ada 4 opsi disana:
    1. Pilih jenis font.
    Mau cuma yang normal aja, atau perlu yang bold dan italic juga, atau variasi lain, silakan dipilih. Nah di opsi ini, perhatikan sesuatu yang mirip speedometer di pojok kanan atas. Gambar itu menunjukkan seberapa berat nanti font itu kalo dipakai. Angka disana menunjukkan ukuran dari beban load-nya. Misalnya 70, artinya ukurannya 70 kilobytes. Semakin kecil ukuran page load, semakin cihuy buat blog kamu.

    2. Pilih karakter-set.
    Kalo kamu mau bikin tulisan yang ada karakter "aneh-aneh" semisal huruf Jepang, silakan dipilih. Pilihan default-nya adalah Latin

    3. Pilih cara menghubungkan Google Fonts dengan blog kamu.

    Nah disini ada 3 cara: standar, @import, atau Javascript. Mau yang gaampang kan? Pake yang standar aja deh ya. Silakan copy code itu, buka laman dashboard blog kamu, lalu paste sebelum </head>.

    Perhatian! Kadang ada error begitu kita copy paste code ini. Supaya nggak error, silakan tambahkan backslash atau garis miring sebagai penutup tag pada ujungnya sebelum karakter >. Misalnya:
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed|Raleway:300' rel='stylesheet' type='text/css'/>

    4. Petunjuk cara penggunaan font dalam CSS.

    Nah yang ini cara menggunakan Google Fonts di blog kamu dengan CSS. Bisa dengan CSS secara umum yang code-nya kamu taro di tag <head>.../head>, yang nantinya bisa dipanggil dengan class atau id. Atau secara manual di tiap bagian di blog kamu. Misalnya:
    <p style="font-family: 'Roboto Condensed', sans-serif;">Gue ganteng loh!</p>

Gimana? Gampang kan yah?

Google Fonts ini biasanya emang dipake para perancang web, karena emang gampang pakenya. Yang perlu diperhatikan, jangan sampe penggunaan Google Fonts terlalu banyak. Karena akan memperberat load blog kamu. So, sewajarnya aja yah.

Saya sendiri pake Google Fonts ini untuk huruf di speech bubble si monyet temen saya ngeblog, ini dia nih:
Halllooo kakaak!


Semoga berguna yah!
Tags
Reactions
Arif K Wijayanto

Posted by Arif K Wijayanto

Certified remote pilot | interested in research related to geoinformatics, WebGIS, and UAV/drone | research student at Center for Environmental Remote Sensing (CEReS), Chiba University, Japan

Post a Comment

9 Comments

  1. innnayahSun Jan 10, 04:57:00 PM

    beraaattt di blog

    ReplyDelete
  2. baseloTue Jan 12, 11:06:00 AM

    Boleh juga nih.

    btw kalo font pihak ketiga bisa nggak? kayak dari dafont gitu?

    ReplyDelete
    Replies
    1. Arif K WijayantoTue Jan 12, 11:32:00 AM

      Bisa aja mas. Tapi kudu diunduh dulu, trus diunggah (upload) lagi ke hosting mas. Nanti pake CSS3 @fontface. Selengkapnya:
      http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

      Delete
  3. nindaTue Jan 12, 03:08:00 PM

    saya barusan tahu adanya gugel fonts ini... tapi kayaknya fontnya kok semua udah tersedia ya di template standar blogger?

    ReplyDelete
    Replies
    1. Arif K WijayantoTue Jan 12, 05:00:00 PM

      Kalo yang pake template bawaan blogger sih emang bisa mbak. Tinggal customize. Lumayan banyak juga koleksinya, tapi kyknya nggak sampe 708 deh. Nah kalo pake template custom kyk saya ini nggak bisa :)

      Delete
  4. isnuansaSat Jan 16, 10:22:00 PM

    Ish, sepertinya cakep-cakep ya font-nya. Tapi sementara lagi males nguplek, jadi ya pakai yang ada dulu, Bang. :)

    ReplyDelete
    Replies
    1. Arif K WijayantoMon Jan 18, 10:44:00 AM

      Hihi.. iya mbak. Boleh dicoba di lain kesempatan :)

      Delete
  5. malangMon Aug 26, 10:30:00 AM

    gua puyeng lihatnya, pgen sih pgen biar fontnya bisa sesuai keinginan. Tp gua edit2..ngga bisa2..hehehe. susah jg ternyata.

    ReplyDelete

Dear teman. Silakan berkomentar. Tapi khusus untuk post yang telah terbit > 7 hari, mohon maaf komentar kamu nggak langsung muncul, karena harus dimoderasi. Trims