Kamis, 06 Februari 2014

Tambahkan Font Web Google untuk Blogger

Kamis, Februari 06, 2014    

Jika Anda mencari free open source font untuk merancang teks blog anda, maka tidak ada yang lebih baik dari font web Google. Blogger telah menggunakan font web Google untuk waktu yang cukup lama, Anda dapat menemukannya dengan mengklik tombol Customize ditemukan di bawah tab Template Blogger dari blog Anda.


Tapi ada tidak banyak web font tersedia untuk dipilih sebanyak direktori font yang memiliki, bukan? Atau Anda memiliki kustom template Blogger di mana Anda ingin menambahkan font web. Mari kita mulai dengan Merienda sebagai contoh font yang kita dan melihat bagaimana kita dapat menambahkan ini ke Blogger.

Langkah  1: After finding this font click on “Quick use”. 
Langkah 2: Anda akan diarahkan ke halaman berikutnya di mana Anda harus memilih pilihan untuk font.
  1. Pilih gaya yang Anda inginkan - Sebagian besar waktu "Normal" yang terbaik dan Anda tidak perlu memilih gaya font lain (jika tidak diperlukan) untuk mengurangi waktu buka halaman dan seperti juga dapat dilakukan melalui CSS.
  2. Pilih karakter set yang Anda inginkan - Jangan pilih apa pun di sini karena saya akan datang ke ini nanti.
  3. Tambahkan kode ini ke situs web Anda - Copy kode yang Anda butuhkan untuk menambah template Anda.
    Langkah 3: Login ke Blogger, pergi ke tab Template dan klik "Edit HTML".
Langkah 4: Cari <head> dan di bawahnya tambahkan kode disalin seperti diceritakan dalam langkah 2.3 tapi di sini Anda juga harus menambahkan trailing slash (/) seperti yang ditunjukkan di bawah ini. 

<link href='http://fonts.googleapis.com/css?family=Merienda' rel='stylesheet' type='text/css' />
 
Jika garis miring tersebut tidak akan ditambahkan di akhir maka anda akan mendapatkan error XML saat menyimpan template Anda.

Langkah 5: Sekarang Anda harus mengintegrasikan font melalui CSS dengan menambahkan tepat sebelum
Jika garis miring tersebut tidak akan ditambahkan di akhir maka anda akan mendapatkan error XML saat menyimpan template Anda.

Langkah 5: Sekarang Anda harus mengintegrasikan font melalui CSS dengan menambahkan tepat sebelum]]> </ b: skin>. Misalnya, jika Anda ingin font web untuk seluruh halaman kemudian menambahkan:
. Misalnya, jika Anda ingin font web untuk seluruh halaman kemudian menambahkan:
body {
  font-family: 'Merienda', sans-serif;
 }
Sekarang misalkan Anda ingin mengintegrasikan font web untuk judul posting Anda hanya maka kode akan menjadi:
h3.post-title {
  font-family: 'Merienda', sans-serif;
}
 
Atau misalkan Anda ingin ini untuk blockquotes hanya maka akan: 
 
.post blockquote {
  font-family: 'Merienda', sans-serif;
}
 
Dan jika Anda ingin font web menjadi miring kemudian menambahkan properti CSS font-style: italic; dengan definisi.

Langkah 6: Jika hal itu dilakukan kemudian simpan template Anda.
 
Catatan penting:

     Anda dapat menambahkan beberapa web font untuk Blogger dengan memilih font yang Anda inginkan dan ikuti langkah-langkah lagi dari 1 sampai 6.
     Pada langkah 2.2, untuk sebagian besar waktu, "Latin" melakukan pekerjaan dan Anda tidak perlu memilih set karakter lain karena akan meningkatkan waktu buka halaman. Tapi jika Anda membutuhkannya tidak peduli apa maka Anda dapat memilih untuk memiliki beberapa rangkaian karakter. Dalam hal ini Anda juga perlu untuk mengkodekan "&" tanda (atau ampersand) sehingga Blogger tidak memberikan kesalahan saat menyimpan XML template. Ini akan seperti: 
 
 <link href='http://fonts.googleapis.com/css?family=Merienda&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css' />
 
 
Memuat Google Web Font Asynchronously

Jika Anda adalah seorang pengguna muka dan pengembang maka Anda dapat menggunakan perpustakaan Google JavaScript bukan link stylesheet, juga dikenal sebagai "WebFont Loader", untuk memuat web font asynchronous. Cari <head> dalam template Blogger Anda dan hanya menambahkan script di bawah ini.
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Merienda::latin' ] }
  };
  (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>
 
Hal ini juga memungkinkan untuk memanggil dan menambahkan beberapa web font. Lihat contoh di bawah ini: 

WebFontConfig = {
  google: { families: [ 'Merienda', 'Droid+Sans' ] }
};