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 dipakai di OS Android dan juga di situs Google Play Store.

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

Belum usang 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 lalu copy arahan 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 arahan diatas selasai , selanjutnya kepengaturan CSS semoga font pada Blog Anda berkembang menjadi Roboto. Berikut ini rujukan diambil dari arahan font Blog Aak :

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

Beberapa rujukan 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 karakter  tebal tidak memakai font-weight: bold , alasannya pada font Roboto ini memakai 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!


Sumber http://www.websiteedukasi.com/