Google Web Fonts

Google Web Fonts

Posted by rike on 0

Font yang digunakan dalam blog ini berukuran 120% (setara dengan 1.2em) dan mengadopsi google web fonts yang berbasis keluarga ‘serif’ (font:120% 'Crimson Text', georgia, serif;). Sedangkan pada title blog digunakan google web fonts tangerine, masih termasuk juga ke dalam keluarga ‘serif’.

Dalam template blogspot, google web fonts otomatis dapat di load melalui Rancangan (Design)→“Perancang Template” (baca posting: Font untuk Template Blogger). Untuk dapat menggunakan fitur ini, template blog Anda harus memiliki elemen variable definitions, contoh:

   <Variable name="bodyfont" description="Body Text Font"
             type="font" default="normal normal 80% Georgia, Serif" value="normal normal 80% Georgia, Serif">
   <Variable name="outerfont" description="Outer Text Font"
             type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

Bagaimana jika tanpa variable definitions?

Silakan kunjungi WebFont Loader di Google Font API (Application Programming Interface) untuk mengetahui keterangan selengkapnya. Selanjutnya, masukkan script berikut di atas </head>.

<script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Tangerine', 'Cantarell' ] }
      };
      (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>

Ganti kode script yang berwarna merah dengan google web fonts yang Anda gunakan.

Kemudian tambahkan CSS (Cascading Style Sheet) seperti yang tampak di bawah ini, bermanfaat apabila koneksi sedang ‘lemot’. Letakkan di atas ]]></b:skin>.

      .wf-loading p {
        font-family: serif;
      }
      .wf-inactive p {
        font-family: serif;
      }
      .wf-active p {
        font-family: 'Tangerine', serif;
      }
      .wf-loading p {
        font-family: serif;
        font-size: 16px;
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px;
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px;
      }

1. Ganti kode yang berwarna merah dengan google web fonts yang Anda gunakan.


2. Jika script tidak aktif (koneksi ‘lemot’) maka akan ditampilkan font ‘serif’ dengan ukuran 16px.

Anda pun dapat mengganti nilai dari CSS tersebut, sesuai dengan keinginan Anda.