From the BlogSubscribe Now

Cara Mengatasi CSS @import Di Theme Genesis

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 Fonts
———————————————————— */
@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 Google Web Fonts */
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 :
font-family : ‘Oswald’, arial, serif;
  • 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

Avoid CSS @import

Antara post lain yang menarik tentang Genesis Theme ;

EMAIL NEWSLETTER

Like what you read here in this blog post?
Get more like it delivered to your inbox daily.

About shraqs

Husband. Blogger. Penggemar Nescafe tak kira masa dan tempat. Obses dengan teknologi smartphone (Android, iOS, and etc). Menjadikan blog sebagai rekod simpanan peribadi dan rujukan kepada semua di masa depan.

Twitter | Facebook | Google+

Comments

  1. 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

  2. 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

  3. terbaik. inilah cara paling mudah dan selamat
    Amirez recently posted…Gajet Pun Ada Perasaan

  4. walaupun server google laju..sy takut gak nk guna..hehe

  5. oh, sy blogspot saja.
    faizfakhirin recently posted…#Sadis Gambaran Pekerja Arang Batu Yang Menyayat Hati. (20 Gambar)

  6. hemm..aku dah malas fikir pasal themes genesis nih..pening dah lalat aku nih..

  7. 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

Speak Your Mind

*