Lompat ke konten Lompat ke sidebar Lompat ke footer

Menggunakan Font Pilihan Sendiri di Blogger

Menggunakan Font Pilihan Sendiri di Blogger

Pengenalan Blog Engine Blogger

Cara Menggunakan Font Pilihan Sendiri di Blogger ― Blogger merupakan salah satu blog engine yang cukup banyak digunakan oleh pembuat blog. Selain karena mudah digunakan, kebebasan pengguna juga diterapkan kedalamnya, terutama penggunaan sintaks di dalamnya. Hal tersebut membuat banyak orang memilih menggunakan Blogger. Sebagai salah satu bagian dari aplikasi Google, Blogger menawarkan banyak fitur seperti kebanyakan aplikasi blog engine.

Sebagian besar pembuat blog akan tertarik untuk melakukan modifikasi tampilan blognya agar sesuai dengan yang diinginkan. Berbagai macam kustomisasi dapat dilakukan. Khususnya pada bagian kode CSS. Pengguna Blogger yang memahami cara kerja kode HTML dan CSS mungkin akan mencoba mengubah tampilan blognya baik dari segi warna, posisi-posisi, dan animasi yang diterapkan pada halaman blog. Namun bagaimana dengan yang lebih lanjut seperti mengubah jenis font yang ada di blog!? Menggunakan font sendiri.

Bisakah custom font sendiri di Blogger?

Pada umumnya sebuah halaman situs di internet akan menyajikan tampilan yang menyegarkan dan nyaman dipandang khususnya bagi pengunjung situs tersebut, tidak terkecuali blog. Sebuah blog biasanya akan mewakili keinginan dan jiwa dari pembuat atau pemiliknya, salah satu yang mewakili adalah jenis font yang digunakan.

Di Blogger, seorang yang mempunyai blog diberi keleluasaan untuk mengelola font yang digunakan pada blog tersebut. Tetapi untuk melakukannya tentu diperlukan kemampuan dasar dalam menggunakan bahasa pemrograman paling tidak HTML dan CSS. Selain itu seperti yang diketahui bersama bahwa di Blogger, meksipun pengguna dibebaskan memilih font yang disediakan, tetapi bagi sebagian orang pilihan tersebut masihlah cukup terbatas.

Oleh karena itu terbesit pertanyaan tentang apakah di Blogger bisa custom font sendiri? Bisakah pengguna menggunakan font pilihan sendiri yang tidak tersedia di Blogger? Jawabannya tentu saja bisa! Salah satu solusi paling mendasar yang disediakan telah terjawab dengan adanya Google Fonts.

Format font Web-Friendly

Sebelum melanjutkan pembahasan tentang cara menggunakan custom fonts di Blogger, ada baiknya kamu memahami tentang jenis-jenis atau format font yang digunakan dalam halaman situs/website yang dalam hal ini adalah Blogger. Karena di bawah akan dibahas tentang menggunakan beberapa format font sekaligus untuk sebuah font di Blogger.

Tahukah kamu bahwa font yang digunakan pada browser dari berbagai platform dapat berbeda-beda. Bahkan untuk jenis browser yang berbeda dapat mendukung jenis format font yang berbeda. Kemampuan browser yang semakin canggih membuat web designer semakin leluasa untuk berkreasi menciptakan halaman situs (website), termasuk dalam penggunaan font.

Kamu mungkin sudah mengenal atau setidaknya pernah dengar dengan beberapa nama font yang sudah tersedia pada sistem operasi komputer atau smartphone secara default seperti, Arial, Verdana, dan Times New Roman dll. Font standar yang sudah ada tersebut dikenal sebagai Safe Font atau ada juga yang menyebutnya System Fonts.

Disebut sebagai safe fonts karena font tersebut dapat digunakan sebagai font standar yang sebaiknya ditetapkan sebagai font cadangan terakhir dalam pemilihan font di website, supaya ketika font pilihan utama tidak tersedia/tidak dapat di-download, maka safe fonts masih ada dan tulisan/teks di halaman web bisa tetap muncul.

Kemampuan berbagai jenis browser untuk mendukung jenis format font yang berbeda

Namun dengan dikembangkannya CSS3 saat ini kita dapat menggunakan berbagai jenis font selain safe font tadi, atau yang lebih dikenal dengan istilah custom fonts. Fitur Font-Face pada CSS3 menjadi awal kemunculan perlengkapan baru dalam halaman situs yaitu Web Fonts.

Web fonts bisa memiliki beberapa jenis yang berbeda, jadi sebuah font yang sama bisa berbeda-beda formatnya. Web fonts memiliki beberapa jenis format, yang paling umum seperti OTF, TTF, dan WOFF. Berikut penjelasan macam-macam format font.

