Kangen rasanya dan ingin membagi tips website atawa blogger tentang bagaimana kumaha cara memasang dan mengganti jenis huruf dengan blog menggunakan huruf yang sangat rapi,keren dan temtinya cantik seperti kalian yaitu namanya Museo. FYI, apa sih..sebenarnya font Museo itu?
Font Museo adalah font yang tidak gratis alias bayar dam untuk font-weight dan font-style.
Ngapin lagi harus bayar! kita berburu yang gratis saja ok...coba mana yang gratis itu, boleh-boleh saja kita lihat dulu sobat untuk font-weight: 300, 500 dan 700. Jadi, yang akan dijadikan bahan dalam tutorial kali ini ialah menggunakan yang format font yang gratis saja yah....
Jenis huruf ini tidak tersedia di Google Fonts sehingga jika ingin memasangnya di website atau blog, maka harus menghosting file dengan format woff (woff2) pada hostingan sendiri. Entah itu hosting sewaan atau di hosting file berupa script yang bisa digunakan secara gratis, seperti Github gitu loh.
Cara Mudah Mengetahui Font yang Digunakan pada Blog atau Website
Namun, berhubung ada seseorang yang telah berbaik hati menghosting berbagai format font Museo ini, maka Anda tidak perlu mencari-cari tempat hosting lagi untuk menaruh format font Museo yang dibutuhkan untuk dijadikan sebagai huruf di website atau blog.
Font Museo ini sebetulnya sempat saya dapati dipakai oleh website kenamaan JalanTikus.com, pada bagian title. Bagi Anda yang tertarik menggunakan font Museo ini sebagai font judul (title) atau huruf body artikel, silahkan ikuti caranya berikut ini.
Cara memasang @font-face Museo di blog atau website
Tutorial kali ini lebih focus ditujukan bagi pengguna platform Blogger, yang wordpress silahakan menyesuaikan.Silahkan buka Edit HTML
Letakkan kode berikut ini di atas kode
]]></b:skin> atau </style>@font-face {
font-family: 'Museo';
src: url('https://cdn.rawgit.com/mikaelbr/simplify-playbutton/a0f8e711/public/stylesheets/museo/museo-300-webfont.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Museo';
src: url('https://cdn.rawgit.com/mikaelbr/simplify-playbutton/a0f8e711/public/stylesheets/museo/museo-500-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Museo';
src: url('https://cdn.rawgit.com/mikaelbr/simplify-playbutton/a0f8e711/public/stylesheets/museo/museo-700-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}
Lalu, untuk memanggil hurufnya, silahkan lakukan seperti pada contoh berikut!
Untuk mengubah jenis huruf seisi blog/website dapat diubah seperti ini:
body{background: #fff;font-family:'Museo', sans-serif, Arial; font-weight:300;}
Untuk mengubah judul postingan saja, bisa dengan cara berikut ini:
.post h1,.post h2{font-family:'Museo', sans-serif, Arial; font-weight:700;color:#333;}
Atau seperti ini:
.post h1 {font-family:'Museo', sans-serif, Arial; font-weight:500; line-height:1.4em;
font-size:175%;color:#222}
Jika hanya ingin mengubah jenis huruf body artikel, dapat diubah seperti berikut:
.post-body{ font-family:'Museo', sans-serif, Arial; font-weight:300;color:#2d2d2d}
Selanjutnya, silahkan sesuaikan dengan keinginan Anda.
Simpan template, lalu lihat hasilnya!
Source:bungfrangki
Comment: