Sebelumnya telah dijelaskan bagaimana cara merubah font atau jenis huruf dalam sebuah website yang di desain. Sedikit mengingatkan, cara pertama adalah dengan menggunakan font family CSS. Kemudian cara kedua adalah dengan mengundang jenis font dari luar atau dikenal dengan external font. Sekarang akan dijelaskan cara yang paling sering digunakan oleh para web designer yaitu dengan memanfaatkan Google Font.
Catatan penting jika nanti anda sedang men-design sebuah halaman HTML, google font akan tampil jika status anda online. Ketika kode HTML di jalankan saat anda offline maka otomatis Google Font tidak akan tampil.
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Pacifico" rel="stylesheet">
Apa itu Google Font?
Google Font merupakah sebuah layanan yang diberikan oleh Google pada web developer dalam menciptakan tampilan website yang indah dan menarik. Font tersebut bisa digunakan secara gratis. Ada ratusan (*saat catatan ini ditulis terdapat 809 jenis font) jenis font yang bisa dipilih dalam layanan Google Font ini. Selengkapnya anda bisa lihat pada alamat : google.com/fonts.Catatan penting jika nanti anda sedang men-design sebuah halaman HTML, google font akan tampil jika status anda online. Ketika kode HTML di jalankan saat anda offline maka otomatis Google Font tidak akan tampil.
Tips Memilih Google Font untuk Website
Sebagai mana telah dijelaskan, anda bisa melihat font yang disedikan google ini di alamat google.com/fonts. Ketika sampai di alamat tersebut, pada halaman awal akan ada fitur utuk mencari jenis huruf dan anda juga bisa melihat semua huruf yang disediakan google. Untuk percobaan ini saya menggunakan font Indie Flower dan Pacifico.
Ketika telah menemkan huruf yang sesuai di hati maka klik tanda tambah. Akan muncul sebuah jendela pop. Di sana akan ada dua pilihan yaitu : Standard dan @import . Kedua cara tersebut bisa digunakan yang mana saja. Sekarang akan kita lihat satu persatu cara menggunakan Google Font tersebut pada halaman HTML.
Dengan Cara Standar
Jika anda memilih opsi Standard akan ada dua kotak di sana. Kotak pertama berisi kode <link href='http://dst> dan kedua ada kode aturan CSS. Cara Penggunaan Kode tersebut adalah
- <link ahref dst > di letakkan di bawah tag <head> pada halaman HTML.
- kode ke dua tersebut adalah kode untuk property dan value dalam <style > css.
Dari 2 huruf yang telah saya pilih diatas, maka dalam sebuah halaman HTML penulisan kode tersebut menjadi :
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Pacifico" rel="stylesheet">
<style type="text/css">
.part1{
font-family: 'Indie Flower', cursive;
}
.part2{
font-family: 'Pacifico', cursive;
}
</style>
</head>
<body>
<h2>Menggunakan Google Font pada CSS</h2>
<h3>Font default:</h3>
<p>Untuk mengambil data dari sampel, digunakan tes hasil belajar berupa tes essay dan lembar observasi aktivitas siswa. Dan data tes akhir siswa dianalisis mengunakan uji hipotesis yaitu uji t dengan taraf signifikan 0,05.</p>
<h3>Font Indie Flower:</h3>
<p class="part1">Untuk mengambil data dari sampel, digunakan tes hasil belajar berupa tes essay dan lembar observasi aktivitas siswa. Dan data tes akhir siswa dianalisis mengunakan uji hipotesis yaitu uji t dengan taraf signifikan 0,05.</p>
<h3>Font Pacifico:</h3>
<p class="part2"> Untuk mengambil data dari sampel, digunakan tes hasil belajar berupa tes essay dan lembar observasi aktivitas siswa. Dan data tes akhir siswa dianalisis mengunakan uji hipotesis yaitu uji t dengan taraf signifikan 0,05.</p>
</body></html>
Dengan Cara @import
Untuk menggunakan cara kedua ini prinsipnya sama saja dengan cara pertama. Ketika memilih denga metida ini maka akan diberikan dua kode juga. Kode pertama diletakkan di bawah <head>. Kemudian kode kedua digunakan sebagai property dan value dalam CSS.
Sebagai contoh anda bisa menjalankan kode di atas lagi dengan mengganti
dengan
<style> @import url('https://fonts.googleapis.com/css?family=Indie+Flower|Pacifico'); </style>.
Note : sekali lagi !!! Anda harus terhubung dengan koneksi internet ketika menjalankan halaman yang menggunakan google font.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment