Mengganti Fonts Dengan Menggunakan Fonts Google

Cara menggunakan Fonts Google untuk mengganti atau menambah font yang ada untuk mempercantik tampilan weblog blogger

Mengganti Fonts Dengan Menggunakan Fonts Google

Mengganti Fonts Dengan Menggunakan Fonts Google - Ini merupakan hanya sebuah update dari tulisan sebelumnya mengenai cara menggunakan font dari google font, walupun pada dasarnya sama cara penggunaannya, dalam hal ini karena situs font google berubah yang dulunya http://google.com/webfont yang sekarang di redirect menjadi https://fonts.google.com.

Secara tampilan antar muka webfont tersebut ada perubahan tampilan sehingga bagi kalian yang baru menggunakan atau sudah pernah menggunakan fonts google dari webfont mungkin agak sedikit binggung, disini saya akan memberikan sedikit gambaran yang mungkin bisa membantu kalian dalam menggunakan fonts google tersebut.

Font Google

Dalam hal ini karena saya menggunakan blogspot dari google, maka penjelasan ini mengkhususkan bagi mereka yang menggunakan blogger dari blogspot google.

Menggunakan Font Google

  • Pertama masuk pada situs font google melalui https://fonts.google.com, pada halaman tersebut disuguhkan berbagai jenis dan bentuk font, kalian pilih salah satu jenis font yang akan dipergunakan.
  • Setelah memilih salah satu jenis font yang akan dipergunkan, arahkan pandangan pada pojok kanan atas, disitu ada tombol pilihan +Select This Font, klik tombol tersebut.
  • Setelah mengkilik tombol +Select This Font, arahkan pandangan pada kanan bawah layar, klik kotak dialog Family Selected.

Kotak dialog tersebut memberikan link font yang terpilih untuk dipergunakan pada weblog, seperti ini contoh link font terpilih tersebut:

<link href="https://fonts.googleapis.com/css?family=Mogra" rel="stylesheet"/>

Letakan kode link tersebut dibawah <head> dan save template kalian.

Dalam kotak dialog tersebut memberikan keterangan kecepatan loading dari link fonts yang dipilih, jadi pilihlah fonts yang cocok untuk dipergunakan dan cepat loadingnya supaya tidak mengganggu kecepatan loading weblog.

Penggunaan Font Google Dalam CSS

Dalam kotak dialog tersebut sudah disebutkan font family yang bisa kita pergunakan dalam css, seperti contoh yang saya ambil adalah font-family: 'Mogra', cursive;

contoh penggunaan dalam css seperti ini:

.fontgoogle, #fontgoogle {
     font-family: 'Mogra', cursive;
     ...
     css lainnya
     ...
}

Mudah bukan cara menggunakan font google tersebut, selain font dari google, kalian bisa menggunakan font yang berupa ikon dari font awesome yang bisa untuk mengganti ikon-ikon berupa gambar dengan ikok-ikon berupa karakter.




Semoga tips menggunakan fonts google dan font awesome bisa membantu dalam mengganti font-font yang biasa dipergunakan sehingga bisa berbeda dengan font yang dipergunakan weblog pada umumnya dan tentunya tampilan weblog pun lebih cantik dan bagus, terima kasih semoga bermanfaat.

No comments:

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin