Mengganti & Memasang Font Di Artikel Blog Lebih Banyak

Mengganti & Memasang Font Lebih Banyak Di Artikel Blog terkadang perlu dilakukan dan terkadang sangat tidak perlu dilakukan karena jika kita terlalu banyak memasang font di blog atau pun sering mengganti font blog maka juga tidak baik untuk keadaan blog. Lalu berapa kali seharusnya mengganti dan memasang font di blog? 6 bulan atau 1 tahun sekali mungkin juga bisa atau tergantung sesuai keinginan pemilik blog itu, yang pastinya jangan terlalu sering-sering mengganti font blog

Baca juga

Kemarin saya juga membuat artikel tentang mengganti font dan sekarang saya membuat artikel dengan judul yang sama. Apa perbedaan artikel yang kemarin dengan artikel yang sekarang? Meski memiliki judul yang sama tapi isinya berbeda. Jika pada artikel sebelumnya untuk mengganti font di artikel blog cuku dengan memilih font-font yang ada di menu Font yang telah tersedia dan font yang disediakan hanya ada 7 font yang disediakan oleh Blogger yaitu Arial, Courier, Georgia, Helvetica, Times, Trebuchet, dan Verdana

Dengan adanya 7 font yang disediakan tersebut sebenarnya sudah cukup untuk memperindah tampilan font artikel. Namun bukan Blogger pandainya jika tidak ingin sesuatu yang beda didalam blognya. Merak pun berramai-ramai mengganti font di blognya dan rata-rata mereka menggunakan font yang disediakan oleh Google font

Lalu apa maksud dan tujuan dari artikel ini? Sama seperti pada artikel sebelumnya, dalam artikel ini juga mengganti font hanya di artikel blog saja dan tentunya font-font yang digunakan lebih banyak dan berbeda dari font yang telah ada. Caranya pun hampir sama, cukup meletakkan kode font didalam artikel maka font artikel pun langsung berganti

Cara Mengganti & Memasang Font Di Artikel Blog Lebih Banyak
Untuk mengganti font yang berbeda dengan banyak pilihan yang menyesuaikan dengan keinginan maka cukup memilih font yang ada didalam Google Fonts atau seperti yang telah saya jelaskan di artikel sebelumnya

Baca juga

Setelah menemukan font yang diinginkan, salin url font tersebut dan gunakan kode css font dibawah ini untuk mengganti font didalam artikel blog

<style type="text/css">
@import url(link google font);
</style>

Keterangan: Ganti link google font dengan link font yang telah didapat di Google font

Contoh:
Di Google fonts, saya memilih jenis font Comfortaa, maka saya memiliki link font tersebut seperti berikut ini
http://fonts.googleapis.com/css?family=Comfortaa

Maka dengan menggunakan kode css font diatas, salin kode berikut ini sebelum artikel blog dengan format penulisannya adalah sebagai berikut:

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Comfortaa);
</style>

Untuk menerapkan font Comfortaa kedalam artikel gunakan fungsi SPAN untuk memanggil kode font yang telah disediakan

<span style="font-family:'Comfortaa', san-serif;font-size:22px;">
Tulisan Disini
</span>

Hasilnya adalah sebegai berikut ini
Ini adalah hasil tulisan yang menggunakan font Comfortaa dan memiliki tampilan font yang berbeda dengan tulisan yang lainnya yang ada didalam artikel ini

Bagaimana jika fontnya banyak?
Jika font yang digunakan banyak maka font yang dipilih di Google font juga banyak, sehingga link fontnya adalah seperti berikut ini
@import url(http://fonts.googleapis.com/css?family=Quicksand:700|Lobster);

Dengan menggunakan fungsi SPAN, maka hasil dari penggunaan font yang banyak di artikel blog adalah seperti berikut ini
Tulisan ini menggunakan font Quicksand Tulisan ini menggunakan font Lobster Tulisan ini menggunakan font Comfortaa

Bagaimana keren bukan penggunaan font Comfortaa diatas, jika tertarik untuk mengganti & memasang font di artikel silahkan gunakan cara diatas :)

Cara Lengkap Memasang Google Font di Blog

