Mengganti Font Blog dengan Google Web Fonts

Kita dapat mengganti font di blog dengan menggunakan Google web fonts. Google fonts gratis digunakan dan fonts dapat di download serta bebas untuk digunakan untuk keperluan komersil ataupun personal. Google webfonts memiliki 617 family fonts (sampai dengan posting ini dibuat) dan akan terus bertambah. Cara menggunakan font google tidak terlalu rumit dan perlu diikuti step by step jangan ada yang terlewat. Penempatan dan script yang digunakan berbeda untuk di platform blogspot/blogger.com atau wordpress (selfhosted).

Berikut saya buat tutorial bagaimana mengganti font yang sudah ada pada blogspot/blogger.com, sementara yang wordpress bersabar ya karena saya akan buat tutorialnya nanti hehehe.

Cara untuk merubah font di blogspot dengan Google Webfonts

Masuk ke google font (http://google.com/webfonts), disini saya akan mengambil contoh font yang akan saya gunakan dalam desain, yaitu  :

Untuk Header ( Sacramento )

Untuk Post Body ( Muli )

Untuk Post Title ( Julius Sans One )

Untuk Judul Widget (ABeeZee)

Silahkan bereksplorasi sepuas-puasnya dengan memilih banyaknya font yang dimiliki oleh google webfonts dengan memfilter kategori font seperti Serif, Sans-serif, Display, Handwriting atau juga berdasarkan script yaitu tulisan khusus yang dimiliki suatu negara seperti vietnam, greek/yunani dan lain-lain.

Kumpulkan font satu persatu, dengan cara search di box yang terdapat di bawah jumlah family, kemudian klik add to collection. Ulangi tahap ini sampai menemukan 4 font yang sudah disiapkan. Penggunaan font terlalu banyak akan membuat load blog/halaman menjadi berat, maka gunakan 2-4 fonts maksimal agar tidak terlalu lama font keluar.

Pilih font google webfonts

Setelah semua terkumpul, klik USE untuk mulai menggunakan font yang kita pilih

google font

Kemudian halaman akan dibawa ke setting font dan cara penggunaan font di website. Bagian halaman setting ini terbagi 4, yaitu :

  • Bagian 1 : berisi nama-nama font yang sudah kita pilih. Untuk menggunakan sesuai ketebalan, jenis (normal/italic) silahkan centang sesuai keperluan. Centanglah sesuai screencshot saya dibawah ini :

  • Bagian 2 : berisi set karakter yang ingin dipakai. Karakter set ini maksudnya adalah efek-efek terhadap font dimana kita tidak menggunakan sehingga gunakanlah Latin (sudah default).
  • Bagian 3 : berisi kode-kode yang harus disematkan di “kepala” / head dari sebuah website. Terdiri dari 3 tab yaitu Standard, @import dan Javascript

  • Bagian 4 : Merupakan kode css font yang kita gunakan untuk mengganti font yang sudah ada. Font family terdiri dari beberapa font, yang artinya jika server google sedang down, atau internet sedang lambat maka font yang dibelakang akan digunakan sebagai pengganti. Misalnya font-family sacramento akan di ganti (sementara) cursive apabila sacramento belum bisa ter-load dengan baik dikarenakan jaringan internet atau server. Jadi jangan khawatir blog tidak mempunyai font hehehe. Font pengganti ini adalah font standar yang bisa dibaca oleh semua browser dan cepat di load.

google font

Untuk menyematkan font di blogspot gunakan pilihan Javascript, sedangkan untuk wordpress gunakan import font.

Cara menyematkan font yang sudah dipilih adalah sebagai berikut :

Copy kode yang ada pada tab Javascript :

https://gist.github.com/shintaries/be58a511236911e3b9fd.js

Setelah copy, bisa di paste di notepad terlebih dahulu atau langsung di paste ke kode HTML Template.

Langkah berikutnya adalah paste di HTML template, caranya adalah :

Kembali ke dashboard -> pilih blog -> template -> edit HTML

Berikutnya Paste kode tersebut di bawah tag <head> , head berada di bagian atas baris ke – 6 kemudian simpan template (kotak oranye)

Setelah di save maka halaman akan kembali ke halaman template, kemudian klik sesuaikan untuk menambahkan kode CSS Font.

Sampailah kita pada perancang template blogger. Untuk mengganti css kode dipasang melalui tingkat lanjut -> tambahkan css (terletak di bagian paling bawah)

Masukkan data-data css seperti contoh berikut :

Contoh CSS untuk mengganti font Header :

https://gist.github.com/shintaries/f5e2a0f365a06ba3de4a.js

Contoh CSS untuk mengganti font body :

https://gist.github.com/shintaries/17b59934594658f38bfe.js

Contoh CSS untuk mengganti font Post Title (Judul posting) :

https://gist.github.com/shintaries/1f79e758af2e0696d028.js

Contoh CSS untuk mengganti font widget :

https://gist.github.com/shintaries/4e82cac197cc78f2afc8.js

Setelah selesai semua font diganti, jangan lupa untuk klik terapkan template dan lihat hasilnya ^^. Selamat mencoba.

 

Feel free untuk men-share dan tidak meng-copy artikel saya, thank youu 😀

Advertisements

38 thoughts on “Mengganti Font Blog dengan Google Web Fonts

  1. Pingback: Membuat Header Pada Blog Menggunakan Pixlr
  2. Pingback: Mengganti Font Blog Untuk Wordpress dengan Google Webfonts
  3. Pingback: Google Font Pilihan (Bag 2)
  4. makasih trik nya sist,tapi nggak berhasil nih di header dan judul post blog saya…
    karena apa ya?

    kunjungan balik ya sis 🙂

    1. haluu andy 🙂

      untuk header di blog andy berbeda ternyata kodenya :

      #kepala-kanan h1.title {
      font: 24px georgia, serif;
      font-weight: bold;
      color: #003164;
      text-align: center;
      margin: 0px;
      padding: 6px 0 8px;
      }

      silahkan ganti di bagian fontnya ya 🙂

      dan judul post pakai muli bukan? saya inspeksi sudah oke judul post blognya ^^

      1. aduh blum bisa juga nih sist,udah ganti font header nya jadi sacremonto,
        malah jadi aneh gitu..

        apa perlu tambah css juga ya??

      2. andy,

        coba css ini yaa :

        p.title {
        font-family:sacramento, serif;
        font-size:26px;
        font-style:normal;
        font-variant:normal;
        font-weight:normal;
        line-height:normal;
        text-align:center;
        }

  5. mbak, aku udah nyoba nih. tp pas udah di save, kok ga muncul font yg aku pilih ya? ato emg connectionku yg jelek? btw, terimakasih tutorialnya sangat membantu ^^

    1. halu lya 🙂
      makasih sudah berkunjung ^^
      kayaknya sudah berhasil, semuanya sudah ganti fontnya.
      social medianya bisa digeser diatas translate, karena cuma pakai 4 aja
      untuk tanggalnya bisa diutak atik warna berdasarkan template designernya ^^

  6. Pingback: Desain Blog Simple Untuk Blogspot [DIY]
  7. hi mbak Shinta, salam kenal 🙂 thanks buat tutorialnya! btw, kok font postingan yang udah ada dengan yang baru dipublikasikan jadi beda?? apa ada yang salah? thx 🙂

  8. dear mba shinta,
    saya jadi sering main nih ke blog mba untuk nimba ilmu (sumur kali ditimba :D) untuk header, post body dan widget berhasil tapi kok title post ngga ya mba? trus untuk post body kok jadinya miring ya mba? kalau saya suatu saat mau ganti dengan font2 yg lain bagaimana nentuin CSS nya? makasih ya mba atas jawabannya ^^

  9. permisi tante , kalo untuk blog saya css header nya apa ya ?
    please respon
    dari kemaren gitu terus padahal udah ngikutin cara tante
    terima kasih

    1. Haii regyna,

      Sayangnya template yang regyna pakai bukan bawaan dari blogspot. Cara ini berlaku untuk template yang belum di modifikasi alias default nya blogspot ^^. Karena template yang regyna pakai hasil download jadi ngga bisa diganti lagi, kecuali utak atik di dalem HTML nya ^^

      1. Mhmm…ini dia jawabannya kenapa sy gagal terus, ternyata hanya berlaku untuk templte asli google, bukan hasil donlotan 😥

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s