Cara Menggunakan Font Roboto di Windows, Mac dan Linux
Font Roboto adalah jenis huruf sans-serif yang dibuat oleh Google yang telah ada sejak zaman Android 4.0 (Ice Cream Sandwich). Ini adalah font elegan yang ditampilkan dengan baik di layar dengan resolusi tinggi seperti ponsel Android.
Roboto berisi set lengkap gaya tulisan (termasuk regular, bold, italic dan bold italic) dan digunakan terutama untuk aplikasi system dan semua aplikasi Google.
Jika anda menyukai font tersebut dan ingin menggunakannya di Windows, Mac, Linux, atau bahkan di website anda, anda beruntung. Pengembang dari Google telah merilis font Roboto secara gratis dan anda dapat menggunakannya tanpa batasan (di bawah Apache Software License).
Berikut cara memasang font Roboto di semua platform.
Download Font Roboto Google
Apapun platform yang anda gunakan, anda harus mendownload font Roboto pack terlebih dahulu.
Buka website font Roboto dan download font (file zip). Anda hanya perlu mengklik Download family dan font file zip akan di download.
Jika anda hanya ingin menggunakan gaya tulisan tertentu dari font Roboto, pilih Select this style di setiap gaya font yang anda inginkan dan kemudian klik Download family.
Ekstrak file zip ke folder pilihan anda. Buka foldernya dan anda akan melihat semua font Roboto di dalamnya.
Install Font Roboto di Windows 10
Buka folder font Roboto dan pilih semua gaya font Roboto. Klik kanan pada font dan pilih Install dari daftar menu. Disini anda akan menemukan dua pilihan install, jika anda hanya menginginkan font ini digunakan hanya oleh anda sebagai admin maka pilih Install, namun jika user account lain di PC anda juga boleh menggunakannya maka pilih Install for all users. Pilihan kedua hanya dapat dilakukan oleh admin.
Langkah diatas akan menginstall font ke mesin Windows anda. Anda sekarang dapat menggunakan font Roboto di aplikasi anda.
Sebagai alternatif, anda dapat mengcopy semua gaya font Roboto dan mempastenya di Control Panel - Font.
Instal Font Roboto di Linux
Buka folder utama anda dan aktifkan opsi untuk melihat file/folder tersembunyi. Temukan folder .fonts. Jika tidak ada, buatlah. Selanjutnya, pindahkan folder font Roboto ke folder .fonts ini.
REstart LibreOffice, GIMP, Photoshop, atau aplikasi apapun yang anda gunakan. Anda akan melihat font Roboto tersedia untuk dipilih.
Install Font Roboto di Mac
Mirip dengan Windows. Ekstrak font kemudian klik dobel untuk menginstalnya dan font tersebut akan muncul di Font Book anda. Sebagai alternatif, anda dapat drag and drop semuanya ke Font Book anda.
Install Font Roboto di Website Anda
Jika anda ingin menggunakan font Roboto di website anda, anda dapat menggunakan sintaks CSS3 “@font-face” untuk menyematkan font eksternal ke halaman website anda.
Buka halaman FontSquirrel Roboto, klik tab Webfont Kit, kemudian pilih format font yang anda sukai pada bagian Choose a Subset: (jika ada) dan klik Download @Font-Face Kit.
Ekstrak file zip dan buka folder web fonts anda. Buka stylesheet website anda dan tambahkan kode berikut dibawah.
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular-webfont.eot');
src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-Regular-webfont.woff') format('woff'),
url('Roboto-Regular-webfont.ttf') format('truetype'),
url('Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Italic-webfont.eot');
src: url('Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-Italic-webfont.woff') format('woff'),
url('Roboto-Italic-webfont.ttf') format('truetype'),
url('Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Bold-webfont.eot');
src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-Bold-webfont.woff') format('woff'),
url('Roboto-Bold-webfont.ttf') format('truetype'),
url('Roboto-Bold-webfont.svg#RobotoBold') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-BoldItalic-webfont.eot');
src: url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-BoldItalic-webfont.woff') format('woff'),
url('Roboto-BoldItalic-webfont.ttf') format('truetype'),
url('Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Thin-webfont.eot');
src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-Thin-webfont.woff') format('woff'),
url('Roboto-Thin-webfont.ttf') format('truetype'),
url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-ThinItalic-webfont.eot');
src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-ThinItalic-webfont.woff') format('woff'),
url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Light-webfont.eot');
src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-Light-webfont.woff') format('woff'),
url('Roboto-Light-webfont.ttf') format('truetype'),
url('Roboto-Light-webfont.svg#RobotoLight') format('svg');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-LightItalic-webfont.eot');
src: url('Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-LightItalic-webfont.woff') format('woff'),
url('Roboto-LightItalic-webfont.ttf') format('truetype'),
url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Medium-webfont.eot');
src: url('Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-Medium-webfont.woff') format('woff'),
url('Roboto-Medium-webfont.ttf') format('truetype'),
url('Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-MediumItalic-webfont.eot');
src: url('Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-MediumItalic-webfont.woff') format('woff'),
url('Roboto-MediumItalic-webfont.ttf') format('truetype'),
url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');
font-weight: 300;
font-style: italic;
}
Pastikan anda mengubah "src" untuk menunjuk ke jalur folder font.
Selanjutnya, anda dapat menggunakan sintaks dibawah ini untuk menampilkan font Roboto di halaman website anda.
font-family:"Roboto";
Sekian tutorial kali ini, semoga bermanfaat. Jangan lupa tinggalkan komentar anda dibawah ini untuk berbagi pemikiran dalam mengikuti tutorial ini. Terimakasih dan GBU. BERSATU LAWAN COVID-19!!
Post a Comment for "Cara Menggunakan Font Roboto di Windows, Mac dan Linux"