Cách cài đặt phông chữ Google Roboto trên Windows, Mac và Linux

Phạm Hải

Phông chữ Roboto là một kiểu chữ theo phong cách sans-serif được sáng tạo bởi Google. Phông chữ này đã xuất hiện từ những ngày đầu ra mắt Android 4.0 (Ice Cream Sandwich) với ưu điểm là sự thanh lịch và cho khả năng hiển thị tốt trên màn hình có độ phân giải cao như điện thoại Android.

Roboto có đầy đủ các kiểu chữ (bao gồm kiểu thông thường, đậm, nghiêng, nghiêng và đậm) và được sử dụng chủ yếu trên các ứng dụng hệ thống và tất cả các ứng dụng của Google.

Có một tin tốt cho những người yêu thích phông chữ này, đó là các nhà phát triển của Google đã phát hành phông chữ Roboto miễn phí và bạn có thể sử dụng nó mà không bị hạn chế (theo Giấy phép Phần mềm Apache). Vậy nên giờ đây bạn hoàn toàn có thể sử dụng nó trên Windows, MAC, Linux hoặc thậm chí trên trang web của mình.

Dưới đây là cách cài đặt Google Roboto Font trên tất cả các nền tảng hệ điều hành kể trên.

Google Roboto

Tải về Google Roboto

Cho dù bạn dùng hệ điều hành nào đi chăng nữa thì việc đầu tiên và quan trọng nhất là tải bộ phông chữ Google Roboto về máy.

Truy cập trang Roboto font site và tải xuống phông chữ (file nén). Bạn cần phải nhấp vào “Select this Font” và sau đó ở cuối màn hình, nhấp vào tab tối màu có nội dung “1 Family Selected”.

Trong tab mới được mở, nhấp vào biểu tượng "download" để tải xuống phông chữ Roboto. Bộ phông chữ sau đó sẽ được tải về dưới dạng file zip.

Giải nén file zip bạn vừa tải về vào một thư mục tùy ý. Mở thư mục đó ra và bạn sẽ thấy tất cả các phông chữ Roboto bên trong.

Cài đặt Roboto Font trên Windows 10

Mở thư mục phông chữ Roboto. Chọn tất cả các phông chữ, sau đó nhấp chuột phải và chọn “Install”.

Đến đây phông chữ sẽ tự động được cài đặt vào hệ thống của bạn sau ít phút. Bây giờ bạn đã có thể sử dụng phông chữ Roboto trên các ứng dụng trong máy.

Cài đặt Roboto Font trên Linux

Mở thư mục chính của bạn và sau đó bật chế độ cho phép các tệp/thư mục ẩn. Tìm thư mục “.fonts”. Nếu không có, hãy tạo một thư mục mới có đuôi “.fonts”. Tiếp theo, di chuyển thư mục chứa phông chữ Roboto vào thư mục “.fonts” mà bạn vừa tạo.

Tiếp theo, bạn khởi động lại LibreOffice, GIMP, Photoshop hoặc bất kỳ ứng dụng nào mà bạn đang sử dụng. Bạn sẽ thấy phông chữ Roboto xuất hiện để lựa chọn.

Cài đặt Roboto Font trên MAC

Đối với MAC thì cách làm Tương tự như trên Windows. Đầu tiên bạn giải nén phông chữ, nhấp đúp để cài đặt và Roboto sẽ xuất hiện trong Font Book. của bạn. Ngoài ra, bạn cũng có thể kéo và thả chúng vào Font Book của bạn.

Cài đặt Roboto Font cho website

Nếu bạn muốn sử dụng phông chữ Roboto trên trang web của mình, bạn có thể sử dụng cú pháp “@ font-face” CSS3. Đây là củ pháp để nhúng các phông chữ từ bên ngoài vào trang web.

Truy cập trang phông chữ FontSquirrel Roboto, nhấp vào "Webfont Kit", sau đó chọn các định dạng phông chữ mà bạn thích và nhấp vào “Download @Font-Face Kit.”

Giải nén file tải về vào thư mục phông chữ cho trang web của bạn. Sau đó mở stylesheet trên trang web của bạn và thêm mã sau:

@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;