Oke, sekarang kita mulai ya. Saya sudah membuka kode dari pelajaran sebelumnya. Kita telah belajar mengenai cara mengatur font dengan menggunakan properti font-family. Selanjutnya kita akan belajar mengenai cara mengatur font dengan menggunakan Google Font.

Untuk mengakses Google Font, kita bisa membuka tab baru pada browser dan ketik URL fonts.google.com. Kemudian kita bisa melihat daftar font yang bisa kita gunakan dari Google Font. Pada saat video ini dibuat, jumlah total font adalah 1.021. Jumlah ini masih terus meningkat, karena Google Font secara rutin menambahkan font baru.

Pada setiap font, kita bisa melihat nama font, nama pembuat font, dan kemudian ada satu buah kalimat yang menggunakan font tersebut. Kalimat disini menggunakan bahasa Inggris. Kita bisa menggantinya dengan kalimat kita sendiri, misalkan kita ingin contoh menggunakan Bahasa Indonesia. Kita bisa ketikan kalimat kita sendiri pada kotak disebelah kanan tulisan Sentence. Misalkan saya ketik “Kita coba mengetikkan contoh dengan menggunakan Bahasa Indonesia”. Maka kalimat contoh font akan berubah menjadi kalimat yang saya ketik barusan.

Sebagai alternatif lain, kita juga bisa melihat contoh font dengan menggunakan huruf alfabet. Atau dengan menggunakan paragraf. Atau dengan menggunakan angka saja.

Di bagian kanannya lagi, kita bisa mengatur ukuran dari font pada contoh. Misalkan kita hendak melihat font dengan ukuran lebih besar, ataupun melihat font dengan ukuran yang lebih kecil.

Selanjutnya kita bisa menemukan pilihan Categories, yang berisi 5 kategori dari Google Font. Kategori disini masih mirip dengan kategori yang telah kita pelajari pada video sebelumnya. Kategori pertama adalah Serif, kita bisa lihat pada huruf a l dan m bahwa pada bagian bawah hurufnya terdapat serif. Kategori font serif ini cocok untuk digunakan pada header.

Kategori kedua ada sans-serif. Font pada kategori ini bersifat sederhana dan mudah untuk dibaca. Font sans-serif paling disarankan untuk digunakan pada seluruh konten kita.

Kategori ketiga adalah display. Bentuk font ini bersifat eye-catchy, sehingga akan mengundang perhatian pengunjung kita. Cocok untuk digunakan pada keterangan gambar, atau untuk memberikan fokus pada bagian tertentu dari konten kita.

Kategori keempat adalah handwriting. Font ini akan memberikan kesan seolah-olah konten ditulis menggunakan tulisan tangan.

Dan kategori terakhir adalah monospace, dimana semua huruf memiliki lebar yang sama. Font jenis ini biasanya digunakan untuk menampilkan source code pada konten kita.

Nah, selanjutnya ada bahasa-bahasa lain yang tidak menggunakan alfabet seperti yang digunakan oleh bahasa Inggris ataupun bahasa Indonesia. Oleh karena itu, mereka memerlukan font khusus untuk menuliskan kontennya. Kita bisa memilih font tersebut dari pilihan Language yang berada disebelah kanan Categories. Misalkan kita bisa memilih bahasa Arabic. Bisa dilihat disini bahwa Google Font menyediakan 21 jenis font yang mendukung bahasa Arabic. Dan kita juga bisa memilih font untuk bahasa-bahasa lainnya dari pilihan Language.

Pada bagian paling kanan dan bawah dari navigasi Google Font, kita bisa menemukan Sort By untuk mengurutkan tampilan Font. Secara default Google Font akan menampilkan jenis Font yang sedang trending terlebih dahulu. Kita bisa menggantinya menjadi Popular untuk melihat jenis Font yang paling banyak digunakan di sepanjang waktu. Atau kita bisa mengurutkan agar font yang paling baru ditampilkan terlebih dahulu. Dan yang terakhir kita bisa mengurutkan font berdasarkan namanya.

Dari pilihan ini, kita bisa melihat bahwa pada saat ini font yang paling banyak digunakan berdasarkan trending dan popular adalah Roboto. Kita akan mencoba untuk menggunakan Roboto pada konten kita. Pertama kita klik dahulu nama font Roboto.

Selanjutnya kita bisa melihat beberapa style yang didukung oleh font Roboto. Kebetulan font Roboto mendukung font-weight dari 100 hingga 900. Namun kita tidak perlu mengambil semua font-weight yang ada ya, kita cukup memilih yang kita butuhkan saja dengan cara menekan tulisan +Select this style pada bagian kanannya. Sebagai contoh disini saya akan mengambil font-weight 100 (thin), dan 400 (regular)).

