Sekiranya anda pengguna Genesis Framework sepertimana yang saya gunakan di blog ini, anda mungkin sedar bahawa setiap theme (child theme) dari Studiopress menggunakan @import untuk memaparkan font dari Google Web Fonts. Penggunaan @import ini tidak disyorkan oleh Google Pagespeed Insight kerana boleh melambatkan loading page sesebuah blog. Gunakan Google Pagespeed Insight atau dapatkan Page Speed add-on untuk browser Chrome dan Firefox di SINI untuk mengenal pasti samada blog anda menghadapi isu @import atau sebaliknya.
Jadi, menerusi post kali ini saya akan tunjukkan cara untuk mengatasi masalah penggunaan Google Web Fonts yang diaplikasikan oleh theme dari Studiopress (Genesis Framework).
Cara Mengatasi CSS @import
Langkah Pertama – Delete function @import dari stylesheet file.
- Di WordPress Dashboard – > Appearance -> Editor. Pastikan anda mengedit file style.css. Browse kod seperti di bawah.
———————————————————— */
@import url(http://fonts.googleapis.com/css?family=Lora);
@import url(http://fonts.googleapis.com/css?family=Oswald);
Memandangkan blog ini menggunakan theme eleven40, terdapat 2 set Google web font yang digunakan iaitu Lora dan Oswald. Ada kemungkinan, child theme yang anda gunakan memiliki set font yang berlainan. Pastikan anda membuat catatan nama font tersebut sebelum memulakan langkah kedua.
- Delete kod tersebut dan Save.
Langkah Kedua – Cara Mendapatkan Standard link dari Google Web Font
- Di laman Google Web Font -> Search font yang diperlukan -> Klik pada font -> Quick use -> Skroll ke bawah hingga box ke tiga “Add this code to your website” (pastikan anda memilih tab Standard). Link yang dipaparkan merupakan link yang akan digunakan.
Langkah Ketiga – Memasang Google Web Font Di Genesis Theme
- Copy kod di bawah dan Paste di Theme function (function.php). Pastikan anda paste kod ini selepas <?php tag.
add_action( ‘genesis_meta’, ‘add_google_fonts’, 5);function add_google_fonts() {
echo ‘<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Lora|Oswald” media=”screen”>’;
}
- Tukarkan link yang berwarna merah dengan link font anda dan Save.
- Sekiranya anda menggunakan lebih dari satu font, gunakan pipe/vertical bar “|” untuk memisahkan antara font.
Langkah Ke Empat – Tukarkan font name di stylesheet (style.css)
- Kembali semula ke file style.css dan pastikan kod font.family ditukar sepertimana font yang baharu anda gunakan. Contoh :
- Anda tidak perlu mengubah font.family ini sekiranya anda masih mengekalkan font yang asal.
Selesai!
Untuk melihat keberkesanannya, lakukan test menggunakan Pagespeed Insight.
Avoid CSS @import
Antara post lain yang menarik tentang Genesis Theme ;
About shraqs
Apa pun aku tak faham pasal font ape ni… Apa kebendanya ni? Hehe
Hazmin Hamudin recently posted…Wordless Wednesday | Pemain Baharu Chelsea?
Bukan apa pun bro, ini saja option kalau nak guna google web font utk blog, tak payah host font d server hosting sendiri, tarik je terus dr server google
satu apa tak paham..mungkin lepas pakai genesis nanti baru paham kot..sementara waktu ni layan themify dlu..hehehe
hafizrahim recently posted…Wordless Wednesday : Banjir Kilat KL
Trick ni boleh diguna pakai utk pengguna theme Genesis & theme wordpress yang lain jugak manalah tau nak mencuba guna Google Web Font di wordpress blog nanti.
shraqs recently posted…Walking Dead S03E01 – Seed
terbaik. inilah cara paling mudah dan selamat
Amirez recently posted…Gajet Pun Ada Perasaan
Betul tu bro.
walaupun server google laju..sy takut gak nk guna..hehe
Ramai developer2 sekarang yg guna Google web font ni sebab banyak pilihan. BTW, kalau server diorang down, default font akan keluar.
oh, sy blogspot saja.
faizfakhirin recently posted…#Sadis Gambaran Pekerja Arang Batu Yang Menyayat Hati. (20 Gambar)
Utk blogspot memang sy tak tau camana nak buat.
hemm..aku dah malas fikir pasal themes genesis nih..pening dah lalat aku nih..
Takpe bro,.. biarkan lalat tu yang pening.
Tema kedua saya guna @import juga tapi bila nak padam, tak boleh. Tak memberi kesan, tak tahu kenapa. Untuk guna google font, ada tiga cara tak silap. Cara bro guna ni cara paling bagus dan laju.
Cara import google web font ni berkesan bukan untuk genesis saja, tapi semua tema cuma kalau guna tema biasa tak guna function.php, letak kat header pun ja.
Naziman recently posted…Cara menghapus folder Shortcut Virus
Betul tu bro,.. memang ada 3 cara. Memandangkan sy guna Genesis, buat tutorial utk Genesis jelah.
karang tak pasal2 ramai yang confuse.