Cara Upload dan Menggunakan Font Sendiri Di Blogger

Cara Upload dan Menggunakan Font Sendiri Di Blogger

Font merupakan salah satu faktor yang mempengaruhi kualitas blog. Typography, selain mempengaruhi tampilan font juga akan mempengaruhi jelas atau tidaknya sebuah tulisan terbaca. Dalam sebuah blog bisa saja menggunakan gaya font yang berbeda dengan blog lainnya. Selain sebagai pembeda juga bisa menjadi daya tarik tersendiri bagi pengunjung.

Untuk penggunaan pada halaman blog, Google telah menyediakan berbagai macam jenis font yang bisa digunakan secara gratis di Google Fonts. Cara penggunaannya juga sangat mudah dan sederhana tanpa mempengaruhi ukuran pemuatan blog.

Namun bagi kamu yang ingin menggunakan font sendiri yang tidak ada di Google Fonts maupun tidak tersedia secara online, ada sebuah cara yang bisa kamu gunakan dan berlaku untuk situs apa saja, termasuk Blogger. Cara ini tergolong mudah dan gratis serta tidak ada batasan jumlah sesuai yang kamu inginkan.

GitHub dan Content Delivery Network

Untuk bisa menggunakan font sendiri di Blogger, ada beberapa hal yang kamu perlu ketahui dan kenali. Cara ini memerlukan bantuan GitHub dan CDN (Content Delivery Network) gratis. GitHub merupakan situs hosting gratis untuk file seperti dokumen, HTML, CSS, JS, bahkan Font. Cara menggunakan GitHub juga sangat mudah bagi pemula. Serta CDN yang merupakan cara agar file di GitHub dapat diakses secara langsung.

Jika kamu belum pernah menggunakan Github sebelumnya, kamu bisa mengenal dan mendaftar di GitHub dengan mudah, baca petunjuknya di sini. Dan untuk cara upload font di Github kamu bisa membacanya di sini.

Upload font di Github

Secara garis besar, langkah-langkah yang bisa kamu lakukan untuk bisa menggunakan font sendiri secara online adalah sebagai berikut:
  1. Buka Github
  2. Jika belum memiliki repositori, maka buatlah terlebih dahulu. Jika sudah ada, maka buka repositori tersebut lalu upload file font dari komputer kamu ke repositori tersebut. Tekan tombol Upload files dan setelah upload selesai tekan tombol Commit changes
  3. Klik kanan pada file font yang baru saja kamu upload di repositori, lalu pilih Salin alamat link.
  4. Buka Statically
  5. Paste link yang telah kamu salin tadi pada kotak teks yang telah disediakan
  6. Salin URL baru di bagian Use this URL in production
  7. Setelah itu perhatikan kode dibawah 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 */
}

URL hosting dari font kamu tadi akan digunakan untuk kode CSS di atas. MyWebFont adalah sebutan untuk nama font kamu. Nama tersebut nantinya akan digunakan pada CSS untuk pemanggilan seperti, font-family: 'MyWebFont';. Lalu bagian lain yang ditandai akan diisi dengan URL yang sebelumnya telah kamu copy dari Statically.

Jika kamu hanya menggunakan satu jenis font (misal ttf saja) maka silakan hapus empat URL lain pada src kedua (mulai baris 5 sampai baris 8) dan ganti URL pada src pertama (baris ke-3). Sehingga hasil akhirnya adalah:

@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 di atas hanya jika kamu menggunakan satu jenis ekstensi font saja. Sebab jika diperhatikan ada beberapa jenis font yang lain seperti, *.eot, *.woff, *.ttf. Jenis-jenis font yang berbeda tersebut fungsi untuk menampilkan font yang sama pada perangkat dan platform yang berbeda yang menggunakan OS berbeda. Misalnya untuk browser pada OS Android, iOS, Linux, MacOS, dll menggunakan jenis font yang berbeda pula. Untuk lebih jelasnya perhatikan tabel berikut ini:

Cara Upload dan Menggunakan Font Sendiri Di Blogger

Jadi ada baiknya jika kamu ingin menggunakan custom font di blog kamu, 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.

Menggunakan font di halaman blog

Setelah melakukan upload file font ke Github dan mendapatkan URL font tersebut menggunakan CDN. Kamu perlu menghubungkan blog kamu dengan font tersebut. Caranya hanya dengan menggunakan kode CSS. Ikut langkah-langkah berikut ini:
  1. Buka Blogger
  2. Buka bagian Tema lalu klik tombol Edit HTML
  3. Temukan kode ]]></b:skin>
  4. Letakkan kode berikut di atasnya. Pastikan bagian yang ditandai telah kamu ganti sesuai instruksi di atas
  5. @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 */
    }
  6. Tekan tombol Simpan

Setelah itu kamu sudah bisa menggunakan font tersebut di halaman blog kamu. Untuk menggunakannya juga dengan kode CSS. Misalnya jika kamu ingin mengatur font tersebut berlaku di tag body, maka gunakan kode CSS berikut:

body {
  font-family: 'MyWebFont', sans-serif;
}

Pastikan kamu mengganti dan menggunakan nama font yang sama dengan nama font pada @font-face. Itulah beberapa cara yang bisa kamu lakukan untuk menggunakan font sendiri di Blogger. Cara ini telah terbukti berhasil dan saya coba beberapa kali di blog ini. Misal pada postingan tentang font Aksara Lontara Bugis. Jangan lupa tinggalkan komentar terbaik kamu di bawah, baik itu berupa pertanyaan maupun pernyataan. Terima kasih dan sampai jumpa!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel