Berjumpa lagi dengan Bintaro Web, kali ini kami akan membagikan tips kepada anda mengenai cara memasukkan font dalam CSS3 dengan font tertentu. Misalnya anda punya font Android dengan nama fontnya adalah android.ttf, dan ingin font tersebut ingin anda pakai dan masukan ke dalam website anda. Berikut adalah caranya
1. Misalkan kami punya code html seperti dibawah ini
1. Misalkan kami punya code html seperti dibawah ini
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Contoh Memasukan Font di CSS3</title>
</head>
<body>
<h1>Ini adalah heading website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</body>
</html>
2. Letakkan font android.ttf di satu folder yang sama dengan code html anda
3. Lalu seperti biasa, anda mesti mengetikan code CSS, bisa melalui Linked CSS ataupun Embedded yaitu dengan cara langsung anda ketikan kode html nya. Pada tutorial kali ini kami menggunakan cara Embedded. Code CSS nya adalah :
@font-face {
font-family: Android;
src: url(android.ttf);
}
3. Misalnya disini saya akan gunakan tag H1 dengan font tersebut, maka ketikkan h1 { font-family: Android; }
Code lengkapnya adalah sebagai berikut
<!DOCTYPE html>4. Silahkan anda buka pada browser, maka sekarang tulisan "Ini adalah heading website" sudah menggunakan font Android tersebut.
<html>
<head>
<meta charset="utf-8" />
<title>Contoh Memasukan Font di CSS3</title>
<style type="text/css">
@font-face {
font-family: Android;
src: url(android.ttf);
}
h1 {
font-family: Android;
}
</style>
</head>
<body>
<h1>Ini adalah heading website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</body>
</html>
5. Selanjutnya anda bisa berkreasi menggunakan Font lain sesuai kebutuhan anda. Font ini juga bisa untuk digunakan untuk tag yang lain nya. Selamat mencoba.
Anda butuh Jasa Pembuatan Website untuk Perusahaan atau Toko Online anda? Segera hubungi kami sekarang juga dan dapatkan diskon akhir tahun.
Bintaro Web Design
Tlp : 02171370813
HP : 085710190845
PIN BBM : 7DC8D13D
Email : info@bintaroweb.com
Tidak ada komentar:
Posting Komentar