Root » WordPress » Cara Menggunakan Google Webfonts di WordPress

Cara Menggunakan Google Webfonts di WordPress

Jika Anda tertarik menggunakan huruf dari Google Webfonts di blog WordPress Anda, maka ada beberapa cara untuk menerapkan hal tersebut. Tidak sulit-sulit amat.

Hal pertama yang perlu Anda lakukan adalah mencari huruf mana yang ingin Anda pakai. Lihat huruf-huruf dari Google Webfonts di sini. Semisal saya ingin memakai Source Sans Pro. Kemudian lihat bagian bawah dari contoh kalimat ada menu See All Style, Quick Use, Pop out dan Add to collection. Anda klik Quick Use.

google-fonts

Tunggu sampai loading selesai, dan Anda akan melihat halaman seperti ini.

google-fonts-styles

Pilih style yang Anda butuhkan. Di gambar saya menggunakan Normal 400 dan Bold 700. Jadi kode yang saya dapatkan adalah <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>

Setelah tahu kode yang harus diloading di blog Anda, sekarang saatnya memasangnya di WordPress. Berikut dua cara yang umum dilakukan.

1. Loading Dari CSS

Meski pun saya tidak seberapa suka cara ini, tapi ada baiknya Anda mengetahuinya. Alasannya dengan menggunakan cara ini loading blog Anda lebih lambat daripada menggunakan cara kedua.

Untuk meloading Google Webfonts dari CSS, Anda hanya perlu menambah baris ini di file CSS Theme Anda. Taruh di bagian atas. Berikut contohnya jika menggunakan Source Sans Pro.

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

2. Menggunakan Fungsi wp_enqueue_scripts

Untuk menggunakan cara ini Anda harus buka file functions.php di theme yang Anda pakai. Jika theme Anda tidak punya, maka buat sendiri file php dan beri nama functions. Oke. Sekarang buka dan tambahkan baris berikut:

/** Load Google fonts */
add_action( 'wp_enqueue_scripts', 'pengunjungblog_load_google_fonts' );
function pengunjungblog_load_google_fonts() {
wp_enqueue_style(
'google-fonts',
'http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700',
array(),
'all'
);
}

3. Menggunakan Huruf Tersebut

Jika sudah melakukan salah satu cara yang saya jabarkan di atas, maka saatnya menggunakannya. Sebenarnya sama dengan menggunakan huruf umum. Tapi jika Anda butuh contoh, lanjutkan membaca.

Misal saya ingin memakainya untuk judul posting saya. Jadi CSS-nya seperti ini:

h1,
h2,
h2 a,
h3,
h4,
h5,
h6 {
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
font-weight:400;
font-style:normal;
margin: 0 0 15px;
}

Bonus Tips:

Jika blog Anda menggunakan SSL, maka Anda harus mengubah parameter protokolnya menjadi relative protokol. Jadi pada cara pertama Anda menulisnya menjadi begini:

@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

dan Pada cara kedua begini:

/** Load Google fonts */
add_action( 'wp_enqueue_scripts', 'custom_load_google_fonts' );
function custom_load_google_fonts() {
wp_enqueue_style(
'google-fonts',
'//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700',
array(),
'all'
);
}

Semoga bisa membantu Anda dalam mendesain blog Anda. Jangan lupa kunjungi blog saya.

Twitter

Syaiful Bahri

Seorang part time blogger dan Konsultan Website Traffic. Anda bisa mengenalnya lebih lanjut dan melihat bagaimana dia membantu klien-nya membangun lalu lintas blog yang tinggi di Pengunjung Blog.

telah mempunyai 4 Tulisan di JhezeR.com

WordPress » » » » cara menggunakan sanspro »
Cara Menggunakan Google Webfonts di WordPress Reviewed by Syaiful Bahri on . Sebuah Tulisan tentang Cara Menggunakan Google Webfonts di WordPress @JhezeR.com

