Google Web Fonts

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.

21 komentar untuk “Google Web Fonts”

  1. Kirain kalau di semua browser tampilan % untuk font standard ternyata

    anyway nice info

    BalasHapus
  2. Baguslah, nambah info tentang blogger

    BalasHapus
  3. lama ndak pake blogger, ternyata kustomisasi font udah bisa lewat perancang template..

    btw, nemu juga blog lokal yang beraliran simpel.. :)

    BalasHapus
  4. @www.rl.net:
    Betul, gan. Persen (%) tidak hanya digunakan untuk ukuran font standar.

    @Rizh:
    Banyak, gan sekarang blog-blog lokal yang beraliran simpel (minimalis). Mungkin ini jadi trend template 2011. Coba agan kunjungi http://rudyazhar.com/tren-disain-blog-2011-minimalis, disana terdapat beberapa blog lokal, yang boleh dikatakan berformat minimalis.
    OOT (Out Of Topic), blog agan banyak sekali. :)

    BalasHapus
  5. Iya nih, makin lama makin banyak aja blog yang tampilannya sesederhana mungkin, padahal dulu enggak newbie enggak yang senior blognya penuh dengan widget ini itu.

    BalasHapus
  6. jarang2 liat pemakai blogspot yang pakai template minimalist, kebanyakan skr malah pakai template yg kebanyakan bermain warna. kalo ane sich lbh demen yang minimalist yang kayak gini.

    BalasHapus
  7. informasi yang bagus, nambah ilmu buat saya. terima kasih ya..

    BalasHapus
  8. @OB
    tak apa lah. ini artikel juga bahas biar blog makin simpel.
    iya, blog emang banyak, tapi pada nggak keurus. hehehe

    btw, masalah ukuran font pake %, itu kan tergantung ukuran yang di browser kan..

    BalasHapus
  9. aya juga seneng sama yg minimalist sob, ketimbang yg banyak ini-itu nya malah jadi bingung mau kesana-sini nya hehe.
    bytheway thanks info nya ?

    BalasHapus
  10. makasi sob sharingnya,,, mantaaap infonya :)

    BalasHapus
  11. thanks for information.good luck.

    BalasHapus
  12. blog nya sederhana, tapi artikel nya mantap nih....

    BalasHapus
  13. makasih atas infonya. . . infonya sangat berguna buat saya. . .

    jangan lupa lihat blog aku juga yach. .

    http://aboutinstallationlinux.blogspot.com/

    makasih. .

    BalasHapus
  14. Terima kasih banyak infonya....Saya kagum...blognya sederhana...tapi pengikutnya sudah banyak. Dan enakan yang begini tampilannya sederhana dan tak banyak iklan. nggak seperti di bawah ini :
    http://www.caridisinisaja.blogspot.com

    BalasHapus
  15. welehem mantep bos artikelnya

    BalasHapus
  16. visit my blog http://www.trikblogspot.co.cc/

    BalasHapus
  17. kalau tips berikut bisa dipake di wordpress ngga >

    BalasHapus
  18. mantap juga nih tuk di simak

    BalasHapus
  19. Wow, really helpful, this is very inspirational. Thank you for your superb post.

    BalasHapus