Cara Upload & Menggunakan Font Sendiri Di Blogger
Friday, November 16, 20180 Comments
Cara Upload & Menggunakan Font Sendiri Di Blogger

Cara Upload & Menggunakan Font Sendiri Di Blogger

  • Eka Awaludin

  • A dreamer who trying to loves writing and blogwalking. Man of nature. The wrong man in the wrong time. Going with the flow. Penggemar CSS dan HTML.
Dulu waktu belajar bikin website sendiri dan mencoba beberapa situs hosting gratis aku sempat belajar cara menambahkan font sendiri di website kita dengan menggunakan CSS. Dan sekarang aku lupa lagi jadi nyari tutorialnya di Google dan ketemu persis seperti yang dulu aku inget.

Pemasangan
Untuk pemasangan font di Blogger pertama upload font ke Github dan dapatkan link CDN nya melalui Staticaly. Aku mengupload font Desyrel dari Fontsquirell ke GitHub dan menggunakan dua jenis font saja yaitu yang berformat WOFF2 dan WOFF. Kode CSS nya seperti berikut ini.
@font-face {
    font-family: 'desyrelregular';
    src: url('https://cdn.staticaly.com/gh/ekaawaludin/qolorful/01c2379b/font/desyrel-webfont.woff2') format('woff2'),
         url('https://cdn.staticaly.com/gh/ekaawaludin/qolorful/01c2379b/font/desyrel-webfont.woff') format('woff');
}
Kemudian tambahkan kode CSS berikut ini di bagian style blog kita.
.desyrel {
    font-family: 'desyrelregular';
}
Contoh pemanggilan font tersebut bisa dilihat di paragraf berikut ini.
Lorem ipsum dolor sit amet, fabulas qualisque sea cu. Tation partem timeam vis eu. Ea velit dicit dissentiunt per. Ut mei antiopam moderatius. Eros accommodare ex vel. In illud aperiam epicuri nec, has et agam graeci explicari. Ei qui delenit laoreet dissentias, has an tempor mediocritatem. Id ceteros adversarium his, iisque efficiendi at vix.
Contoh kode pemanggilan font standar dengan CSS adalah seperti di bawah ini.
@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 */
}
Kemudian perhatikan, mengapa ada beberapa jenis font yang disertakan, seperti *.eot, *.woff, *.ttf dll!? Nah perlu kita ketahui bahwa jenis font tersebut berbeda-beda dikarenakan jenis browser tertentu lebih mendukung jenis font tertentu. Jadi ada baiknya jika kita ingin menggunakan custom font, gunakan yang berekstensi WOFF, atau jika ada gunakan semua jenis font tersebut.

Sumber
  • https://www.maringngerrang.com/2017/03/how-to-upload-custom-font-to-blogger.html
No comments :

Post a Comment