Jika Anda tertarik menggunakan huruf dari Google Webfonts di blog WordPress Anda, maka ada beberapa cara untuk menerapkan hal tersebut. Tidak sulit-sulit amat. Hal pertama yang perlu Anda lakukan adalah mencari huruf mana yang ingin Anda pakai. Lihat huruf-huruf dari Google Webfonts di sini. Semisal saya ingin memakai Source Sans Pro. Kemudian lihat bagian bawah dari

Rating: 5

17 Komentar "Cara Menggunakan Google Webfonts di WordPress"


  1. Yos Beda | 4 Komentar +
    December 22nd, 2012 @ 10:10

    lho yang menulis mas Syaiful Bahri ta, jadi kontributor jhezer.com ta mas syiful, baru tahu 🙂

    Balas Yoo

    JhezeR |

    udah lama kok mas yos, mas syaiful jd kontributor disini, kan sudah ada 4 tulisan dari dia.
    mas yos boleh jg kok jd kontributor, kalo minat 🙂

    Balas Yoo

  2. Leo Ari Wibowo | 1 Komentar +
    December 22nd, 2012 @ 11:34

    Source Sans Pro memang pilihan font yang cakep mas. Saya sendiri memakainya di blog.

    Balas Yoo

    Syaiful Bahri |

    iya mas Leo.. huruf itu bagus. saya pakai di blog saya untuk judul saja..Hehehehe…

    Balas Yoo

  3. arif | 1 Komentar +
    December 23rd, 2012 @ 05:47

    numpang baca2 dulu mas, saya masih amatir utk oprek2 lebih dalam di WP 😀

    Balas Yoo

  4. NN | 1 Komentar +
    December 24th, 2012 @ 17:06

    NAMBAH ILMU LAGI….

    ===edit===

    maaf mas/mbak, nama & linknya terpaksa saya edit.

    Balas Yoo

  5. Akuntansi | 2 Komentar +
    December 27th, 2012 @ 05:49

    Utak-atik buat merubah font di WordPress theme pusing juga.. alhamdulillah akhirnya ada juga plugin yang bisa ngrubah font yang keren. trima kasih gan atas sharingnya, sangat bermanfaat buat saya. 🙂

    Balas Yoo

  6. Dhimas Kirana | 9 Komentar +
    December 27th, 2012 @ 12:09

    udah di coba 😀

    Balas Yoo

  7. Amri | 1 Komentar +
    December 29th, 2012 @ 09:20

    pakai plugin kayanya kebih simpel yooo..

    Balas Yoo

  8. mtieka | 4 Komentar +
    March 30th, 2013 @ 13:55

    terimakasih infonya… keren dan bermanfaat sekali…

    Balas Yoo

  9. DANI | 2 Komentar +
    April 6th, 2014 @ 20:36

    terimakasih infonya….. kerennya za ???
    makasih booooooos

    Balas Yoo

  10. DANI | 2 Komentar +
    April 6th, 2014 @ 20:43

    terimakasih infonya….. kerennya za ???
    makasih booooooos

    Balas Yoo

  11. kurs hari ini | 1 Komentar +
    June 3rd, 2014 @ 21:45

    Hehe aga ribet juga ya caranya.. tapi dengan penjelasan masgan semuanya jadi lebih mudah. thx masgan udah posting artikel google webfont sangat bermanfaat 🙂

    Balas Yoo

  12. bayu putra | 2 Komentar +
    October 31st, 2016 @ 02:12

    Wah agak Susah ya gan caranya… tenks gan

    Balas Yoo

  13. iren | 2 Komentar +
    November 20th, 2016 @ 01:50

    agak ribet mas ya hhahahha

    Balas Yoo

  14. mastoah | 1 Komentar +
    November 20th, 2016 @ 01:51

    saya agak kesulitan gan

    Balas Yoo

  15. ida laila | 1 Komentar +
    November 20th, 2016 @ 01:52

    menurut saya susah susah gambang bos

    Balas Yoo

Halo, Silahkan Tinggalkan Jejak Komentarnya Yoo...