Download bộ font chữ Roboto hiện đại cho điện thoại và máy tính

thiết lập 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 đấy 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 chúng ta sau ít phút. Bây giờ bạn đã có thể trải nghiệm phông chữ Roboto trên các app trong máy.

thiết lập Roboto Font trên Linux

Mở thư mục chính của chúng ta và sau đấy bật chế độ cho phép các tệp/thư mục ẩn. Tìm thư mục “.fonts”. nếu như vẫn chưa có, hãy tạo một thư mục mới có đuôi “.fonts”. kế đến, 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 có thể thấy phông chữ Roboto xuất hiện để Lựa chọn.

thiết lập Roboto Font trên MAC

so với MAC thì cách làm tương tự như trên Windows. trước tiên bạn giải nén phông chữ, nhấp đúp để cài đặt và Roboto sẽ hiển thị trong Font Book. của chúng ta. ngoài những điều ấy ra, bạn cũng có khả năng kéo và thả chúng vào Font Book của chúng ta.

cài đặt Roboto Font cho Web

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

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 tệp tải xuống 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;