Museo @font-face for Website

Tips website/blogger kali ini tentang cara memasang atau mengganti jenis huruf blog menggunakan huruf yang sangat cantik, yaitu Museo. FYI, sebetulnya font Museo ini adalah font yang berbayar untuk font-weight dan font-style tertentu. Tetapi juga ada yang gratis, yaitu untuk font-weight: 300, 500 dan 700. Jadi, yang akan dijadikan bahan dalam tutorial kali ini ialah menggunakan yang format font yang gratis.

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 percuma, semacam Github.

Simak juga: 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: https://github.com/mikaelbr/simplify-playbutton/tree/master/public/stylesheets/museo
https://www.fonts.com/font/exljbris/museo