CSS3 Webfont

by

Di artikel sebelumnya saya telah bahas tentang css font.

Nah, di artikel ini akan saya bahas tentang cara menggunakan font yang fontnya itu diinstal di server, bukan di komputer pengguna.

Sebelum itu, kenali dulu format webfont populer. Yaitu:

  • TrueType Fonts (TTF), adalah format font yang dikembangakan Apple dan Microsoft. Biasanya macbook menggunakan jenis font ini.
  • OpenType Fonts (OTF), jenis font yang dikembangkan microsoft.
  • The Web Open Font Format (WOFF), font yang digunakan untuk pengembangan website. Dengan rekomendasi dari W3C
  • SVG Fonts/Shapes, format SVG memungkinkan menyisipkan font ke dalam dokumen SVG. Dan font tersebut bisa dipanggil dengan property font-face
  • Embedded OpenType Fonts (EOT), digunakna di web jika font berasal dari sumber lain

Google Web Font

Directory font paling populer adalah google webfont. Koleksinya cukup lengkap dan tentunya GRATIS!

Kunjungi situs fonts.google.com.

Pilih font yang diinginkan. Misal saya pilih Roboto.

Kemudian klik tab Embed.

Ada dua cara untuk menggunakan di web kita. Yaitu:

<link>

Masukkan kode yang ada di tab <link> tersebut sebelum kode </head>

Misal:

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
</head>
<body>
</body>
</html>

@import

Masukkan kode di @import ke dalam file .css kamu.

Untuk menggunakan font tersebut, tinggal tambahkan font-family yang ditampilkan di atas ke element yang diinginkan.

Misal:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
h1 {font-family: 'Roboto', sans-serif;}

Leave a Comment