Cara Upload Dan Memakai Font Sendiri Di Blogger
Dalam posting kali ini aku akan membahas wacana bagaimana cara memakai font sendiri di blogger. Pada dasarnya Google telah menyediakan banyak sekali macam gaya abjad atau font yang sanggup dipakai di web/blog secara cuma-cuma. Namun belum tentu font yang tersedia sesuai dengan keingin hati kita, sanggup jadi kita menginginkan font sendiri yang tampilannya lebih sesuai.
Lantas kira-kira bagaimana kita sanggup memakai font sendiri di halaman web/blog!? Sederhananya ibarat ini, kita perlu mengunggah atau upload font dari PC ke daerah hosting tertentu kemudian memakai URL font tersebut di web/blog yang di inginkan. Nah, untuk lebih terang pribadi saja berikut ini caranya.
Pertama-tama sahabat perlu mengunggah font dari PC sahabat ke situs hosting web (kalau sahabat memilikinya), jikalau tidak sahabat sanggup memakai jasa dari Github. Silakan buka dan upload font sahabat disana.
Jika sahabat belum pernah mencoba Github sebelumnya silakan baca posting aku sebelumnya wacana Cara Mendaftar di GitHub Social Coding dan untuk cara mengunggah font di Github sahabat sanggup membaca Cara Terbaru Hosting Kode CSS/JavaScript ke Github (caranya kurang lebih sama) yang aku tuliskan dengan cara sederhana dan dengan bahasa yang gampang dipahami.
Selanjutnya sesudah sahabat mengunggah font di Github salin URL dari file font sahabat kemudian convert di RawGit.com untuk mendapat link hostingnya.
Setelah itu perhatikan isyarat dibawah ini, URL hosting dari font sahabat tadi akan dipakai pada isyarat dibawah. Kode
MyWebFont dibawah yakni isyarat untuk nama yang dipakai font tersebut pada isyarat CSS, ibarat font-family: 'MyWebFont';. Kemudian perhatikan bab yang ditandai sebelum url, bab tersebut diganti dengan URL hosting yang sebelumnya telah sahabat 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 sahabat hanya memakai satu jenis font (misal ttf saja) maka silakan hapus empat URL lain pada src kedua dan ganti URL pada src pertama, akibatnya ibarat 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, ibarat *.eot, *.woff, *.ttf dll!? Nah perlu sahabat ketahui bahwa jenis font tersebut berbeda-beda dikarenakan jenis browser tertentu lebih mendukung jenis font tertentu. Untuk lebih jelasnya perhatikan tabel berikut ini.
| Font Format | Chrome | Internet Explorer/Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| TTF/OTF | 4,0 | 9,0* | 3,5 | 3,1 | 10,0 |
| WOFF | 5,0 | 9,0 | 3,6 | 5,1 | 11,1 |
| WOFF2 | 36,0 | Tidak didukung | 35,0* | Tidak didukung | 26,0 |
| SVG | 4,0 | Tidak didukung | Tidak didukung | 3,2 | 9,0 |
| EOT | Tidak didukung | 6,0 | Tidak didukung | Tidak didukung | Tidak didukung |
*Edge dan IE: Font hanya bekerja saat "terinstall".
*Firefox: Dimatikan secara default, tapi sanggup dinyalakan (untuk WOFF2 dengan flag).Kaprikornus ada baiknya jikalau sahabat ingin memakai custom font, gunakan yang berekstensi WOFF, atau semoga lebih niscaya gunakan semua jenis font, gunakan font converter untuk mengubah jenis font yang satu ke jenis yang lain, kemudian unggah dengan cara yang sama kemudian masukkan kedalam isyarat CSS yang pertama.
Mungkin cukup sekian dari saya, semoga sanggup bermanfaat, kalau ada yang ingin sahabat tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau sanggup juga melalui halaman contact blog ini. Terima kasih.
Sumber :
https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
https://css-tricks.com/snippets/css/using-font-face/
https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
https://css-tricks.com/snippets/css/using-font-face/