# TrueType Fonts (TTF)

Merupakan format yang dikembangkan oleh Apple dan Microsoft sekitar tahun 1980an sebagai pesaing untuk Type 1 fonts milik Adobe yang digunakan pada PostScript. TrueType kemudian menjadi format yang paling banyak digunakan pada Mac OS klasik, macOS, dan Microsoft Windows. Jenis format ini didukung oleh hampir semua web browser, termasuk IE (Internet Explorer) yang saat ini sudah tidak dikembangkan lagi.

# OpenType Fonts (OTF)

OpenType merupakan format untuk font komputer yang terukur. Format OTF merupakan pendahulu dari format TrueType, format ini mempertahankan struktur dasar TrueType dan menambahkan banyak struktur data yang rumit untuk menetapkan sifat tipografi. Format ini merupakan format yang cukup banyak digunakan sebagai web font dan terdaftar sebagai merek dagang (trademark) Microsoft. Font dengan format OTF dapat bekerja dengan baik pada hampir seluruh web browser.

# Web Open Font Format (WOFF)

Format font WOFF banyak digunakan pada website dan direkomendasikan oleh W3C (World Wide Web Consortium). File WOFF adalah font OpenType atau TrueType dengan menerapkan kompresi format-spesifik dan tambahan metadata XML. Format ini dibuat dengan 2 tujuan utama. Pertama adalah untuk membedakan antara file font yang digunakan untuk web dan yang digunakan untuk aplikasi desktop melalui instalasi lokal. Kedua untuk mempermudah proses transfer file font dari server ke klien melalui koneksi jaringan. Jadi dengan kata lain format ini merupakan format yang cocok digunakan sebagai format web fonts.

# WOFF 2.0 (WOFF2)

Seperti namanya WOFF2 merupakan format versi pembaruan dari WOFF yang asli. Format ini dikembangkan oleh Google dan dianggap sebagai format terbaik dibandingkan format lainnya karena menawarkan ukuran file yang lebih kecil karena kemampuan kompresinya yang lebih baik serta memberikan performa yang lebih baik untuk web browser modern yang mendukung format tersebut.

# Embedded OpenType (EOT)

Embedded OpenType merupakan format font warisan yang dikembangkan oleh Microsoft. IE pada versi yang lebih lama akan memerlukan EOT untuk merender sebuah web font. EOT juga sering disajikan tanpa kompresi sehingga ada kemungkinan memiliki ukuran file yang cukup besar. Format ini umumnya digunakan untuk mendukung para pengguna IE8 kebawah, namun jika kamu mengabaikan pengguna tersebut kamu dapat mengabaikan jenis format font ini.

* * *

Cara Menggunakan Custom Fonts

# Menggunakan Google Fonts untuk Blogger

Google Fonts merupakan salah satu situs penyedia font yang dapat digunakan secara online pada halaman situs, termasuk blog. Hampir sebagian besar developer menggunakan Google Fonts sebagai penyedia sumber font dalam situs yang dikelola. Banyak kelebihan yang disediakan oleh Google Fonts, salah satunya adalah sistem konfigurasi yang cukup lengkap dan simpel.

Pengguna akan dimudahkan dengan pilihan pengaturan yang lengkap seperti, memilih style font apa saja yang ingin diterapkan misalnya memilih bold, italic, serta font size melalui pengaturan yang mudah dipahami yang nantinya akan menghasilkan sebuah kode sumber akhir yang bisa langsung digunakan.

Jika kamu tertarik untuk menggunakan Google Fonts sebagai penyedia pilihan font untuk blog kamu di Blogger, maka bisa dibilang kamu akan cukup banyak terbantu. Pasalnya selain ringan, mudah digunakan, dan fiturnya lengkap, Google Fonts juga menyediakan bayak font yang bisa kamu pilih. Jadi untuk mulai menggunakannya, silakan ikuti langkah-langkah berikut ini:
  1. Buka Google Fonts, kamu tidak perlu login untuk bisa menggunakannya.
  2. Pilih font yang ingin kamu gunakan, setelah itu pilih Style yang kamu inginkan, yaitu style italic, bold, dan sebagainya, kamu bisa pilih semua atau khusus untuk yang diperlukan saja.
  3. Kemudian tampilkan tab Selected family lalu dapatkan kode Embed nya yang akan kamu pasang di blog kamu.
  4. Menggunakan Font Pilihan Sendiri di Blogger
  5. Setelah mendapatkan kode embed dari font yang kamu inginkan, selanjutnya buka Blogger lalu buka pada bagian Tema dan pilih Edit HTML.
  6. Menggunakan Font Pilihan Sendiri di Blogger
  7. Temukan kode </head> dan letakkan kode embed dari Google Fonts di atasnya.
  8. Setelah itu kamu sudah bisa menggunakan font tersebut di blog kamu, silakan pilih di mana kamu ingin menggunakan font tersebut di dalam blog, misalnya pada isi postingan, maka biasanya digunakan kode CSS:
  9. .post-body {
    font-family: 'Ubuntu', sans-serif;
    }
  10. Perhatikan bagian yang ditandai, jika menggunakan Google Fonts, maka nama font tersebut (yang digunakan dalam kode CSS) diambil dari nama font yang tertera pada link embed yang kamu dapatkan sebelumnya, perhatikan pada link tersebut terdapat bagian family=Ubuntu.

