Cara menggunakan Custom Font di Blogger

on   in  
Sering kali kita bingung memilih sebuah font yang bagus untuk blog kita, Namun Giliran kita sudah menemukan font yang bagus, eh ternyata banyak pembaca blog kita yang tak bisa melihat style font blog kita. Kenapa? Karena dalam aturan blogger, Font yang digunakan dalam html nya adalah kode font yang standart yang umum diinstal oleh banyak orang di komputer masing-masing seperti Georgia, Arial, Times new Roman, dll. Sehingga jika kita menggunakan kode font khusus seperti Book Antiqua, jokerman, dll, maka hanya akan bisa dilihat di Komputer yang sudah menginstal font tersebut di Cpanel-nya.

Lalu adakah cara untuk membuat font yang keren untuk blog kita namun tetap terlihat di semua komputer walaupun belum menginstal font-nya (Custom Font)? tentu saja ada. Salah satu cara untuk menggunakan custom font tersebut adalah dengan menggunakan Google API web font.

Untuk menggunakanya, pertama-tama kalian harus masuk ke halaman Google web Fonts terlebih dahulu, Lalu kalian pilih font mana yang mau dipakai. Jika sudah, Silahkan klik tulisan Add to Collection. Setelah itu, akan ada tiga pilihan, Yaitu Choose, Review, dan Use. Silahkan kalian pilih Use.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC37C8TZmPIZrvamdWBRICMDOEonYVbk2nSUY9gB__yEKr9VH5UTEigG1AxlVtok3667wKNsGL3aXCwB3m-CZUF99CGJxteXUAVDnNoXdofUUJDDuqGlwhkY9NcPjp56H1xe-zUPFt28o/s1600/1.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtV3V8sCp1cFXAUvhP9Ocn9WVG4WdOneViHwQbmpFriq1kMmPVWvVyF2tzO2XHKWritDTXioSefYV0mu0QK13PloiCIEfSnhGA3kdVMQK5AiciIPQ_g5N6OkgQZCUD99ynRTlkkWj3uGY/s1600/2.jpg

Maka kalian akan mendapatkan sebuah kode fonts.googleapis, Kode inilah yang nantinya akan kalian gunakan. Kurang lebih, kodenya seperti di bawah ini.

<link href='http://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>

Untuk menerapkan custom font, Kode fonts.googleapis di atas harus kalian letakkan persis di bawah kode <head> (lihat gambar), Namun sebelumnya potongan kode type='text/css'> harus diganti dengan type='text/css'/>

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicDtqhTPnmIjTYY1raMIK8BDlE3JUW_jm6DXrSV-CzYFl6MSrZXitp8p2QME8kCXxsZg2N8KEVTD14HJKHNmSbRuVYF_d99-t3moO2CjPwTWKbzz6ACUnzubutGjtc6qXhZIOj0VKuavs/s1600/3.jpg

Setelah itu, Kalian lihat kembali kode fonts.googleapis tadi, Disana ada tulisan Architects+Daughter, Kode inilah yang merupakan kode font custom font blog kalian. Silahkan kalian masukan kode font ini ke dalam template kalian (Tulisan Architets Daughter ditulis tanpa tanda +), Sehingga hasilnya akan seperti ini :

Sebelum = {font-family:Verdana;}
Sesudah = {font-family:Architects Daughter;}

Dan Lihatlah apa yang terjadi pada blog anda !
Share: