Custom Fonts adalah, singkatnya, font-font khusus yg disertakan secara perorangan & bukan ialah font-font default yg sudah dimengerti browser (database-nya tidak dimiliki browser). Custom fonts dikala ini sudah berjumlah ratusan, memiliki kombinasi yg bermacam-macam, unik, memiliki tema yg lebih khas ketimbang font biasa, serta sanggup memajukan mutu penampilan blog/web.
Tulisan di atas memamerkan kesan yg berbeda; lebih stylish dibanding font default di sekelilingnya. Pada posting Cara Mengubah/Mengganti jenis font di Blogger, sudah share cara merubah font dengan memakai standar. Sebagai langkah advance, akan share cara memakai & merubah font Blog dengan Custom Fonts bagi kawan blogger yg kesengsem untuk menghasilkan font di blog terlihat lebih stylish. Di platform Blogger, ada dua cara yg sanggup dipakai untuk menggunakan/menampilkan Custom Fonts:
1. Menggunakan fitur Blogger Web Fonts lewat Template Designer.
2. Memasukkan snippets (kode) secara pribadi lewat Edit HTML (manual template editing).
Cara Menggunakan Blogger Custom/Web Fonts Melalui Template Designer
Pada tamat Desember 2010, Blogger memperkenalkan fitur Web Fonts yg sanggup diakses lewat Template Designer. Saat ini setidaknya sudah ada 77 Web Fonts (dan terus bertambah) yg sanggup dipakai untuk kostumisasi font blog Blogger guna memperindah desain blog.
Cara mengakses fitur Web Fonts:
1. Masuk Dashboard Blogger > Template > Customize > Advanced
2. Pada halaman Template Designer, setelah menegaskan "Advance", kawan sanggup menegaskan bab mana yg hendak dikostumisasi, misalnya page, header, sidebar header, post title, dan seterusnya. Kemudian pilih Web Fonts yg hendak digunakan.
3. Setelah semua kostumisasi font selesai, klik "Apply to This Blog".
Dengan cara ini, kawan sanggup menegaskan Web Fonts yg sudah ditawarkan oleh Blogger serta mempreviewnya sekaligus (WYSIWYG).
Note: Pengaturan Custom web fonts lewat "template designer" belum pasti sanggup diaplikasikan pada custom blogger templates (bukan template bawaan Blogger). Makara mesti memakai cara kedua di bawah.
Note: Pengaturan Custom web fonts lewat "template designer" belum pasti sanggup diaplikasikan pada custom blogger templates (bukan template bawaan Blogger). Makara mesti memakai cara kedua di bawah.
Cara Memasang Custom Fonts Dengan Mengedit Template Blog
Konsep bekerjsama dari memasang custom fonts yakni memasukkan font snippets pada template & merujukkannya pada font family dalam atribut pengaturan CSS unsur blog. Dibanding Blogger Web Fonts pada Template Designer yg jumlahnya masih terbatas, kombinasi Web Fonts gratis yg tersedia jauh lebih banyak. Kali ini, kita akan memakai Web Fonts milik Google (Google Font API), yg hingga dikala ini sudah memiliki koleksi 397 Font Family (dan terus bertambah), alasannya yakni memiliki saluran yg cepat & stabil.
Tahap 1: Instalasi Font Ke Blog
1. Masuk ke Google Web Fonts
2. Klik "start choosing fonts", cari font yg diinginkan, kemudian klik "quick use".
4. Pada halaman berikutnya, laksanakan kostumisasi (jika font memiliki varian), kemudian scroll ke bawah hingga kolom kode. Copy code tersebut.
<link href="http://fonts.googleapis.com/css?family=Sail" rel="stylesheet" type="text/css"/>
Contoh isyarat dengan tag link untuk jenis plain HTML pada template web biasa:
<link href="http://fonts.googleapis.com/css?family=Sail" rel="stylesheet" type="text/css"></link>
5. Buka Edit Template/Edit HTML.
6. Letakkan isyarat tersebut dalam tag <head>, tepatnya di antara <head> & </head>, atau biar lebih singkat diload, letakkan di bawah/dekat dengan <head>. Boleh juga di atas </head>.
Tahap 2: Aplikasi Custom Font Ke Elemen Blog Melalui CSS
1.Guna merubah penampilan font pada unsur tertentu (judul posting, nama blog, isi posting, judul sidebar, dsb), yg perlu dicari yakni class atau id CSS yg mengaturnya. Sebagai pola jikalau ingin merubah font link judul posting, maka cari class/id yg mengendalikan judul posting, misalnya .post h3 a.
2. Cari atribut yg mengendalikan font. Atribut pengatur font pada CSS umumnya ada dua yg dipakai pada template, font-family atau font saja. Jika sudah ada, cukup tambahkan nama font, setelah font-family atau font. Contoh pengaturan custom font pada font isi posting:
.post-body {font-family:'Custom Font', Times New Roman, Trebuchet, Serif; margin:......dst}
Ada dua poin penting yg mesti diperhatikan:
a. Font default ditaruh di permulaan serta mesti dibubuhkan tanda kutip (boleh single ['] atau pun double ["]).
b. Gunakan font-font pengganti di belakang font default untuk berjaga-jaga apabila Browser gagal merender/memuat font tersebut.
Note: Jika masih kurang jelas, silahkan mempelajari CSS font pada posting Cara Mengubah/Mengganti jenis font di Blogger.
3. Setelah selesai melakukan editing pada CSS, preview apalagi dahulu. Apabila sudah beres sesuai yg diinginkan, Save Template.
Important!:
1. Jangan gunakan/pasang snippet font yg tidak diharapkan & jangan memakai custom fonts yg terlampau banyak jenisnya. Penggunaan snippet custom font (link tag) membuat terjadinya proses rendering oleh browser sehingga menghipnotis loading halaman blog (blog lebih berat, loading lebih lama).
2. Apabila Custom Font yg diharapkan cuma pada bab kecil saja, misalnya text logo pada header blog, lebih baik gunakan gambar text. Buat dengan online text logo creator/generator.
Yup, demikian share saya perihal cara memasang custom fonts di Blogger & sedikit review perihal penggunaan web fonts pada blog. Have a Nice Blogging * Happy Designing!
mencuri yakni pekerjaan pengecut! © buka-rahasia.blogspot.com