# Menggunakan Upload Font Sendiri

Selain menggunakan Google Fonts, pada dasarnya kamu bisa menggunakan font apa saja yang kamu inginkan dengan meng-upload sendiri font tersebut untuk digunakan. Pertanyaannya sekarang adalah, font nya mau di upload di mana? Karena seperti yang diketahui bahwa Blogger tidak menyediakan hosting file selain gambar dan video (kecuali di masa depan nanti ada pembaruan terkait hal tersebut).

Perlu kamu ketahui bahwa logikanya untuk bisa menggunakan font secara online di web, maka file font tersebut juga harus dapat diakses secara online. Jadi jika kamu menggunakan font yang di upload sendiri, maka kamu memerlukan hosting file yang memungkinkan untuk mengakses file tersebut secara directly, artinya kamu memerlukan direct link, tidak seperti link file dari Google Drive atau Mediafire.

Mungkin jika kamu paham tentang web kamu akan berpikir solusinya adalah web hosting, yang tentunya berbayar. Tetapi salah satu solusi terbaik yang bisa digunakan adalah memanfaatkan GitHub, yang gratis dan terpercaya.

# Hosting file font dengan GitHub

Sebelum menggunakan GitHub tentunya kamu perlu mengetahui apa itu Github dan bagaimana cara menggunakannya. Sebagai tambahan informasi, Github merupakan sebuah situs yang menyediakan layanan berbagi source code (begitu saya menyebutnya), jadi semacam social media untuk developer yang sering ngoding, di mana seseorang bisa membagikan source code sebuah program (termasuk source code web) dan dilihat oleh orang lain baik secara publik maupun privat. Di Github memungkinkan penggunanya untuk hosting file termasuk file web HTML.

Jadi berdasarkan hal tersebut, maka secara logika, Github dapat digunakan untuk hosting file web termasuk salah satunya adalah font yang digunakan untuk web, dalam hal ini blog di Blogger. Oleh karena itu kamu perlu mengetahui cara mendaftar dan hosting file di GitHub sebelum memulai langkah-langkah yang akan di bahas di bawah.

* * *

Setelah kamu sudah tahu cara menggunakan Github, atau setidaknya punya akun di Github, maka kamu bisa upload font yang ingin kamu gunakan di Blogger dengan mengikuti langkah-langkah berikut ini.
  1. Silakan login pada akun GitHub kamu, pilih repository tempat kamu menyimpan file font tersebut. Pada bagian tombol-tombol manajemen file pada repository, pilih Upload files. Selanjutnya silakan upload file font yang ingin kamu gunakan.
  2. Menggunakan Font Pilihan Sendiri di Blogger
  3. Sebagai informasi tambahan, bagi kamu yang belum tahu, repository pada Github ibaratnya seperti partisi hardisk di PC yang ada Local disk C, D, dsb. Untuk bisa upload file di Github kamu harus punya/membuat repository dulu. Pelajari caranya di sini.
  4. Misalnya kamu akan menggunakan font bernama Pacifico, bisa download disini. Silakan upload file font tersebut pada repository kamu dan setelah proses upload selesai tekan tombol Commit changes untuk menyimpan perubahan.
  5. Menggunakan Font Pilihan Sendiri di Blogger
  6. Jika sudah di-commit changes file font yang sudah kamu upload akan muncul di repository, selanjutnya kamu perlu mendapatkan direct link nya. Klik pada file font tersebut, setelah terbuka, copy alamat dari tombol atau link yang bertuliskan RAW.
  7. Menggunakan Font Pilihan Sendiri di Blogger
  8. Kemudian kamu perlu memodifikasi link RAW tersebut agar dapat digunakan. Perhatikan kedua link berikut, baris pertama adalah link yang kamu copy, dan baris kedua adalah link yang akan digunakan, selanjutnya itu disebut Link RAW.
  9. https://github.com/maringngerrang/fonts/blob/master/Pacifico-Regular.ttf?raw=true
    https://raw.githubusercontent.com/maringngerrang/fonts/master/Pacifico-Regular.ttf
  10. Bagian yang ditandai adalah bagian yang berubah, link RAW itulah yang akan dipasang di blog kamu menggunakan kode CSS.

