Manisnya Font Roboto - Cara Pasang dan Penggunaan


Baru-baru ini saya mengganti font jelasinblog dengan font tipe Roboto. Ini adalah font yang digunakan oleh Google pada OS Android dan juga di situs Google Play Store. Font ini mirip dengan Arial tetapi lebih mirip lagi dengan Helvetica sehingga ada yang mengatakan Roboto adalah Helvetica versi Google. Bahkan sebagian mereka mengatakan Google mungkin akan menghadapi tuntutan pengadilan karena hal ini.

Terlepas dari itu semua, bagi saya Roboto adalah Helvetica yang disempurnakan.

Bagi Anda yang tertarik silahkan ikuti tutorial cara memasang font Roboto di blog. Tanpa buang-buang waktu mari kita mulai!

Cara Memasang font Roboto


Mula-mula letakkan URL font Roboto dalam tag <head>, mudahnya letakkan saja tepat di atas tag </head>. Copy-paste URL lengkapnya sebagai berikut.

<style type="text/css">@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(//fonts.gstatic.com/s/roboto/v14/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(//fonts.gstatic.com/s/roboto/v14/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), local('Roboto-Regular'), url(//fonts.gstatic.com/s/roboto/v14/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(//fonts.gstatic.com/s/roboto/v14/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(//fonts.gstatic.com/s/roboto/v14/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'), url(//fonts.gstatic.com/s/roboto/v14/12mE4jfMSBTmg-81EiS-YRsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(//fonts.gstatic.com/s/roboto/v14/7m8l7TlFO-S3VkhHuR0at4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(//fonts.gstatic.com/s/roboto/v14/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Slab Thin'), local('RobotoSlab-Thin'), url(//fonts.gstatic.com/s/robotoslab/v6/MEz38VLIFL-t46JUtkIEgCeJLMOzE6CCkidNEpZOseY.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Slab Light'), local('RobotoSlab-Light'), url(//fonts.gstatic.com/s/robotoslab/v6/dazS1PrQQuCxC3iOAJFEJR_xHqYgAV9Bl_ZQbYUxnQU.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(//fonts.gstatic.com/s/robotoslab/v6/y7lebkjgREBJK96VQi37ZobN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(//fonts.gstatic.com/s/robotoslab/v6/dazS1PrQQuCxC3iOAJFEJTqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}</style>

Penggunaan font Roboto dalam CSS

Setelah Anda meletakkan URL lengkap sekarang mari kita terapkan pada CSS agar font blog Anda berubah menjadi Roboto. Contoh, penerapan pada judul artikel Jelasinblog saat ini (H1):

.ll-post-index-page h1 {
    font-size: 28px;
    font-family: "Roboto Slab",Arial,sans-serif;
    font-style:normal;
    font-weight: 400;
}

Beberapa contoh penggunaan (DEMO).

CSS:
.apapun {
  font-family: 'Roboto';
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
}
Hasilnya:
Manisnya Font Roboto - Cara Pasang dan Penggunaan

CSS:
.apapun {
  font-family: 'Roboto';
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
}
Hasilnya:
Manisnya Font Roboto - Cara Pasang dan Penggunaan

CSS:
.apapun {
  font-family: 'Roboto';
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
}
Hasilnya:
Manisnya Font Roboto - Cara Pasang dan Penggunaan

CSS:
.apapun {
  font-family: 'Roboto Slab';
  font-size: 24px;
  font-style: italic;
  font-weight: 100;
}
Hasilnya:
Manisnya Font Roboto - Cara Pasang dan Penggunaan

CSS:
.apapun {
  font-family: 'Roboto Slab';
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
}
Hasilnya:
Manisnya Font Roboto - Cara Pasang dan Penggunaan

CSS:
.apapun {
  font-family: 'Roboto Slab';
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
}
Hasilnya:
Manisnya Font Roboto - Cara Pasang dan Penggunaan

  • Ganti semua properti font:.... atau font-family:... dalam template Anda dengan font-family:'Roboto', Arial, sans-serif atau font:'Roboto', Arial, sans-serif.
  • Kita tidak perlu menggunakan font-weight:bold untuk huruf tebal, melainkan font-weight: 700;
  • Jika semua properti font-weight:bold tidak "dibutuhkan" maka ganti semuanya dengan font-weight: 700; karena value bold sudah ditetapkan dalam URL font Roboto.
Selesai, selamat mencoba manisnya font Roboto :)

Mungkin Anda tertarik juga membaca artikel terkait: Setiap Artikel Blog Beda Font.

Komentar

  1. Pertamax ^^

    blog ane uda make bang ..

    BalasHapus
  2. Iya :)
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald' rel='stylesheet' type='text/css'/>

    BalasHapus
    Balasan
    1. bang sekalian share template yg agan pke' ^:D

      Hapus
  3. Wih pengen pakai font ini juga biar tampilannya sama seerti web ini.
    mohon sarannya ya bang, saya masih newbie blog :)
    shemars.blogspot.com

    BalasHapus
  4. <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald' rel='stylesheet' type='text/css'/>

    BalasHapus
  5. http://3.bp.blogspot.com/-0K-ibEa4R24/VIz7_dMUJPI/AAAAAAAAGcA/SzOWg_FX2qA/s1600/cara-pasang-font-roboto.PNG

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template