Mengganti Font Blog dengan Google Web Fonts

Cara untuk merubah font di blogspot dengan Google Webfonts

Masuk ke google font (http://google.com/webfonts), disini saya akan mengambil contoh font yang akan saya gunakan dalam desain, yaitu :

Untuk Header ( Sacramento )

Untuk Post Body ( Muli )

Untuk Post Title ( Julius Sans One )

Untuk Judul Widget (ABeeZee)

Silahkan bereksplorasi sepuas-puasnya dengan memilih banyaknya font yang dimiliki oleh google webfonts dengan memfilter kategori font seperti Serif, Sans-serif, Display, Handwriting atau juga berdasarkan script yaitu tulisan khusus yang dimiliki suatu negara seperti vietnam, greek/yunani dan lain-lain.

Kumpulkan font satu persatu, dengan cara search di box yang terdapat di bawah jumlah family, kemudian klik add to collection. Ulangi tahap ini sampai menemukan 4 font yang sudah disiapkan. Penggunaan font terlalu banyak akan membuat load blog/halaman menjadi berat, maka gunakan 2-4 fonts maksimal agar tidak terlalu lama font keluar.

Setelah semua terkumpul, klik USE untuk mulai menggunakan font yang kita pilih

Kemudian halaman akan dibawa ke setting font dan cara penggunaan font di website. Bagian halaman setting ini terbagi 4, yaitu :

Bagian 1 : berisi nama-nama font yang sudah kita pilih. Untuk menggunakan sesuai ketebalan, jenis (normal/italic) silahkan centang sesuai keperluan. Centanglah sesuai screencshot saya dibawah ini :

Bagian 2 : berisi set karakter yang ingin dipakai. Karakter set ini maksudnya adalah efek-efek terhadap font dimana kita tidak menggunakan sehingga gunakanlah Latin (sudah default).

Bagian 3 : berisi kode-kode yang harus disematkan di “kepala” / head dari sebuah website. Terdiri dari 3 tab yaitu Standard, @import dan Javascript

Bagian 4 : Merupakan kode css font yang kita gunakan untuk mengganti font yang sudah ada. Font family terdiri dari beberapa font, yang artinya jika server google sedang down, atau internet sedang lambat maka font yang dibelakang akan digunakan sebagai pengganti. Misalnya font-family sacramento akan di ganti (sementara) cursive apabila sacramento belum bisa ter-load dengan baik dikarenakan jaringan internet atau server. Jadi jangan khawatir blog tidak mempunyai font hehehe. Font pengganti ini adalah font standar yang bisa dibaca oleh semua browser dan cepat di load.

Untuk menyematkan font di blogspot gunakan pilihan Javascript, sedangkan untuk wordpress gunakan import font.

Cara menyematkan font yang sudah dipilih adalah sebagai berikut :

Copy kode yang ada pada tab Javascript :

Setelah copy, bisa di paste di notepad terlebih dahulu atau langsung di paste ke kode HTML Template.

Langkah berikutnya adalah paste di HTML template, caranya adalah :

Kembali ke dashboard -> pilih blog -> template -> edit HTML

Berikutnya Paste kode tersebut di bawah tag <head> , head berada di bagian atas baris ke – 6 kemudian simpan template (kotak oranye)

Setelah di save maka halaman akan kembali ke halaman template, kemudian klik sesuaikan untuk menambahkan kode CSS Font.

Sampailah kita pada perancang template blogger. Untuk mengganti css kode dipasang melalui tingkat lanjut -> tambahkan css (terletak di bagian paling bawah)

Masukkan data-data css seperti contoh berikut :

FaceBlog Trik

Menu

Tombol Atas

Navbar Bawah

Friday, 18 October 2013