Sinau Coding
Berbincang santai perihal pemrograman
Tukang ketik yang sedang belajar pemrograman
2:35 AM

Bagaimana menggunakan Google Fonts di Web/Blog

Google Fonts

Google Fonts adalah salah satu layanan Google yang menyediakan banyak jenis fonts yang dapat digunakan secara gratis baik untuk web pribadi maupun komersial. Pada saat tulisan ini saya tulis, Google Fonts menyediakan 808 jenis fonts dan terus bertambah hampir setiap harinya.


Kenapa Google Fonts sangat menarik dan begitu banyak yang merekomendasikannya ? Pertama tentu saja karena gratis. Lalu kualitas dan jenis fonts yang indah. Dan tidak kalah penting adalah performa yang tidak perlu diragukan lagi. Artinya uptime-nya boleh dibilang hampir 100%.

Nah, berikut ini adalah cara dan tips dalam menggunakan Google Fonts untuk hasil yang maksimal.

Pilih Fonts yang sesuai

Silahkan langsung menuju ke web Google Fonts. Di sana anda menjumpai begitu banyak jenis fonts, mulai dari yang standar sampai dengan yang aneh-aneh. Silahkan pilih yang sesuai dengan tema web anda. Jika bingung dan terlalu banyak pilihan, maka anda dapat memanfaatkan fasilitas pencarian yang telah disediakan.

Untuk font-font tertentu, anda dapat memilih varian-varian yang memberikan hasil yang berbeda pula.

Setelah anda menemukan jenis font yang anda inginkan, klik tombol + yang ada di pojok kanan. Jika perlu silahkan pilih beberapa font sekaligus.

Setiap kali anda menekan tombol + tersebut, maka secara otomatis font yang anda pilih akan tersimpan dan akan muncul informasi di bagian bawah. Jika kotak informasi tersebut anda klik, maka akan muncul informasi font-font apa saja yang telah anda pilih.

Perhatikan Load Time

Menggunakan banyak font sekaligus memang tidak terlarang, akan tetapi pastikan agar tidak sampai mengganggu performa web. Semakin banyak anda menggunakan fonts, maka makin banyak pula waktu loading yang diperlukan halaman web anda.

Oleh karena itu, pastikan indikator Load Time berupa fast atau paling buruk moderat.




Embed Fonts ke dalam HTML

Caranya sangat mudah, cukup dengan memanggilnya dengan link. Perhatikan pada kotak infomasi fonts yang anda pilih. Di sana sudah tertera link yang tinggal copy paste ke dalam HTML.

Seperti contoh di bawah ini.


<!DOCTYPE html>
<html>
<head>
  <title>Test Google Fonts</title>
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Roboto:300|Ubuntu" rel="stylesheet">
</head>
<body>


Gunakan Fonts dengan CSS

Pada kota informasi fonts yang anda pilih tersebut juga sudah ditunjukkan bagaimana menggunakan fonts dengan CSS.

Pada contoh di bawah ini, masing-masing fonts di gunakan pada paragraf yang berbeda-beda.


Sekian tip dan trik kali ini. Semoga yang sedikit ini bermanfaat.

Sumber : https://fonts.google.com/

Komentar

Load more

Terbaru

Cara install Postgresql di MacOS
Postgresql adalah salah satu object-relational database open source yang memiliki banyak fitur enterprise layaknya Or...
Cara install npm di Laravel
aravel adalah sebuah framework untuk webapp yang berbasis php, sedangkan npm adalah sebuah package manager untuk node...
Cara install MariaDB di MacOS dengan menggunakan Homebrew
MariaDB selain tersedia di Windows dan Linux, juga tersedia di MacOS dan dapat diinstall dengan menggunakan homebrew....
Cara insert data ke dalam list atau table tanpa menutup Modal
Desain halaman dan dialog tambah data biasanya adalah, User klik tombol yang akan memunculkan dialog, dimana dialog a...