Minggu, 10 Januari 2016

Pasang Font Unik di Blog dengan Google Fonts

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!

Ada yang lebih seru loh!

Pasang Font Unik di Blog dengan Google Fonts
4/ 5
Oleh

Berlangganan

Suka dengan cerita di atas? Silakan berlangganan gratis via email

8 Comments

Sen Jan 11, 12:13:00 PM delete

Nggak juga kok mbak. Asalkan sewajarnya

Reply
avatar
Sel Jan 12, 11:06:00 AM delete

Boleh juga nih.

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

Reply
avatar
Sel Jan 12, 11:32:00 AM delete

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

Reply
avatar
Sel Jan 12, 03:08:00 PM delete

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

Reply
avatar
Sel Jan 12, 05:00:00 PM delete

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 :)

Reply
avatar
Sab Jan 16, 10:22:00 PM delete

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

Reply
avatar
Sen Jan 18, 10:44:00 AM delete

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

Reply
avatar

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