@font-face CSS di Blogger Template

Akhirnya dapat juga cara alternatif menggunakan '@font-face CSS' ('Font Embedding') di 'blogger template' melalui jasa gratis yang disediakan oleh kernest.com. Dengan menggunakan jasa gratis ini, tidak perlu lagi pusing menyimpan file 'Font' yang akan kita gunakan. Untuk masalah jenis font, disediakan cukup beragam (cukup pusing memilihnya) baik itu yang gratis/free maupun yang berbayar/commercial.

@font-face, tidak seperti sIFR dan Cufon yang menggunakan javascript, @font-face ini hanya berupa 'Embed Code CSS', jadi katakan selamat tinggal untuk javascript :). Anda dapat melihat demo diblog ini dan di Blogger Display pada judul blog (h1).

Selain itu kelebihan penggunaan @font-face ini, karena bukan berupa image seperti cufon, maka text font tersebut dapat di translate.

Penerapan @font-face di 'blogger template'

Untuk penerapan @font-face ini sangat mudah:

1. Registrasi,

2. Mencari font yang anda ingin gunakan (- Find More Fonts...), anda klik font tersebut,

3. Masukkan alamat blog/web anda di kolom sebelah kanan (anda bisa memasukkan beberapa alamat), setelah anda klik add, kemudian anda diminta klik alamat blog/web anda dibagian atas.

4. Selanjutnya anda akan masuk ke halaman berikut:

Pada tahapan pertama di gambar, copy 'Embed Code' tersebut kemudian paste di atas </head> pada template anda, seperti berikut:

<link href="http://kernest.com/http-blogcunayz-blogspot-com.css" media="screen" rel="stylesheet" type="text/css" />

</head>

Setelah itu pada tahapan kedua digambar tersebut, lihat font-family yang anda dapat, gunakan font-family tersebut, seperti contoh yang ada, sebagai contoh saya menerapakan pada bagian heading, maka perintah CSS nya adalah :

h1,h2,h3,h4 {font-family: 'Days';}

Anda juga dapat menggunakan beberapa jenis font.

5. Save tamplate anda (jika anda preview, anda tidak akan melihat perubahan jenis font tersebut).

Sip demikian tahapan penggunaan @font-face CSS tersebut di Blogger Template. Sedikit tambahan bahwa penggunaan @font-face CSS masih belum didukung untuk 'browser Google Chrome'.

Selamat Mencoba...

Share this history on :

Tweet

Title : @font-face CSS di Blogger Template
URL : http://blogcunayz.blogspot.com/2011/07/font-face-css-di-blogger-template.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link @font-face CSS di Blogger Template sebagai Sumbernya.