Cara Menggunakan Google Font Pada Web

Cara Menggunakan Google Font Pada Web

Google Font adalah sebuah produk buatan Google yang berguna untuk memudahkan web developer dalam menggunakan font pada web.

Dengan google font kita dapat menggunakan font-font yang disediakan dengan mudah tanpa mendownload. Dan tentunya gratis.

Cara penggunaanya juga mudah, kita hanya perlu menghubungkan api google kedalam website kita. Langsung saja kita simak caranya.

Memilih Font

Langkah pertama yang dilakukan pastinya memilih font. Buka situs Google Font di https://fonts.google.com/

Akan muncul berbagai font, silahkan pilih satu, atau ketik nama font di kolom pencarian.

Google Font

Lalu klik icon tampah di samping kiri nama font tersebut. Disini saya memilih font Playfair Display.

Ikon Tambah

Setelah ditambah, akan muncul notifikasi di pojok bawah, klik lalu akan muncul tampilan untuk mengatur font.

Mengatur Font

Anda juga bisa mengatur ketebalan font di menu customize.

Jika sudah selesai salin kode link yang disediakan.

Contoh.

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700&display=swap" rel="stylesheet"> 

Menggunakan Google Font

Tempelkan kode yang disalin ke halaman web anda, masukan didalam tag <head>

Lalu gunakan font tadi di css dengan font-family.

<!DOCTYPE html>
<html>
<head>
  <title>Menggunakan Google Font</title>
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700&display=swap" rel="stylesheet"> 
  <style>
   body{
    font-family: 'Playfair Display';
   }
   h1{
    font-weight: 700;
   }
  </style>
</head>
<body>
  <h1>Playfair Display</h1>
  <p>
   Ini font dari google font.
  </p>
</body>
</html>

Dan berikut hasilnya

Hasil Googe Font

Anda juga dapat menggunakan lebih dari satu jenis font, tinggal klik tombol tambah.

Itu saja tutorial singkat dari saya, semoga bermanfaat.

Related Post

Comments

X