Cara Menggunakan Font Dari Komputer Di Blog

FontCara Menggunakan Font Dari Komputer Di Blog - Sebenarnya postingan kali ini adalah request dari salah satu teman blogger kita. Yah, namanya tidak usah disebutkan, palingan entar juga nongol di kotak komentar :)

Mungkin dari kalian sudah tau bagaimana cara menambahkan font di blog dengan Google Font. Tetapi bagaimana jika anda belum puas dengan font yang sudah tersedia di layanan font gratis dari google itu? Nah disinilah anda membutuhkan cara ini. Mungkin kalian punya font yang keren-keren di komputer tapi tidak tau bagaimana cara menggunakanya di blog. Kalo mau tau caranya simak tutorial berikut ini.

Langkah 1 : Cara Mendapatkan @font-face Kit

1. Buka http://www.fontsquirrel.com/fontface/generator

2. Pilih Add Fonts
3. Pilih Font yang ingin digunakan
4. Jika sudah menemukan font yang diinginkan pilih Open

Cara Menggunakan Font Dari Komputer Di Blog

5. Tunggu prosses upload font, lalu pilih Download Your Kit

Cara Menggunakan Font Dari Komputer Di Blog

6. Tunggu prosses loading pembuatan Kit-nya, jika sudah selesai akan langsung terdownload

Langkah 2 : Cara Upload @font-face Kit ke Hosting


1. Extract file yang sudah terdownload

2. Buka Google Site lalu klik Create Site
3. Isikan Tittle Site pada form yang tersedia, lalu klik Buat


Cara Menggunakan Font Dari Komputer Di Blog

4. Pilih Tab Create Page / Buat Laman pada pojok kanan atas site yang telah kamu buat tadi



Cara Menggunakan Font Dari Komputer Di Blog

5. Beri Judul Halaman, lalu klik Buat

6. Pada laman baru kamu tadi klik Tambahkan File, pilih file type EOT, TTF, SVG, WOFF, dan CCS yang telah di extract, lalu klik Open


Cara Menggunakan Font Dari Komputer Di Blog

7. Salin URL file yang bernama stylesheet.css pada link unduh

Cara Menggunakan Font Dari Komputer Di Blog
Cara Menggunakan Font Dari Komputer Di Blog
https://sites.google.com/site/adobecaslonpro/blog-mas-hanif/stylesheet.css?attredirects=0&d=1
8. Letakkan kode css itu pada template kamu, dengan menghilangkan kode yang berwarna merah

Langkah 3 : Cara Menambahkan Kode CSS Ke Template


Letakkan kode CSS dibawah kode ]]></b:skin>, Contohnya begini :

]]></b:skin><link rel='stylesheet' href='https://sites.google.com/site/adobecaslonpro/blog-mas-hanif/stylesheet.css' type='text/css'/>
Langkah 4 : Cara Menggunakan Font