Cara Lengkap Memasang Google Font di Blog - Jika didalam blog tidak ingin terpasang font yang aneh-aneh maka cukup menggunakan font yang umum dikenal oleh browser yang tidak perlu memasang kode font tersebut kedalam template. Namun jika ingin memasang font-font tertentu yang tidak bisa di load oleh web browser yang digunakan maka diperlukan penambahan kode font tersebut kedalam template

Baca juga



Cara Lengkap Memasang Google Font di Blog

Untuk memasang font di blog, langkah pertama yang perlu dilakukan adalah memilih dan menentukan font itu sendiri dan memilih font yang dipasang, anjuran saya adalah memilihnya di Google fonts dengan mengunjungi http://www.google.com/fonts
Kenapa harus menggunakan Google fonts? Karena font-font yang disediakan oleh Google tersebut sifatnya bebas dan mudah digunakan yang telah dilengkapi dengan kode-kode css/script untuk dipasang kedalam blog

Di Google font terdapat 600 font yang bisa digunakan dan bisa digunakan secara bebas. Selain itu, juga terdapat pengaturan-pengaturan yang sudah disediakan untuk menggunakan font-font yang telah dipilih. Misalnya di menu bagian sebelah kiri, bisa mengetahui bentuk font tersebut yang terdapat pada menu Show all styles dan di bagian atas, bisa diketahui bentuk font yang digunakan dengan menuliskan teks atau kalimat di kolom Preview Text

Memasang Google Font di Blogger
Untuk memasang font di blogger lebih mudah dilakukan daripada memasangnya di WordPress yang masih memerlukan plugin untuk di upload. Pilih fonta yang akan digunakan dan klik tombol Quick-use

Pada halaman berikutnya akan terlihat tampilan beberapa bentuk dari font yang telah dipilih tadi, scroll kebawah sampai pada kolom seperti berikut ini

Salin kode <link href='http://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
dan jangan lupa menambahkan string dibelakang kode, sehingga menjadi seperti berikut ini
<link href='http://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css' /> kedalam template blog

Sekarang bukalah akun blogger Anda....
Didalam dashboard akun blogger, pilih salah satu blog yang ingin dipasang kode font, selanjutnya ikuti langkah berikut ini :
Pilih menu Template >> Edit HTML
Cari kode <head> atau </head> dan salin kode font seperti berikut ini setelah atau sebelum <head> atau </head>
<link href='http://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css' />
Simpan template

Untuk mengganti tampilan font blog....
Masih didalam pengeditan template blog, carilah element atau bagian blog yang ingin diganti fontnya, misalnya Anda akan mengganti seluruh font artikel blog, maka kodenya seperti berikut:

.post-body {
font-family: Arial;
font-size: 22pxk;
line-height: 1.4em;
}

Element pada post-body tersebut akan menghasilkan bentuk tulisan artikel seperti berikut ini dengan menggunakan font Arial

Cara Lengkap Memasang Google Font di Blog - Jika didalam blog tidak ingin terpasang font yang aneh-aneh maka cukup menggunakan font yang umum dikenal oleh browser yang tidak perlu memasang kode font tersebut kedalam template. Namun jika ingin memasang font-font tertentu yang tidak bisa di load oleh web browser yang digunakan maka diperlukan penambahan kode font tersebut kedalam template

.post-body {
font-family: 'Comfortaa', san-serif;
font-size: 22pxk;
line-height: 1.4em;
}


Element pada post-body tersebut akan menghasilkan bentuk tulisan artikel seperti berikut ini dengan menggunakan font Comfortaa

Cara Lengkap Memasang Google Font di Blog - Jika didalam blog tidak ingin terpasang font yang aneh-aneh maka cukup menggunakan font yang umum dikenal oleh browser yang tidak perlu memasang kode font tersebut kedalam template. Namun jika ingin memasang font-font tertentu yang tidak bisa di load oleh web browser yang digunakan maka diperlukan penambahan kode font tersebut kedalam template

Itulah cara lengkap memasang google font di blog. Dengan memasang font seperti cara diatas, maka font tersebut akan berlaku untuk semua element yang menggunakan font tersebut. Bagaimana jika hanya artikel tertentu saja yang memiliki font berbeda dengan yang lainnya? Atau seperti yang terlihat pada artikel ini. Untuk itu akan saya update pada artikel berikutnya :)