Wednesday, March 15, 2017

Cara Upload & Menggunakan Font Sendiri Di Blogger

Cara Upload & Menggunakan Font Sendiri Di Blogger

Assalamu'alaikum warohmatullahi wabarokatuh. Dalam posting kali ini saya akan membahas tentang bagaimana cara menggunakan font sendiri di blogger. Pada dasarnya Google telah menyediakan berbagai macam gaya huruf atau font yang dapat digunakan di web/blog secara cuma-cuma. Namun belum tentu font yang tersedia sesuai dengan keingin hati kita, bisa jadi kita menginginkan font sendiri yang tampilannya lebih sesuai.

Lantas kira-kira bagaimana kita dapat menggunakan font sendiri di halaman web/blog!? Sederhananya seperti ini, kita perlu mengunggah atau upload font dari PC ke tempat hosting tertentu kemudian menggunakan URL font tersebut di web/blog yang di inginkan. Nah, untuk lebih jelas langsung saja berikut ini caranya.

Pertama-tama sobat perlu mengunggah font dari PC sobat ke situs hosting web (kalau sobat memilikinya), jika tidak sobat bisa menggunakan jasa dari Github. Silakan buka dan upload font sobat disana.

Jika sobat belum pernah mencoba Github sebelumnya silakan baca posting saya sebelumnya tentang Cara Mendaftar di GitHub Social Coding dan untuk cara mengunggah font di Github sobat bisa membaca Cara Terbaru Hosting Kode CSS/JavaScript ke Github (caranya kurang lebih sama) yang saya tuliskan dengan cara sederhana dan dengan bahasa yang mudah dipahami.

Selanjutnya setelah sobat mengunggah font di Github salin URL dari file font sobat kemudian convert di RawGit.com untuk mendapatkan link hostingnya.

Cara Upload & Menggunakan Font Sendiri Di Blogger

Setelah itu perhatikan kode dibawah ini, URL hosting dari font sobat tadi akan digunakan pada kode dibawah. Kode MyWebFont dibawah adalah kode untuk nama yang digunakan font tersebut pada kode CSS, seperti font-family: 'MyWebFont';. Kemudian perhatikan bagian yang ditandai sebelum url, bagian tersebut diganti dengan URL hosting yang sebelumnya telah sobat peroleh.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Jika sobat hanya menggunakan satu jenis font (misal ttf saja) maka silakan hapus empat URL lain pada src kedua dan ganti URL pada src pertama, jadinya seperti berikut ini (bagian yang ditandai dibawah haruslah sama).

@font-face {
  font-family: 'MyWebFont';
  src: url('https://cdn.rawgit.com/maringngerrang/hadi/49350c50/Font.ttf');
  src: url('https://cdn.rawgit.com/maringngerrang/hadi/49350c50/Font.ttf')  format('truetype');
}

/* Kode utk gunakan font (misal utk body)*/
body {
  font-family: 'MyWebFont', sans-serif;
}

Kemudian perhatikan, mengapa ada beberapa jenis font yang disertakan, seperti *.eot, *.woff, *.ttf dll!? Nah perlu sobat ketahui bahwa jenis font tersebut berbeda-beda dikarenakan jenis browser tertentu lebih mendukung jenis font tertentu. Untuk lebih jelasnya perhatikan tabel berikut ini.

Font FormatChromeInternet Explorer/EdgeFirefoxSafariOpera
TTF/OTF4,09,0*3,53,110,0
WOFF5,09,03,65,111,1
WOFF236,0Tidak didukung35,0*Tidak didukung26,0
SVG4,0Tidak didukungTidak didukung3,29,0
EOTTidak didukung6,0Tidak didukungTidak didukungTidak didukung
*Edge dan IE: Font hanya bekerja ketika "terinstall".
*Firefox: Dimatikan secara default, tapi dapat dinyalakan (untuk WOFF2 dengan flag).


Jadi ada baiknya jika sobat ingin menggunakan custom font, gunakan yang berekstensi WOFF, atau biar lebih pasti gunakan semua jenis font, gunakan font converter untuk mengubah jenis font yang satu ke jenis yang lain, kemudian unggah dengan cara yang sama lalu masukkan kedalam kode CSS yang pertama.

Mungkin cukup sekian dari saya, semoga bisa bermanfaat, kalau ada yang ingin sobat tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau bisa juga melalui halaman contact blog ini. Terima kasih, assalamu'alaikum warohmatullahi wabarokatuh.

Sumber :
https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
https://css-tricks.com/snippets/css/using-font-face/
Disqus Comments