26 May 2010

Cara Memasang Google Font di Blog

Hai hai hai… kali ini mas ndop mau sharing lagi nih. Malam tadi, aku khan facebookan sama si cebong. Nah dia tuh nemu yang namanya Google Font API. Apa itu google font API, sampeyan bisa baca sebentar di sini

The Google Font API helps you add web fonts to any web page. Benefits of the Google Font API include:

  • A choice of high quality open source fonts.
  • Works in most browsers
  • Extremely easy to use.

Nah pada bingung khan artinya apa? (enggaaak!!!)

Langsung praktek aja ya. Teori mah hafalan doang, males ah, hahaha…

Cara Memasang Google Font di Blog WordPress

  • Langsung menuju Header.php
    Buka Dashboardmu, masuk ke Appearance, kemudian menuju editor. Tengok sebelah kanan, ada bejibun nama php. Klik Header.php.
  • Menuju ke sini. Lalu klik jenis huruf yang sampeyan sukai untuk mendapatkan embed code-nya

google font directory

  • Lalu pilih tab Get the code dan anda akan disuguhi code-codenya yang siap dikopas ke Header.php dan stylesheet (style.css).

get the code google font

  • Copy code yang paling atas, dan paste-kan di Header.php anda. Paste-lah di antara code yang bertuliskan <link rel=…bla bla bla..

masang google font di header.php

  • Sampeyan sudah selesai untuk langkah awalnya. Sekarang saatnya memasang di CSS blog sampeyan. Yup, langsung menuju ke Stylesheet (style.css). Ubahlah dan/atau tambahlah Font-family dengan nama huruf google yang tadi.

    Contoh:
    h1 { font-family: ‘Droid Serif’, arial, serif; }.

  • Sampeyan bisa mengganti huruf-huruf tertentu saja kayak huruf judul blog, judul posting blog. Bahkan ada bisa juga memakai beberapa huruf dari google untuk dipakai semua di blogmu. Tinggal copy aja embed code google font yang lain dan di paste di Header.php

Beres dah.. Selamat mencoba!

NB: untuk hosting blogspot, caranya sama aja. Malah lebih gampang karena tinggal masuk di edit html dan paste-lah kode-kode ajaib itu pada tempatnya masing-masing.

——-

Kalau ada yang bingung, jangan malu bertanya di kolom komentar. Lalu doakan saya supaya saya bisa menjawab pertanyaan sodara-sodari semua. Aamiin..

Oh iya, saya sudah makek lo, judul postingan ini saya memakai jenis Yanone Kaffeesatz. Bagus yak!

Muhammad Ali Mudzofar a.k.a ndop. Punya motto hidup: Think less feel more. Lebih banyak merasa, lebih banyak manfaatnya. Lebih banyak mikir? Cepet tua loh! #eh



42 Comments Add Yours ↓

