Tutorial Belajar CSS Part 15 – Cara Menggunakan Google Font dengan CSS

Posted on Posted in Tutorial CSS

Dalam tutorial ini kita masih membahas mengenai manipulasi font dengan CSS, yaitu cara menggunakan Google Font dengan CSS, Google menyediakan font yang bisa anda gunakan untuk tampilan text di web yang anda buat.

 

Mengenal Google Font

Pada saat tutorial ini dibuat google menyediakan 818 font yang bisa anda gunakan, Google Font menyediakan 2 cara untuk penggunaan font yang mereka sediakan, anda bisa langsung bisa menggunakan link secara online, ataupun menggunakan mode external, yaitu dengan menggunakan perintah @font-face, kedua cara tersebut akan dibahas pada tutorial ini.

Cara untuk menggunakan Google Font ini adalah sebagai berikut :

silahkan anda mengakses alamat : https://www.google.com/fonts

Gambar diatas adalah gambar dari web google font

  • pada bagian sebelah kanan terdapat fitur pencarian untuk mencari jenis font secara spesifik,
  • pada bagian sebelah kiri terdapat jenis font yang bisa anda gunakan

Semisal dalam contoh ini anda memilih Bungee Inline dan Indie Flower, silahkan klik tombol +

Dalam contoh ini saya memilih 2 font saja, anda bisa memilih lebih dari 2 font, anda cukup tombol + pada bagian setiap font, setelah selesai memilih anda bisa klik dibagian menu dibagian bawah.

maka akan tampil menu seperti gambar berikut, terdapat 2 tab embed, dan customize

 

 

Tab Embed

tab embed  berisi beberapa cara untuk menggunakan font ini untuk digunakan di HTML, terdapat beberapa cara antara lain :

  • cara standart menggunakan tag <link>

  • cara berikutnya menggunakan perintah import pada css

kedua cara tersebut akan kita berikan contoh pada bagian bawah tutorial ini.

 

Tab Customize

Tab Customize berisi beberapa fitur yang bisa anda set untuk tampilan fontnya.

silahkan centang kedua font jika memang ingin effect yang diberikan kan berpengaruh pada kedua font, pada bagian Languages digunakan untuk mengaktifkan tampilan font ketika web anda menggunakan bahasa latin extended dan vietname, jika anda hanya menggunakan bahasa latin untuk web anda, anda cukup menggunakan mencentang bagian Latin saja.

 

Download Font menggunakan perintah font external

Selain kedua cara menggunakan tag <link> dan perintah @import, anda juga dapat menggunakan font dengan menggunakan cara font external dengan perintah @font-face, anda dapat mendownload font yang ingin anda gunakan, dengan cara klik tombol download.

maka anda akan mendapatkan file font tersebut dengan format .zip

pada masing – masing font terdapat file font dengan jenis file extention .ttf

sampai disini anda sudah paham mengenai bagaimana menu yang ada dalam google font, berikutnya kita akan membahas bagaimana cara menggunakan google font di halaman HTML dengan menggunakan CSS.

 

Cara menggunakan Google Font dengan CSS

Anda dapat menggunakan beberapa cara untuk menggunakan Google Font dengan menggunakan CSS, Adapun beberapa caranya sebagai berikut :

Menggunakan tag <link>

anda cukup menambahkan skrip menggunakan tag <link>

sesuai yang kita dapatkan di google font.

lalu gunakan font-family, seperti yang dituliskan di google font.

 

Menggunakan perintah @import

skripnya hampir sama dengan menggunakan tag <link>, hanya kita menggunakan perintah @import seperti yang tertulis di google font

 

Menggunakan font external dengan perintah @font-face

anda cukup menggunakan perintah @font-face untuk mendeklarasikan file font yang akan digunakan, untuk detail tutorial font external dibahas di tutorial cara menggunakan font external dengan css

Dari beberapa cara tersebut, silahkan pilih cara yang menurut anda sesuai, sebagai catatan untuk cara pertama menggunakan tag <link> dan cara kedua menggunakan perintah @import anda harus terkoneksi dengan internet, tetapi untuk cara ketiga yang menggunakan mode external anda tidak perlu menggunakan koneksi internet.

hasil dari penggunaan skrip diatas adalah seperti berikut ini :

jadi kurang lebih seperti itu bagaimana cara menggunakan google font untuk merubah jenis font pada halaman html menggunakan CSS, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di tutorial warung belajar selanjutnya yang masih membahas mengenai CSS

 

Leave a Reply

Your email address will not be published. Required fields are marked *