Google sudah lama membuat fasilitas ini akan tetapi jarang sekali dimanfaatkan oleh para web designer mungkin alasannya berat atau tidak bisa offline. Benar saja fasilitas dari google ini (googel font) hanya dapat dimanfaatkan jika website sudah production (Publikasi), akan tetapi hampir katakan dirumah maupun kantor kalian pasti sudah terhubung dengan internet (Meski tidak semuanya).

Apa manfaat yang didapat dari google font ini? 

 

  1. Dipastikan font - font yang kalian pakai akan  berbeda dengan website - website lain 
  2. Website akan terlihat semakin menarik.
  3. Menambah pengalaman baru dalam membuat portofolio. 
Bagaimana cara mengimplementasikan google font pada website yang akan kita buat ?
  1. Masuk ke website google font (klik disini)
  2. Pilih font yang akan kalian pakai kemudian klik Add Colection.
  3. Klik tombol USE bila sudah memilih.
Ada 3 cara untuk memasukkan font google pada website kita :
1. Dengan mode Standart, yaitu dengan menyisipkan link css pada header website
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
2. Dengan mode Import, yaitu dengan menyisipkan pada file css atau pada header website
@import url(http://fonts.googleapis.com/css?family=Tangerine);
3. Dengan mode javascript, yaitu diinput pada file javascript atau pada header
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Tangerine'' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Kalian dapat memilih ketiga mode diatas, pada artikel kali ini kita coba dengan mode yang pertama. Saatnya  kita mencoba inplemetasikan dalam bentuk html. 

 

<html>

  <head>

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

    <style>

      body {

             font-size:48px;

             font-family: 'Tangerine', serif; 

             text-shadow: 4px 4px 4px #aaa;

      }

    </style>

  </head>

  <body>

    <h1>Selamat datang di website saya</h1>

  </body>

</html>

Mudah bukan dan sederhana sekali, sekarang bagaimana bila banyak font? mudah saja cukup tambahkan separator | (pipe) untuk membedakan tiap - tiap font.
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans|Averia+Gruesa+Libre">
    <style>
     body{font-size:48px;}
      h1{ font-family: 'Tangerine', serif;}
      h2{ font-family: 'Droid Sans';}
    </style>
  </head>
  <body>
    <h1>Selamat datang di website saya</h1>
    <h2>lagi belajar Googel font</h2>
  </body>
</html>
Contoh diatas akan mencetak 2 font yaitu Tangerin dan Droid sans, 
Sekarang kita coba untuk membuat 1 Template kecil untuk implementasi font - font diatas, contoh code seperti dibawah :
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans|Averia+Gruesa+Libre">
    <style>
      body {
        font:normal 12px Arial,Helvetica,Sans-Serif;
        width:800px;margin:10px auto;
      }
      h1{font-family: 'Tangerine', serif; text-shadow: 4px 4px 4px #aaa;
         font-size:48px;font-weight:normal;border-bottom:1px solid #CCC;}
      #wrap{width:100%}
      h2{font:normal 18px 'Averia Gruesa Libre';}
      h3{font:normal 13px;font-family:'Averia Gruesa Libre', Serif;background-color:#CCC;padding:5px;margin-bottom:0;}
      .clear{clear:both;}
      .left_column{width:200px;border-right:1px solid #999;min-height:200px;float:left;vertical-align:top;}
      .box{width:190px;}
      .box ul{list-style:none;padding:0;margin:0;}
      .box ul li{padding: 3px 0;}
      .box ul li a{display:block;text-decoration:none;background-color:#F5F5F5;padding:5px;}  
      .box ul li a:hover{text-decoration:underline;}
      .content_column{float:right;width:590px;margin:0;padding:0;}
    </style>
  </head>
  <body>
    <h1>Selamat datang di website saya</h1>
    <div id="wrap">
        <div class="left_column">
            <div class="box">
                <h3>Menu Utama</h3>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About me</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact me</a></li>
                </ul>
            </div> 
        
        </div>
        <div class="content_column">
            <h2>Belajar Google Font</h2>
            Google font sangat mmudah dipelajari sekaligus dapat mempercantik website kita.
        </div>  
        <div class="clear"></div>
    </div>
  </body>
</html>
Kalian dapat memilih font-font sesuai dengan karakteristik website yang akan kalian bangun akan tetapi jangan terlalu banyak font karena akan sedikit memperlambat kinerja website kalian

DEMO