Sekarang setelah selesai melakukan langkah langkah sebelumnya anda tinggal memakai font itu. Contohnya seperti di bawah ini :
#outer-wrapper {margin:0 auto;padding:0px;text-align:$startSide;font-family:"adobe_caslon_proregular";font-size:13px;margin:10px auto;}
#header { max-width: 450px; text-align: left; color:#fff;float: left; font-weight: 700; font-family: adobe_caslon_proregular;}
Catatan : Untuk mendapat nama font anda bisa membuka file yang bernama stylesheet.css dan menemukan kede seperti berikut ini :
@font-face { font-family: 'adobe_caslon_proregular';
Huruf warna merah adalah nama font anda.

Sekian sedikit tutorial dari saya, semoga tutorial ini bisa bermanfaat bagi teman-teman blogger. Baca juga artikel tentang Cara Menambah dan Mengganti Jenis Font di Blog.

Anda sedang membaca Artikel tentang Cara Menggunakan Font Dari Komputer Di Blog dan anda bisa menemukan Artikel Cara Menggunakan Font Dari Komputer Di Blog ini dengan URL http://blogmashanif.blogspot.com/2013/01/cara-menggunakan-font-dari-komputer-di.html. Diharapkan agar tidak melakukan copy paste terhadap Artikel Cara Menggunakan Font Dari Komputer Di Blog ini, untuk pengutipan harus meletakkan link Cara Menggunakan Font Dari Komputer Di Blog sebagai sumbernya.

Enter your email address:

readers

53 komentar:

  1. nice info bang , ,izin mencoba :)

    BalasHapus
  2. Mantap sob.. izin nyimak dulu sob.

    BalasHapus
  3. wah keren nih blog nya mas hanif..

    BalasHapus
  4. trmksi sobat info nya sangat mantap mas

    BalasHapus
  5. mkasi nih sobat,,udah berbagi..

    BalasHapus
  6. wih keren nih sob, boleh di coba nih tipsnya...? saya belum pernah nih sob, makasih ya info dan tipsnya...?

    BalasHapus
  7. Mampir berkunjung & ijin nyimak infonya sekalian menunaikan tugas 69 di sini..

    BalasHapus
  8. ane bertahan aja deh sama font bawaan template....xixiiiii

    BalasHapus
  9. nice info sob....ijin nyimak dlu sob :D

    kunjungn blik sukses

    BalasHapus
  10. Pengetahuan yang sangat bermanfaat nih sob buat blogger termasuk saya,thanks sudah berbagi

    BalasHapus
  11. keren gan,kapan kapan ane cobain

    BalasHapus
  12. mantap tutorialnya, sayang font di PC saya kebanyakan font grafity, maklum seneng utak-atik foto, mungkin bisa saya coba nanti,
    terima kasih.

    BalasHapus
    Balasan
    1. Kan bake font grafity juga bisa sob :)

      Hapus
  13. ini yg ku cari sob..
    bermanfaat bgt.. thnk ..

    BalasHapus
  14. Blognya rame banget bang :O

    BalasHapus
    Balasan
    1. Yah alhamdulillah aja sob, ini berkat temen-temen blogger yang selau mau bantu saya :)

      Hapus
  15. artikel yang bermanfaat sob. tips yang luar biasa nih.

    thanks sob, nanti saya praktekan.

    BalasHapus
  16. sebenarnya sy juga pengen menggunakan font yg dari leppiku. tapi mending sy pakai font yg ada aja dah

    BalasHapus
  17. mantap banged gan_____di tunggu kunjungannya balik____sukses selalu buat mas hanif__salam blogger

    BalasHapus
  18. Sob ijin posting sama kayak kamu ya... Ada backlink ya kok.

    BalasHapus
  19. Kunjungan Rutin Sobb, Maaf baru Berkunjung Soalnya Lagi Sibuk Nyari PKL

    Jangan Lupa Kunjugan Baliknya SOb...

    BalasHapus
  20. sedikit ribet tp keren juga ,..nambahin variasi sob :)

    BalasHapus
  21. widiih keren soob .. .. hadir cuma untuk ngabsen .

    ditunggu kunjungan baliknya :D

    BalasHapus
  22. Makasih infonya
    Saya malah baru tau sekarang ini.. :)

    Berkunjung dan menyimak....
    Setelah lama tak jumpa... ^_^

    BalasHapus
  23. sdh di follback sobat ats nm zhall_avenged. salam kenal jg.. :)

    BalasHapus
  24. Tp bikin berat loading blog gk nih?

    BalasHapus
  25. Keren. Tp ribet caranya ^^

    BalasHapus
  26. Manteb gan, ane tahu trik ini pas menggunakan tema wordpress yg tidak didukung google webfonts :)

    BalasHapus
  27. tambah lagi nih pengetahuan ane makasih gan, ane tunggu kunjungan baliknya

    BalasHapus
  28. follow aku dong nti aku jga follow mas
    oiya tukeran baner yu
    blog aku ni
    http://vinafreedownload.blogspot.com/

    BalasHapus
  29. ternyata caranya cukup mudah untuk menganti jenis font pada blog kita
    terima kaish penlajasannya

    BalasHapus
  30. mantab Infonya Gan langsung di coba ia Gan. :)

    BalasHapus
  31. lumayan rumit juga langkah-langkahnya ya sob
    oke makasih ilmunya sob,saya pelajari dulu nih.
    salam sukses sob

    BalasHapus
  32. tutornya mantep banget sob.. makasih dah share..

    BalasHapus
  33. thanks atas infonya ..

    ditunggu kunjungan baliknya sob :D

    BalasHapus
  34. mas hanif mang jagonya deh soal ginian... nyozz bgt hehe :)

    BalasHapus
  35. tanks sob infonya, kpn2 saya coba

    BalasHapus
  36. Salam Blogger
    Nice Blog, Nice info...
    visit me back donk : whatskpop.blogspot.com
    sy buat blog itu krn tugas kuliah
    saling follow donk, sekalian ma social medianya jg..

    Plisss..thx

    BalasHapus
  37. Terimakasih infonya mas :) kunbal yaa :)

    BalasHapus
  38. wahh keren gan tips nya :D tapi lumayan ribet ya, hehehe
    sudah ane followback gan :D #238

    from : http://sharing-something-useful.blogspot.com/

    BalasHapus
  39. manteeb soob .. .. diutunggu kunjungan baliknya :D

    BalasHapus
  40. Mantabs Mas Bro , Artikel keren banget dan berguna sekali nih . langsung dicoba nih Bro , Thanks Info nya

    BalasHapus
  41. saya lebih ngerti klo pake gambar gini... makasih mas...

    BalasHapus
  42. wah infonya bagus banget nih. kapan kapan nyoba ah

    BalasHapus
  43. masih belum jelas mas , yang langkah memakai font itu cari code nya atau ditambah di html nya?

    BalasHapus

Berkomentarlah dengan sopan dan bijak. Dilarang berkomentar dengan menyertakan link hidup atau unsur yang berbau spam. Jika ingin minta followback silahkan dan jangan sungkan, karena saya juga senang jika teman saya bertambah.