Font Roboto - Cara Pemasangan dan Penggunaan di Blog

Font Roboto lebih dikenal sebagai Ice Cream Sandwich (ICS), font ini dikenalkan oleh Google bersamaan dengan dirilisnya Android 4.0. Font Roboto support dengan layar kecil smartphone maupun layar besar untuk tablet . Font ini selain digunakan di OS Android dan juga di situs Google Play Store.

Font Roboto terlihat sederhana, namun dari kesederhanaan itu tampak sebuah rasa elegan . Font ini menurut saya mirip dengan Arial bahkan lebih mirip lagi dengan Helvetica. Font Roboto banyak disukai oleh pengguna OS karena jenis font ini terlihat tidak menyilaukan mata dan jelas.

Belum lama ini Blog Aak mengganti font jenis Roboto , bagi Anda juga yang tertarik memasang Font Roboto pada Blog-nya berikut ini langkah-langkahnya :

Buka Editor Template kemudian copy kode berikut ini dan letakkan URL font Roboto di atas kode </head>,

<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 penerapan kode diatas selasai , selanjutnya kepengaturan CSS agar font pada Blog Anda berubah menjadi Roboto. Berikut ini contoh diambil dari kode font Blog Aak :

.post h2 {
font-family: "Roboto Slab", Arial, Sans-Serif;
font-size: 240%;
font-style:normal;
font-weight:700;
}

Beberapa contoh penggunaan pada CSS.

CSS

.nama css {
font-family: 'Roboto';
font-size: 14px;
font-style: italic;
font-weight: 400;
}



Hasilnya :

Font Roboto - Cara Pemasangan dan Penggunaan di Blog

CSS

.nama css {
font-family: 'Roboto';
font-size: 20px;
font-style: normal;
font-weight: 500;
}



Hasilnya:

Font Roboto - Cara Pemasangan dan Penggunaan di Blog

CSS

.nama css {
font-family: 'Roboto';
font-size: 20px;
font-style: normal;
font-weight: 700;
}

Hasilnya:

Font Roboto - Cara Pemasangan dan Penggunaan di Blog

CSS

.nama css {
font-family: 'Roboto Slab';
font-size: 24px;
font-style: italic;
font-weight: 100;
}


Hasilnya :

Font Roboto - Cara Pemasangan dan Penggunaan di Blog

CSS:

.nama css {
font-family: 'Roboto Slab';
font-size: 24px;
font-style: normal;
font-weight: 400;
}

Hasilnya:

Font Roboto - Cara Pemasangan dan Penggunaan di Blog

CSS:

.nama css {
font-family: 'Roboto Slab';
font-size: 24px;
font-style: normal;
font-weight: 700;
}

Hasilnya:

Font Roboto - Cara Pemasangan dan Penggunaan di Blog

Penjelasan :

1. Ganti properti font atau font-family dalam template Anda dengan font-family:'Roboto', Arial, sans-serif atau font:'Roboto', Arial, sans-serif.
2. Untuk huruf  tebal tidak menggunakan font-weight: bold , karena pada font Roboto ini menggunakan font-weight: 700; 
3. Apabila properti font-weight:bold tidak dibutuhkan kembali dengan demikian ganti semuanya dengan font-weight: 700; karena value bold sudah ditetapkan dalam font Roboto.

Selamat mencoba dan semoga bermanfaat!

Subscribe to receive free email updates: