Cara Upload dan Menggunakan Font Sendiri Di Blogger

Cara Upload dan Menggunakan Font Sendiri Di Blogger

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 kamu perlu mengunggah font dari PC kamu ke situs hosting web (kalau kamu memilikinya), jika tidak kamu bisa menggunakan jasa dari Github. Silakan buka dan upload font kamu disana.

Jika kamu belum pernah mencoba Github sebelumnya silakan baca posting saya sebelumnya tentang Cara Mendaftar di GitHub Social Coding dan untuk cara mengunggah font di Github kamu 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.

Setelah kamu mengunggah font di Github salin URL dari file font kamu kemudian buka Statically. Pada situs tersebut masukkan pada kotak teks yang ada pada Statically dan salin alamat CDN yang ada di bagian bawahnya.

Setelah itu perhatikan kode dibawah ini, URL hosting dari font kamu 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 kamu 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 kamu 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.statically.io/gh/maringngerrang/hadi/49350c50/Font.ttf');
  src: url('https://cdn.statically.io/gh/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 kamu ketahui bahwa jenis font tersebut berbeda-beda dikarenakan jenis browser tertentu lebih mendukung jenis font tertentu. Untuk lebih jelasnya perhatikan tabel berikut ini.

Cara Upload dan Menggunakan Font Sendiri Di Blogger

Jadi ada baiknya jika kamu 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 kamu tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau bisa juga melalui halaman contact blog ini. Terima kasih dan sampai jumpa!

Related Posts

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel