Menggunakan Custom Font Sendiri di Blogger

Menggunakan Custom Font Sendiri di Blogger

Pengenalan Blog Engine Blogger

Blogger merupakan salah satu blog engine yang cukup banyak digunakan oleh pembuat blog. Selain karena mudah digunakan, kebebasan pengguna juga diterapkan kedalamnya. Terutama pada bagian penulisan kode. Hal tersebut membuat banyak orang memilih menggunakan Blogger. Sebagai salah satu bagian dari aplikasi milik 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.

Tempat download font gratis untuk Blogger

Terdapat puluhan halaman website di internet yang bisa menjadi tujuan anda untuk mendapatkan font gratis. Font Squirrel adalah salah satu situs yang menyediakan cukup banyak jenis font yang dapat diperoleh secara gratis yang memiliki lisensi komersil. Selain itu Google Fonts juga menyediakan layanan yang sama, terdapat lebih dari 800 jenis font yang dapat anda peroleh. Adobe menyediakan layanan Edge Web Fonts yang memungkinkan anda mendapatkan lebih dari 500 web font pilihan.

Selain situs-situs di atas, terdapat situs lain yang tidak kalah lengkap menyediakan berbagai jenis font yang dapat anda peroleh secara gratis. Beberapa diantaranya adalah Dafont, 1001freefonts, Typekit, Fonts.com, Fonts2u, Cooltext yang menyediakan cukup banyak font untuk website dan desktop secara gratis.

Format font Web-Friendly

Tahukah anda 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. Secara default kita mungkin telah mengenal beberapa jenis font yang sudah tersedia pada sistem operasi komputer dan smartphone, seperti Arial, Verdana, dan Times New Roman yang telah digunakan secara luas dan gratis. Font standar yang sudah ada tersebut dikenal sebagai Safe Font atau ada juga yang menyebutnya System Fonts.

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 terhadap satu font yang sama, perbedaan tersebut terletak pada 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 anda mengabaikan pengguna tersebut anda dapat meninggalkan format ini.

Jadi selanjutnya anda sudah dapat menentukan jenis format font paling efektif yang akan anda gunakan untuk halaman situs anda. Jika anda tidak memiliki format font yang anda inginkan anda dapat melakukan konversi terhadap format tersebut. Untuk mengkonversi satu format font menjadi beberapa jenis format font lain, anda dapat melakukannya pada Online Font Converter atau online @font-face generator.

Cara menggunakan custom font di Blogger

Dapatkah custom font sendiri di Blogger?

Custom font merupakan proses menyediakan jenis font selain safe font pada halaman situs untuk memberikan kesan tertentu. Hal ini merupakan sesuatu yang wajar dan seringkali dilakukan oleh web developer. Pada dasarnya hal terpenting yang perlu dilakukan adalah menyediakan file font secara cloud pada hosting yang dapat dijangkau oleh sebuah website.

Namun berbeda dengan Blogger. Pada dasarnya Blogger membatasi penggunanya untuk melakukan modifikasi dengan file pada sebuah blog. Hal ini merupakan hal yang wajar dan juga diterapkan pada WordPress versi gratis. Hal tersebut untuk menghindari pengguna yang akan menyimpan file tertentu dengan ukuran yang besar atau bahkan sebagai tempat penyimpanan data berukuran bebas. Lalu apa artinya itu? Hal itu berarti anda tidak dapat mengubah nama file hosting beserta permalink pada file tersebut serta tidak dapat memindahkan file hosting secara bebas.

Lebih lanjut tentunya hal tersebut membuat anda tidak dapat menjadikan hosting Blogger sebagai tempat anda memarkirkan file font anda untuk digunakan pada blog yang sama. Solusi yang dapat anda gunakan untuk mengatasi hal tersebut adalah menggunakan layanan cloud hosting dari pihak ketiga. Cloud hosting merupakan layanan yang memungkinkan anda untuk meng-hosting (mengunggah dan menyimpan) file tertentu yang dapat diakses secara cloud melalui jaringan internet.

Namun perlu anda perhatikan bahwa tidak semua cloud hosting mendukung web hosting. File hosting biasa berbeda dengan web hosting, perbedaannya adalah file hosting memungkinkan anda untuk langsung mendapatkan (download) filenya baik itu merupakan file berformat HTML, PHP, CSS, JS yang berisi kode yang dapat dijalankan pada web browser. Sedangkan web hosting akan menampilkan isi dari file teks yang didukung, seperti file web pada umumnya. Namun untuk sekadar hosting file berjenis font solusi yang dapat anda gunakan adalah dengan menggunakan layanan hosting dari GitHub.

Hosting file font dengan GitHub

Di atas telah dijelaskan bahwa anda akan menggunakan GitHub, artinya anda perlu mengetahui cara penggunaannya. Tapi sebelum itu anda perlu mengetahui cara mendaftar dan hosting file di GitHub. Setelah itu silakan login pada akun GitHub anda, pilih repository tempat anda menyimpan file font tersebut. Pada bagian tombol-tombol manajemen file pada repository, pilih Upload files. Selanjutnya silakan upload file font yang anda ingin gunakan. Misalnya akan digunakan font Pacifico. Silakan download satu pack web fonts Pacifico disini. Pada file tersebut tersedia 6 file utama. Silakan upload keenam file tersebut pada repository anda. Pastikan anda menekan tombol Commit changes setelah proses mengupload file selesai.

