Tutorial Belajar CSS: Cara Menggunakan Google Font dengan CSS

Posted on

Apabila pada panduan belajar CSS sebelumnya kita menggunakan perintah @font-face untuk dapat menggunakan font external, terdapat cara yang lebih gampang dan sering digunakan oleh banyak web developer ketika ini, yakni menggunakan font yang disediakan dari Google Font. Pada panduan kali ini kita akan membahas Cara Menggunakan Google Font dengan CSS.


Mengenal Google Font

Google Font ialah diantara layanan yang disediakan Google bagi mempermudah web developer pada menghasilkan desain yang menarik dengan meyediakan font-font cuma-cuma. Fitur ini dapat kamu akses di domisili: https://www.google.com/fonts.

Dikala panduan ini ditulis, Google font menyediakan lebih dari 640 jenis font.

Perlu menjadi catatan bahwa bila kamu menggunakan google font, karenanya font hanya tampil ketika halaman HTML terkoneksi dengan internet. Apabila kamu mengerjakan kewajiban/proyek yang akan ditampilkan secara offline, sebaiknya menggunakan font external dengan petunjuk @font-face yang telah kita pelajari pada panduan Cara Menggunakan Font External dengan CSS (@font-face).


Panduan Memilih Font dari Google Font

Bagi dapat menggunakan font yang disediakan oleh google, langkah pertama-tama ialah memilih font yang akan digunakan. Silahkan buka situs Google Font di domisili: https://www.google.com/fonts.

 Di pada halaman awal, kamu akan seketika berhadapan dengan fitur pencarian font. Silahkan mencoba-coba fitur pencarian yang terdapat dan melihat-lihat kategori font yang terdapat.

Apabila telah menemukan font yang diiginkan, klik tombol “Add to Collection” di font tersebut. Google akan menyimpan sementara font tersebut (mirip fitur cart di situs online shopping). Sahabat boleh mencari font lain atau seketika menggunakan font tersebut. Pada panduan ini saya memilih bagi menggunakan 2 jenis font, yaitu Open-Sans dan Lobster.

Setelah kamu memilih satu atau dua (atau 10) font, kemudian klik tombol “Use” yang berada di pojok kanan bawah. Jendela web akan beralih menjadi gambar berikut:

Di pada jendela ini kamu akan menemunkan 4 opsi bagi mengatur cara pemakaian font.

Opsi pertama-tama ialah memilih jenis-jenis huruf bagi font. Apakah font yang kamu ingin gunakan melingkupi tulisan tebal (bold), miring (italic), atau keduanya (bold dan italic).

Opsi ke-dua ialah memilih karakter-set. Apabila kamu tak merancang web yang akan menggunakan huruf china atau jepang, biarkan alternatif ini sesuai dengan defaultnya (latin).

Opsi ke-tiga ialah memilih cara ‘menghubungkan’ Google font dengan halaman HTML kita. Google menyediakan 3 cara, yakni dengan menggunakan tag <link>, petunjuk CSS @import, dan dengan JavaScript. Ketiga cara
ini relatif tak terlalu berbeda dari cara penggunaanya. Sahabat tinggal copy paste kode tersebut ke halaman HTML. Bagi kali ini, saya akan menggunakan cara dengan tag <link>. Silahkan copy kode tersebut ke pada bagian <head> HTML.

Opsi ke-empat ialah pedoman cara pemakaian font tersebut di pada CSS. Sahabat dapat melihat bahwa kita tinggal menggunakan property font-family dengan nama font yang telah disediakan oleh google.

Hingga disini, kita telah dapat seketika menggunakan font tersebut.


Panduan Cara Menggunakan Google Font

Setelah memilih jenis font dan cara yang akan digunakan, karenanya kita akan seketika mencobanya dengan kode CSS. Berikut ialah kode HTML dan CSS yang saya gunakan:

 Apabila kamu telah mempelajari 2 panduan font CSS sebelumnya, mengenai font-family dan @font-face, karenanya kode CSS tersebut dapat dengan gampang dimengerti.

Kode <link href=’http://fonts.googleapis.com/css?family=Lobster|Open+Sans’ rel=’stylesheet’ type=’text/css’> hakekatnya ialah link menuju CSS external yang disediakan oleh google. Kita tak perlu mengutak-atik link ini.

Bagi menggunakan font tersebut, kita tinggal memanggil property font-family dengan nama font yang telah disediakan oleh google.

Menggunakan font dari Google sering digunakan selaku cara bagi memperindah tampilan blog dengan menggunakan jenis tulisan yang unik dan gampang dibaca. Situs duniailkom ini pun menggunakan font ‘Open-Sans’ yang disediakan oleh Google Font.


eBook CSS Uncover Duniailkom

Apabila kamu ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/