Hallo sobat program, bertemu kembali dengan saya Rizal dan masih diwebsite dumetschool. Pada kesempatan kali ini saya akan membahas seputar font yaitu tentang Cara Menggunakan Font External HTML CSS.
Pada dasarnya sebenarnya browser sudah menyediakan font default, dan sebenarnya google juga sudah menyediakan berbagai jenis font, namun disini kita ingin menggunakan font sendiri atau lebih tepatnya biar berbeda dari font-font lainnya gitu (tampil beda) hehe. Â Lalu bagaimana caranya agar website kita menggunakan font yang kita inginkan ?
Pertama teman-teman dapat memilih font terlebih dahulu di http://www.dafont.com/ jika sudah menemukan font yang di inginkan silahkan teman-teman download dan jika sudah didownload langsung saja di extract dan teman-teman buat file HTML nya juga ya. Dari step diatas maka untuk gambaran file nya akan menjadi seperti dibawah ini :
Jika sudah seperti pada gambar diatas langkah selanjutnya, teman-teman buka file HTML nya kemudian ketiklah script HTML nya seperti pada contoh dibawah ini :
<div class="container"> <h2>Hallo World!</h2> <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, 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, remaining essentially unchanged. It was popularised in the with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <hr> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from BC, making it over years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections and of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section </p> <p>The standard chunk of Lorem Ipsum used since thes is reproduced below for those interested. Sections and from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the translation by H. Rackham.</p> </div>
Jika sudah, boleh coba dijalankan dahulu dan hasil fontnya masih default browser ya teman-teman. Oke untuk langkah selanjutnya teman-teman tambahkan style CSS nya untuk penggunaan font yang tadi kita download. Contoh script nya seperti dibawah ini tinggal teman-teman sesuaikan saja nama file fontnya :
<style type="text/css">
@font-face {
font-family: "Saturday Nights Personal Use";
src: url('Saturday Nights Personal Use.ttf');
}
.container {width:850px; margin:auto; font-family:"Saturday Nights Personal Use";}
</style>
Jika sudah, simpan dan silahkan direfresh atau dijalankan dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan seperti pada gambar dibawah ini :
Cukup mudah ya teman-teman ?, jadi seperti itulah contoh dasar Cara Menggunakan Font External HTML CSS. Dan silahkan teman-teman coba sendiri font-font lainnya sesuai keinginan.
Oke kalau begitu cukup sampai disini pembahasan kita tentang Cara Menggunakan Font External HTML CSS. Semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.
Terimakasih