Cara Embed Font ke dalam CSS dan pemanggilan ke dalam css

Hallo sahabat, apa kabar semua. Tentunya baik dan sehat selalu ya, jumpa lagi dengan saya di tutorial Dumet School. Pada artikel kali ini kita akan belajar tentang Cara Embed Font ke dalam CSS, ya.. ! embed font biasa di lakukan pada aplikasi Photoshop, Ilustrator dan aplikasi design lainnya. Embed font juga bisa di lakukan atau di gunakan di dalam CSS, yaitu kita download font nya terlebih dahulu kemudian kita panggil dan berikan ke tag yang mau di berikan font lalu font akan otomatis terinstal atau terpanggil.

Baik langsung saja kita praktekkan, langkah pertama download font (“teman-teman silahkan download font sesuai selera”) terlebih dahulu kemudian extract file dan rename file nya. Disini saya rename dengan nama font.ttl (ttl) adalah extensi bawaan font, untuk teman-teman jangan sampai merubah extensi bawaan nya karena extensi font ada banyak macamnya seperti (.otf )(.ttf ) dll.

Berikutnya siapkan text editornya dan masukkan script di bawah ini

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Embed Font</title>

</head>
<body>
    	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
         Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
         when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
         It has survived not only five centuries, but also the leap into electronic typesetting,</p>
</body>
</html>

Save terlebih dahulu kemudian kita panggil font nya dengan cssÂ

<style>
@font-face {

    src: url(font.ttf);

    font-family: embed_font;
}
</style>

Lalu berikan nama pengganti, contoh di atas ini saya memberikan nama “embed_font“, kemudian kita akan gunakan nama tersebut sebagai font-family

p{
    font-family: embed_font;
    background: gray;
    padding: 10px;
    width: 300px
}

Jika sudah save dan jalankan pada browsernya, maka embed font sudah berhasil

Sangat mudah bukan,,,

Baik sekian dulu di artikel kali ini tentang Cara Embed Font ke dalam CSS , kita jumpa lagi di tutorial berikutnya. Terimakasih dan Sampai Jumpa.

Semoga bermanfaat 🙂

Cara Embed Font ke dalam CSS

Kategori