Cara Membuat Font Sendiri di Blog

Font Untuk Blog

• Pertama  Mendapatkan  Font-Face Kit. 

1. Buka alamat ini http://www.fontsquirrel.com/fontface/generator.
2. Silahkan  Add Font yang anda Inginkan upload tunggu sampai proses upload selesaià lalu Download You KIT !

d

• Kedua Upload ke Hosting

1.       Silahkan Extrak dulu  file yang sudah di download  tadi, sebenanya banyak file didalamnya  tapi yang kita butuhkan hanyalah  file  yang  berekstension .woff.

2.       Silahkan upload  file  yang  berekstension .woff misalnya  gloriahallelujah-webfont.woff  kedalam hosting  google.

Bila belum punya akun silahkan create dulu  :     https://sites.google.com/site/sites/system/app/pages/meta/dashboard/create-new-site

Bila Sudah Punya silahkan di sini saja : https://sites.google.com

3.       Saya asumsikan sudah punya akun dari site.goggle.com, kemudian tinggal klik gambar Kretas ada tooltips-nya “Create New Page (C)”  di sebelah kanan atas.

4.       Silahkan Create page, Pertama isikan nama page anda, kemudian Create ada disebelah atas berwarna merah 

5.       Silahkan upload file  yang tadi telah di download !     
  - Caranya ketik Add File

        - Cari File yang  telah didownload dan di Extract Cukup kita upload yang berekstensi .woff lihat digambar!.

 - Maka upload, Jika sudah ber hasil di Upload. Gambarnya akan seperti dibawah, Klik kanan pada gambar panah kebawah (download) lalu Copy (Salin alamat tautan).

Contoh hasilnya : https://sites.google.com/site/derisenjaya/percobaan/gloriahallelujah-webfont.woff?attredirects=0&d=1 . Tapi Kita edit saja Linknya jadi seperti ini : https://sites.google.com/site/derisenjaya/percobaan/gloriahallelujah-webfont.woff

·         Penerapan Pada CSS nya

1.       Silahkan masuk ke blogger anda, seperti biasa Template -  Edit Html.

2.       Cari Kode   </body> lalu letakan script ini tepat di atasnya

<style>
        /* ------tx.to:deris10.blogspot.com----- */
@font-face {
  font-family:NAMA-FONT;
  font-style: normal;
  font-weight: 400;
  src: local(NAMA-FONT), url(https://sites.google.com/site/derisenjaya/percobaan/gloriahallelujah-webfont.woff) format(woff);
}
h1 { font-family: NAMA-FONT; color: Black; }
body {font-family:" NAMA-FONT "}
</style>

-          Anda bisa menambahkan h1 , h2, h3, h4, h5 dan h6.

-          Anda bisa menghapus Code ini
h1 { font-family: NAMA-FONT; color: Black; }
body {font-family:" NAMA-FONT "}

-          Jika ingin hanya postingan saja yang berubah fontnya  cari .Post-Body lihat Font-Familynya  ganti yang lama menjadi font family yang kita buat.

C      Contoh (-LAMA-) :
.post-body {

font-size: 14px;

font-family: 'Open Sans', 'Helvetica Neue', Arial, Tahoma, sans-serif;

padding-left: 12px;

padding-right: 12px;

}

JADI (-BARU-)

-          .post-body {

font-size: 14px;

font-family: ‘ NAMA-FONT’;

padding-left: 12px;

padding-right: 12px;

}

PERHATIAN!

Silahkan bertanya di komentar bila kurang jelas!
Anda Bisa Download file(.doc) atau lihat demonya dibawah.

• Demo
• Download

Terima-kasih.!

@deris_senjaya