The upper is the most recent comment

  1. Wew…
    Aku pasti cocok karo font pilihane Mas Ndop sing judul postingan kuwi…
    Meh njajal…
    .-= marsudiyanto´s last blog ..Ibuk Saya Ibuk Enjoy Aja =-.

  2. Infone Mas Ndop jan Mak Nyusssssssss
    .-= marsudiyanto´s last blog ..Ibuk Saya Ibuk Enjoy Aja =-.

  3. Sekalian takon:
    Kuwi pengaruh pas loading opo hora??????
    .-= marsudiyanto´s last blog ..Ibuk Saya Ibuk Enjoy Aja =-.

    • @marsudiyanto: nggih pengaruh pak, tapi namung sedikit aja loadingnya, khan hosting google tidak diragukan kecepatannya pak, hehehehe…

  4. makasih infonya…
    .-= camera´s last blog ..Storing Digital Photos =-.

  5. Mksh infox

  6. kalao di blogspot bisa ga ya sob??
    .-= hendro-prayitno´s last blog ..Mengenal Definisi Electronic Commerce(e-commerce) =-.

  7. oh jadi begitu tho… asik dong lebih bervariasi :fastreading:

  8. wo0… :tepuk:
    iku gae mariasi teks thok mas…
    ra onok liyane…

  9. berarti font yang di komputer gak ngaruh ya walaupun di PC gak ada jenisnya…
    kayak yang kemaren lusa itu.. :rock:
    .-= retnet´s last blog ..cara install package .deb/.rpm/.tgz/.arch di slitaz =-.

  10. :tepuk: sip…iso dinggo tambah referensi ndanddani blog ben tambah byutiful…

  11. duh, lagi-lagi begonya saya mas. .. :pukul:
    dicoba dulu ah
    .-= DikMa´s last blog ..Wget by Proxy =-.

  12. @hendro-prayitno: bisa, dibaca lagi mas…

    @budiono: waduh suwun wis berkunjung di tengah2 kesibukan njenengan mas Bud..

    @mubaroki: Ngganti font google ben tambah keren..

    @retnet: He-eh… njenengan raperlu download font.. langsung muncul dewe..

    @hersu: Sip, ditunggu percobaannya..

    @DikMa: Sip sip.. :ayoh:

  13. joe #

    coba dulu, baru beli…
    .-= joe´s last blog ..Nicolaus Copernicus Dimakamkan Kembali Setelah 467 Tahun =-.

  14. jek rak mudeng mas,,
    .-= arafi´s last blog ..Download, Windows XP Themes, Zune Desktop dan Royale Theme =-.

  15. weh font baru biar ga satandart terus ni

  16. waduh…
    pengen make juga ..

    sayang di aku gak bisa …

  17. nek sing buka koneksine mendrip2, malih dadi abot ra pak ndop?

  18. wah boleh tuh,, nyoba ah..

  19. @joe: haha.. gik sopo sing ngedol to mas?

    @arafi: ra diwoco brati..

    @richo: anda benar..

    @andtheree: isooo….

    @Iwan: lha koneksiku lak mendrip2…

    @matdaus: siap ditunggu hasilnya..

  20. JUN #

    bisa tak dipasang di blogspot? :glundung:

  21. wewww…ra mudeng aku…

  22. jika berkenan mampir di blog baruku yo mas. . .dudug blog seo meneh kok. . :wink: :wink:
    .-= Flexi Final Party School Contest´s last blog ..Perihal Dibuatnya Blog Ini =-.

  23. waduh. . podo

    ramudenga aku yoan,kanggone opo mass. . .

  24. @JUN: bisa kang, mbok dibaca lagi..

    @arix: lha ra diwoco..

    @Flexi Final Party School Contest: hehe…

    @Dian Ribut: walah…

  25. waduuuhhh kl style.css yg h1 itu di pasti dmn? d bawah,, atau d sampingnya sih??ko saya gagal mulu yah?
    thanks

    • urutannya khan sama, gini aja deh…
      h1 {
      font-family: ……;
      font-size: …. px;
      }

      sama aja khan dengan ditulis begini
      h1 {font-family: ……; font-size: …. px;}

  26. Nanti saja saya coba begitu ada waktu yang luang. :hihi:
    .-= imcw´s last blog ..Tips Mengatasi Batu Ginjal =-.

  27. mudeng ra mudeng sing penting ngumpul……
    ayo do ngumpul …………..
    belajar komputer dan internet punya postingan keren nih: Kesehatan Mata Saat Berinternet

  28. Menarik nih infonya sop

  29. namu2..mas, :cool: :cool: kok rada bingungi ya?? utak-utek HTML
    Fajar punya postingan keren nih: Kutukan JABULANI World Cup 2010 South Africa

  30. ferdi #

    mas, kalo font saya yang mau ga ada di google font gimana caranya ?
    saya mau pake font BankGothic Lt BT

  31. ferdi #

    yang saya maksud itu bukan di blog mas, heehe
    tapi di website buatan sendiri.. itu gimana carany yah ?? heehe

    • hihihihi… aku nggak ngerti, yang aku ngerti ya pakek wordpress mas… maaf.. hehehe…

  32. wuih, ajip ajip iso dipraktekno ki :sip: :sip:

  33. joe #

    wah kalau yang ini sudah pasti asyik, btw bisa gak diaplikasikan di blogspot bro…
    joe punya postingan keren nih: Yoyo- Permainan Sepanjang Masa

    • bisa bisa… sama aja kok… tuh sudah aku tambahkan di akhir kalimat… *baca pelan pelan ya*

  34. Lak blogspot pye?



Leave a Reply

Your email address will not be published. Required fields are marked *

Tampilkan Postingan Kerenmu
:wink: :twisted: :tidur: :tepuk: :takut: :taktahu: :ssst: :siul: :sip: :shock: :sad: :rolleyes: :rock: :pukul: :pertamax: :oops: :notme: :ngiler: :neutral: :muntah: :mrgreen: :mataduitan: :malaikat: :mad: :lol: :kiss: :kabur: :hug: :hipnotis: :hihi: :glundung: :fastreading: :evil: :eek: :doh: :doa: :dance: :cry: :cool: :ayoh: :angop: :ampun: :P :D :???: :-)


%d bloggers like this: