Pada awalnya, halaman web selalu tampil dengan font Arial, Verdana, Tahoma, San Serif dan beberapa font standar lainnya. Untuk memastikan kompatibilitas bagi semua pengguna,  web designer terpaksa membatasi pilihan Font yang umum dipakai. Jika ingin menampilkan font tertentu yang tidak disupport oleh mesin, maka terpaksa memakai image atau gambar. Tentunya ini bukan pilihan yang efektif.

Untuk mengakomodasi keinginan web designer atau web master, Google tampil dengan layanan mereka Google Fonts. Tersedia banyak koleksi font indah yang bisa anda pilih, dan hebatnya lagi itu gratis. Dengan  Google Fonts akan membantu  membuat halaman web terlihat lebih indah dan menarik

Berikut Panduan menggunakan Google Fonts:

  1. Buat halaman web sederhana
  2. Buka koleksi Google Fonts disini. Dan Pilih jenis font yang anda inginkan.
    Memilih Google Fonts
  3. Setelah anda memilih salah satu jenis Font, maka akan muncul kotak hitam dibawah kanan bertuliskan Family Selected. Klik tanda minus untuk memunculkan panduan cara menggunakan Google Fonts tersebut.
    Cara menggunakan Google Fonts
  4. Untuk deklarasi style tinggal anda copy paste:
    
    <style>
    @import 'https://fonts.googleapis.com/css?family=Roboto';
    </style>
    
    

    Pada bagian diantara tag…

  5. Jika anda ingin menggunakan font pada elemen tertentu tinggal ketikkan:
    body {
            font-family: 'Roboto', sans-serif;
         }
    
  6. Contoh kode selengkapnya:
<html>
  <html>
  <head>
   <style>
	@import 'https://fonts.googleapis.com/css?family=Roboto';
	     body {
  		    font-family: 'Roboto', sans-serif;
		    font-size: 48px;
	           }
    </style>
  </head>
  <body>
<div>Making the Web Beautiful!</div>
  </body>
</html>
</html>

Dengan menggunakan Google Fonts, maka typography web menjadi kaya pilihan. Selamat mencoba


Komentar via Facebook tentang Panduan Menggunakan Google Fonts

Komentar tentang Panduan Menggunakan Google Fonts

Silahkan tulis saran, komentar dan pertanyaan dibawah!

Your email address will not be published. Required fields are marked *