Mengganti Fonts Pada BLOG (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.

Tweet

Anda Sudah Membaca Mengganti Fonts Pada BLOG (Google Web Fonts) Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan share Facebook like diatas/sharing tool. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku. (MENCURI adalah pekerjaan PENGECUT ! © room-tutorial.blogspot.com)