Jika kamu ingin menggunakan beberapa format font sekaligus untuk satu font yang sama, misalnya semua format (EOT, WOFF2, WOFF, TTF, dan SVG) yang mendukung akan digunakan (agar font terbaca di semua jenis platform), maka kamu perlu upload semua file font tersebut kedalam repository Github lalu dapatkan RAW link untuk setiap format tersebut seperti cara di atas.

Cara Memasang Custom Fonts di Blogger

Langkah selanjutnya yang perlu kamu lakukan adalah memasang font di Blogger. Pada dasarnya untuk memasang font yang telah disimpan pada repository GitHub adalah dengan menggunakan URL nya yang dipasang pada kode CSS berikut.

@font-face {
  font-family: 'Nama Font';
  src: url('font_link.eot'); /* IE9 Compat Modes */
  src: url('font_link.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font_link.woff2') format('woff2'), /* Super Modern Browsers */
       url('font_link.woff') format('woff'), /* Pretty Modern Browsers */
       url('font_link.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('font_link.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Kode CSS di atas adalah kode yang digunakan untuk menghubungkan RAW link/URL font dari GitHub ke blog kamu. kamu hanya perlu memasang kode tersebut pada sintaks blog di Blogger. Tinggal ganti font_link dengan RAW link dari Github sesuai dengan format yang kamu butuhkan. Jika ada format yang tidak terpakai, maka cukup dihapus saja, dan pastikan bagian paling terakhir selalu ditutup dengan simbol ;. Berikut ini contoh kode font-face yang sudah siap digunakan.

@font-face {
  font-family: 'Pacifico';
  src: url('https://raw.githubusercontent.com/maringngerrang/fonts/master/Pacifico.eot'); /* IE9 Compat Modes */
  src: url('https://raw.githubusercontent.com/maringngerrang/fonts/master/Pacifico.eot') format('embedded-opentype'), /* IE6-IE8 */
       url('https://raw.githubusercontent.com/maringngerrang/fonts/master/Pacifico.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://raw.githubusercontent.com/maringngerrang/fonts/master/Pacifico-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('https://raw.githubusercontent.com/maringngerrang/fonts/master/Pacifico-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('https://raw.githubusercontent.com/maringngerrang/fonts/master/Pacifico-Regular.svg#Pacifico') format('svg'); /* Legacy iOS */
}

Selanjutnya kamu bisa memasang kode CSS tersebut di Blogger. Cara pemasangannya cukup mudah, kamu bisa mengikuti langkah-langkah berikut ini.
  1. Buka Blogger lalu pada bagian Tema klik tombol "Sesuaikan".
  2. Menggunakan Font Pilihan Sendiri di Blogger
  3. Setelah itu pada Desainer Tema Blogger, pilih Lanjutan lalu buka Tambahkan CSS
  4. Menggunakan Font Pilihan Sendiri di Blogger
  5. Kemudian tambahkan kode berikut pada kotak teks yang ada. Menu ini kadang tergantung dari template yang kamu gunakan, jika menu "Tambahkan CSS" tidak dapat kamu temukan silakan buka menu Edit HTML lalu temukan kode ]]></b:skin> dan letakkan kode berikut di atasnya.
  6. @font-face {
      font-family: 'Pacifico';
      src: url('https://raw.githubusercontent.com/maringngerrang/fonts/master/Pacifico.eot'); /* IE9 Compat Modes */
      src: url('https://raw.githubusercontent.com/maringngerrang/fonts/master/Pacifico.eot') format('embedded-opentype'), /* IE6-IE8 */
           url('https://raw.githubusercontent.com/maringngerrang/fonts/master/Pacifico.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://raw.githubusercontent.com/maringngerrang/fonts/master/Pacifico-Regular.woff') format('woff'), /* Pretty Modern Browsers */
           url('https://raw.githubusercontent.com/maringngerrang/fonts/master/Pacifico-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
           url('https://raw.githubusercontent.com/maringngerrang/fonts/master/Pacifico-Regular.svg#Pacifico') format('svg'); /* Legacy iOS */
    }

Penutup

Itulah beberapa langkah-langkah yang dapat kamu gunakan untuk dapat menggunakan custom font atau menggunakan font sendiri pada Blogger. Pada dasarnya cara ini dapat digunakan bukan hanya pada Blogger melainkan pada halaman situs manapun yang kamu inginkan. Cara ini merupakan cara yang mudah untuk dipahami. Dengan begitu kamu dapat jadi lebih bebas melakukan kustomisasi pada tampilan halaman blog kamu.

Posting Komentar untuk "Menggunakan Font Pilihan Sendiri di Blogger"