Untuk menggunakan font pada kode kita, pada sebelah kanan kita sudah diberikan kode link yang bisa kita copy dan paste ke halaman HTML kita. Kode link ini akan meminta browser untuk mengunduh font Roboto sehingga bisa kita gunakan untuk menampilkan konten kita.

Dibawah kode link, kita juga diberikan kode CSS untuk mengatur font-family menjadi Roboto.

Pertama kita ambil dahulu seluruh kode link yang diberikan oleh Google Font. Kita copy ke kode HTML kita di dalam tag head.

Selanjutnya kita buka kode CSS, dan kita ubah bagian body agar menggunakan font-family Roboto, tambahkan alternatif lainnya adalah sans-serif. Kita lihat hasilnya pada browser. Nah sekarang seluruh isi paragraf sudah berubah menggunakan font Roboto. Namun untuk judulnya belum ya, karena bisa kita lihat pada kode css bahwa judul menggunakan font Lucida Bright.

Kita coba tambahkan font-weight dengan nilai 100 agar tulisannya menjadi tipis. Bisa kita lihat pada browser bahwa font Roboto yang sedang digunakan menjadi sangat tipis ya. Selanjutnya kita coba ganti nilai font-weight menjadi 300. Nah, berhubung kita tidak meminta browser untuk mengunduh font Roboto dengan font-weight 300, maka browser akan secara otomatis mengganti nilai font-weightnya menjadi 100, sehingga tidak ada perubahan. Apabila kita menggunakan font-weight 400 barulah font akan berubah menjadi ketebalan normal.

Jadi disini bisa diperhatikan bahwa pada font-weight 100 maka tulisannya akan menjadi tipis. Pada font-weight 400 maka tulisannya akan menjadi normal.

Nah sekarang kita ubah kode link yang diberikan oleh Google Font tadi. Kemudian kita hapus angka 100 pada font weight Roboto. Artinya sekarang kita hanya meminta browser untuk mengunduh font weight 400 saja.

Pada saat ini kita menggunakan font-weight 400. Jadi apabila kita refresh browser, maka tampilannya tetap sama. Namun apabila kita mengganti font-weight menjadi 100 dan refresh browser. Sekarang tampilannya sudah tidak berubah menjadi menggunakan huruf tipis lagi, karena browser sudah tidak mengunduh font-weight 100. Browser akan secara otomatis menggantinya menjadi font-weight yang tersedia, yaitu 400.

Oke, kita hapus dahulu properti font-weight. Selanjutnya kita akan mencari font yang akan digunakan oleh bagian judul. Kita buka kembali halaman Google Font. Untuk memilih font apa yang biasa digunakan bersama dengan Roboto, kita bisa memilih navigasi Pairings. Kemudian Google Font akan memberitahukan beberapa jenis font yang biasanya dipasangkan dengan Roboto.

Sebagai contoh ada Open Sans. Apabila kita klik, maka Google Font akan memberikan contoh penggunaan Roboto bersama Open Sans. Disini font Roboto digunakan pada bagian atas, atau judul. Sedangkan Open Sans digunakan pada bagian bawah atau paragraf. Kita bisa klik tombol anak panah untuk menukar posisi kedua font. Kita bisa mengklik ke nama font lain seperti Noto Sans dan Lato untuk melihat bagaimana contoh apabila font Roboto digunakan bersama dengan font tersebut. Kita juga bisa mengganti font weight dari font, misalkan font Roboto pada judul kita ganti menggunakan huruf tebal.

Misalkan kita merasa cocok untuk menggunakan font Roboto bersama Lato, maka kita mengklik icon tandah tambah pada sebelah kanan Lato untuk menambahkannya ke dalam link kita. Lalu kita copy kembali kode pada link ke kode kita.

Perhatikan perbedaan antara kode tag link yang lama dan baru. Yang baru telah menambahkan parameter family=Lato. Disini tidak ada parameter tambahan berupa font weight, artinya kita akan mengunduh seluruh style yang tersedia pada font family Lato. Untuk mengatur agar browser hanya mengunduh font weight 400 dan 700, maka kita bisa meng-copy parameter weight dari font roboto. Dan mengubah angkanya menjadi 400 dan 700. Perhatikan bahwa angkanya harus berurutan dari kecil ke besar.

Begitu juga pada font Roboto, kita ganti angkanya menjadi 400 dan 700, maka browser akan mengunduh font dengan tingkat ketebalan regular dan bold.

Kita hapus kode link lama.

Kita simpan kode html dan kita pindah ke css. Selanjutnya pada selector Body, kita ganti font-family menjadi Lato, sans-serif. Dan pada selector h1,h2 kita ganti font family menjadi Roboto, sans-serif.

Kita simpan kode css kita. Dan kita refresh browser. Sekarang kita telah menggunakan Google Font Roboto pada judul dan Lato pada konten kita.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.