Museo @Font-Face For Website

Tips website/blogger kali ini perihal cara memasang atau mengganti jenis karakter blog memakai karakter yang sangat cantik, yaitu Museo. FYI, bahwasanya font Museo ini ialah 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 materi dalam tutorial kali ini ialah memakai yang format font yang gratis.

Jenis karakter ini tidak tersedia di Google Fonts, sehingga jikalau 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 sanggup digunakan secara percuma, semacam Github.

Simak juga: Cara Praktis Mengetahui Font yang Digunakan pada Blog atau Website

Namun, berhubung ada seseorang yang telah berbaik hati menghosting banyak sekali format font Museo ini, maka Anda tidak perlu mencari-cari daerah hosting lagi untuk menaruh format font Museo yang diharapkan untuk dijadikan sebagai karakter di website atau blog.

Font Museo ini bahwasanya sempat saya dapati digunakan oleh website kenamaan JalanTikus.com, pada bab title. Bagi Anda yang tertarik memakai font Museo ini sebagai font judul (title) atau karakter 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 instruksi berikut ini di atas instruksi ]]></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 menyerupai pada teladan berikut!

Untuk mengubah jenis karakter seisi blog/website sanggup diubah menyerupai ini:

body{background: #fff;font-family:'Museo', sans-serif, Arial; font-weight:300;}

Untuk mengubah judul postingan saja, sanggup dengan cara berikut ini:

.post h1,.post h2{font-family:'Museo', sans-serif, Arial; font-weight:700;color:#333;}

Atau menyerupai 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 karakter body artikel, sanggup diubah menyerupai berikut:

.post-body{ font-family:'Museo', sans-serif, Arial; font-weight:300;color:#2d2d2d}

Selanjutnya, silahkan sesuaikan dengan harapan Anda.

Simpan template, kemudian lihat hasilnya!

Source: https://github.com/mikaelbr/simplify-playbutton/tree/master/public/stylesheets/museo

Advertisement