Tutorial Belajar CSS Part 15 – Cara Menggunakan Google Font dengan 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.

 

Video Tutorial – Menggunakan Google Font di CSS

 

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

Semisal dalam contoh ini anda memilih Chelsea Market, silahkan font yang diinginkan 

 

Lalu pilih Style font yang diinginkan

Lalu klik dibagian tombol disebelah kanan atas 

 

Maka akan menampilkan informasi dari style font itu, akan terdapat 2 tab yaitu : Review dan Embed

dibagian review ada tombol download Font

 

dibagian embed ada code untuk menggunakan font, menggunakan link ataupun import, untuk melihat code bagian link, bisa klik tab link

untuk melihat code bagian @import, bisa klik tab @import

Sehingga dari contoh diatas kita mendapatkan code untuk menggunakan google font dengan perintah link, dengan code dibawah ini :

 

Untuk menggunakan google font dengan perintah @import, dengan code dibawah ini :

 

dan untuk perintah CSS untuk penggunaan font family seperti dibawah ini :

 

 

 

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

 

One thought on “Tutorial Belajar CSS Part 15 – Cara Menggunakan Google Font dengan CSS

Leave a Reply

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