commit changes to upload files in GitHub repository

Setelah proses upload file-file anda selesai dan anda telah menekan tombol Commit changes, maka anda akan langsung melihat hasilnya pada halaman awal repository tersebut. Selanjutnya klik kanan pada salah satu file font yang ingin anda gunakan untuk mendapatkan linknya. Sebagai contoh akan digunakan file Pacifico-Regular.ttf.

Copy font link in repository to use in post blog

Setelah mendapatkan link dari salah satu font yang akan anda gunakan pada Blogger, selanjutnya silakan buka situs Rawgithack. Situs ini akan digunakan untuk mendapatkan raw files dari file repository GitHub. Tempel teks yang telah anda salin sebelumnya dari file repository GitHub pada kotak teks RawGit yang paling atas. Selanjutnya anda akan memperoleh dua URL yang bisa anda gunakan.

Menggunakan Custom Font Sendiri di Blogger

Perbedaan kedua URL tersebut terletak pada fungsi dan penggunannya. URL yang sebelah kiri memungkinkan anda untuk memperoleh link dengan isi dari file pada URL tersebut, sedangkan yang sebelah kanan memungkinkan anda untuk memperoleh filenya. Salin URL yang berada di sebelah kiri.

Silakan lakukan hal yang sama seperti di atas untuk memperoleh link dari setiap file font yang akan anda gunakan. Secara umum format font yang akan digunakan adalah EOT, WOFF2, WOFF, TTF, dan SVG. Jadi silakan dapatkan link RawGit dari file-file font dengan format tersebut.

Memasang font pada Blogger

Langkah selanjutnya yang perlu anda lakukan adalah memasang font anda pada blog anda. Pada dasarnya untuk memasang font yang telah disimpan pada repository GitHub adalah dengan menggunakan URL nya. Perhatikan kode CSS berikut.

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

Kode CSS di atas adalah kode yang digunakan untuk menghubungkan link URL font anda dari GitHub ke blog anda. Anda hanya perlu memasang kode tersebut pada sintaks blog anda. Tetapi sebelum itu URL untuk mengarahkan file font harus menuju ke URL font di repository GitHub tadi. Sebagai contoh, berikut kode yang telah dilengkapi dengan URL font dari GitHub AhliTekno dengan menggunakan Statically.

@font-face {
  font-family: 'Pacifico';
  src: url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico.eot'); /* IE9 Compat Modes */
  src: url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico-Regular.svg#Pacifico') format('svg'); /* Legacy iOS */
}

Selanjutnya beralih ke halaman admin Blogger anda. Silakan masuk pada menu Tema lalu pilih Edit HTML. Selanjutnya temukan baris kode </style> atau untuk lebih aman temukan kode ]]></b:skin> untuk meletakkan kode CSS anda. Perlu anda perhatikan bahwa penempatan kode ini penting untuk anda ketahui, pasalnya letak kode akan menentukan bagaimana ia dijalankan. Pastikan anda menempatkan kode CSS tersebut pada letak yang tepat. Yaitu tidak meletakkannya pada kode CSS dengan lokasi khusus seperti kode CSS yang diapit oleh conditional tag. Silakan tempatkan kode CSS tersebut sebelum kode ]]></b:skin>.

Menggunakan custom font di Blogger

Sampai pada tahap ini anda telah menyelesaikan proses pemasangan custom font pada blog anda. Selanjutnya untuk menggunakan font tersebut caranya tidak jauh berbeda dengan menggunakan font pada umumnya. Masih menggunakan kode CSS anda hanya perlu mengatur jenis font yang digunakan dari suatu objek tertentu dalam HTML. Secara umum anda bisa mencoba menggunakannya dengan menambahkan tag HTML berikut.

<div class="font-pacifico">Teks ini ditulis dengan font Pacifico!</div>

Beserta dengan kode CSS berikut ini pada satu halaman yang sama atau yang dapat diakses oleh tag HTML di atas.

.font-pacifico {
  font-family: 'Pacifico', sans-serif;
  font-size: 30px;
}

Atau secara umum anda dapat menggunakan kode berikut pada satu halaman yang sama.

<style>
@font-face{font-family:'Pacifico';src:url('https://cdn.rawgit.com/AhliTekno/AhliTekno/a3291c46/Pacifico.eot');/* IE9 Compat Modes */
src:url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico.woff2') format('woff2'),/* Super Modern Browsers */
url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico-Regular.woff') format('woff'),/* Pretty Modern Browsers */
url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico-Regular.ttf') format('truetype'),/* Safari,Android,iOS */
url('https://cdn.statically.io/gh/AhliTekno/AhliTekno/a3291c46/Pacifico-Regular.svg#Pacifico') format('svg');/* Legacy iOS */}
.font-pacifico{font-family:'Pacifico',sans-serif;font-size:30px}
</style>

<div class="font-pacifico">Teks ini ditulis dengan font Pacifico!</div>

Penutup

Itulah beberapa langkah-langkah yang dapat anda 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 anda inginkan. Cara ini merupakan cara yang mudah untuk dipahami dan terksena mudah dalam prosesnya. Dengan begitu anda dapat jadi lebih bebas melakukan kustomisasi pada tampilan halaman blog anda.

Related Posts

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel