√ Cara Upload Dan Memakai Font Sendiri Di Blogger

Font merupakan salah satu faktor yang menghipnotis kualitas blog. Typography, selain menghipnotis tampilan font juga akan menghipnotis terang atau tidaknya sebuah goresan pena terbaca. Dalam sebuah blog sanggup saja memakai gaya font yang berbeda dengan blog lainnya. Selain sebagai pembeda juga sanggup menjadi daya tarik tersendiri bagi pengunjung.

Untuk penggunaan pada halaman blog, Google telah menyediakan aneka macam macam jenis font yang sanggup dipakai secara gratis di Google Fonts. Cara penggunaannya juga sangat gampang dan sederhana tanpa menghipnotis ukuran pemuatan blog.

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

GitHub dan Content Delivery Network

Untuk sanggup memakai font sendiri di Blogger, ada beberapa hal yang kau perlu ketahui dan kenali. Cara ini memerlukan pemberian GitHub dan CDN (Content Delivery Network) gratis. GitHub merupakan situs hosting gratis untuk file ibarat dokumen, HTML, CSS, JS, bahkan Font. Cara memakai GitHub juga sangat gampang bagi pemula. Serta CDN yang merupakan cara semoga file di GitHub sanggup diakses secara langsung.

Jika kau belum pernah memakai Github sebelumnya, kau sanggup mengenal dan mendaftar di GitHub dengan mudah, baca petunjuknya di sini. Dan untuk cara upload font di Github kau sanggup membacanya di sini.

Upload font di Github

Secara garis besar, langkah-langkah yang sanggup kau lakukan untuk sanggup memakai font sendiri secara online yakni sebagai berikut:

1. Buka Github
2. Jika belum mempunyai repositori, maka buatlah terlebih dahulu. Jika sudah ada, maka buka repositori tersebut kemudian upload file font dari komputer kau ke repositori tersebut. Tekan tombol Upload files dan sehabis upload selesai tekan tombol Commit changes
3. Klik kanan pada file font yang gres saja kau upload di repositori, kemudian pilih Salin alamat link.
4. Buka Statically
5. Paste link yang telah kau salin tadi pada kotak teks yang telah disediakan
6. Salin URL gres di potongan 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 kau tadi akan dipakai untuk kode CSS di atas. MyWebFont yakni sebutan untuk nama font kamu. Nama tersebut nantinya akan dipakai pada CSS untuk pemanggilan seperti, font-family: 'MyWebFont';. Lalu potongan lain yang ditandai akan diisi dengan URL yang sebelumnya telah kau copy dari Statically.

Jika kau hanya memakai satu jenis font (misal ttf saja) maka silakan hapus empat URL lain pada src kedua (mulai baris 5 hingga baris 8) dan ganti URL pada src pertama (baris ke-3). Sehingga hasil kesudahannya 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 kalau kau memakai satu jenis ekstensi font saja. Sebab kalau 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 memakai OS berbeda. Misalnya untuk browser pada OS Android, iOS, Linux, MacOS, dll memakai jenis font yang berbeda pula. Untuk lebih jelasnya perhatikan tabel berikut ini:

Kaprikornus ada baiknya kalau kau ingin memakai custom font di blog kamu, gunakan yang berekstensi WOFF, atau biar 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 kode CSS yang pertama.

Menggunakan font di halaman blog

Setelah melaksanakan upload file font ke Github dan mendapat URL font tersebut memakai CDN. Kamu perlu menghubungkan blog kau dengan font tersebut. Caranya hanya dengan memakai kode CSS. Ikut langkah-langkah berikut ini:

1. Buka Blogger
2. Buka potongan Tema kemudian klik tombol Edit HTML
3. Temukan kode ]]></b:skin>
4. Letakkan kode berikut di atasnya. Pastikan potongan yang ditandai telah kau ganti sesuai arahan di atas

@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 */ }

5. Tekan tombol Simpan

Setelah itu kau sudah sanggup memakai font tersebut di halaman blog kamu. Untuk menggunakannya juga dengan kode CSS. Misalnya kalau kau ingin mengatur font tersebut berlaku di tag body, maka gunakan kode CSS berikut:

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

Pastikan kau mengganti dan memakai nama font yang sama dengan nama font pada @font-face. Itulah beberapa cara yang sanggup kau lakukan untuk memakai font sendiri di Blogger. Cara ini telah terbukti berhasil dan saya coba beberapa kali di blog ini. Misal pada postingan perihal font Aksara Lontara Bugis. Jangan lupa tinggalkan komentar terbaik kau di bawah, baik itu berupa pertanyaan maupun pernyataan. Terima kasih dan hingga jumpa!
Sumber http://www.maringngerrang.com/

Buat lebih berguna, kongsi:

1.2k Google Facebook Twitter