Font Roboto là một loại font không chân (sans-serif) do Google tạo ra. Nó có thiết kế thanh lịch và hiển thị tốt trên các màn hình độ phân giải cao như điện thoại Android. Do đó, đây là lựa chọn hoàn hảo cho nhiều ứng dụng. Thêm vào đó, việc cài đặt font Roboto trên Windows, macOS và Linux rất đơn giản.
Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách cài đặt font Google Roboto trên Windows, macOS, Linux, thậm chí trên website của bạn. Hãy bắt đầu ngay!
Tải xuống font Google Roboto
Dù bạn sử dụng nền tảng nào, trước tiên bạn cần tải bộ font Roboto. Hãy truy cập trang web font Roboto. Cách đơn giản nhất để tải toàn bộ họ font là nhấp vào nút "Download Family" (Tải xuống họ font).
File sẽ được tải về dưới dạng file ZIP trên máy tính của bạn, tại thời điểm này bạn có thể cài đặt nó trên Hệ điều hành (OS).
Cách cài đặt font Google Roboto trên Windows, Mac và Linux
Tin tốt là bất kể nền tảng nào bạn muốn cài đặt font Roboto, quá trình chỉ mất vài cú nhấp chuột.
1. Windows 10
Đối với Windows, trước tiên hãy giải nén thư mục font Roboto. Tiếp theo, mở menu Start và truy cập trang Settings (Cài đặt).
Tại đây, nhấp vào tùy chọn Personalization (Cá nhân hóa), sau đó chọn Fonts (Font chữ).
Kéo các font đã giải nén vào cửa sổ cài đặt. Sau vài giây, font Google Roboto sẽ được cài đặt trong Windows. Bạn có thể chọn nó như bất kỳ font nào khác từ các ứng dụng đã cài đặt.
2. macOS
Đối với Mac, trước tiên hãy giải nén file ZIP, sau đó chọn tất cả các font bên trong thư mục (bỏ qua file LICENSE.txt), nhấp chuột phải và chọn "Open With → Font Book" (Mở với → Font Book) từ menu ngữ cảnh.
Điều này sẽ tải chúng vào Font Book và làm cho chúng có sẵn để sử dụng trong các ứng dụng của bạn.
Lưu ý: Bạn cũng có thể nhấp đúp vào từng file font riêng lẻ để tải chúng vào Font Book.
3. Linux
Mở thư mục home và bật tùy chọn hiển thị file/thư mục ẩn. Tìm thư mục ".fonts". Nếu nó không tồn tại, hãy tạo mới. Tiếp theo, di chuyển thư mục font Roboto vào thư mục ".fonts" này.
Thay vào đó, bạn có thể sử dụng chương trình Font Manager để quản lý font chữ.
- Cài đặt Font Manager từ Software Center hoặc kho phần mềm.
- Sau khi cài đặt, mở Font Manager và ứng dụng Fonts (từ thanh tìm kiếm).
- Trong Font Manager, đảm bảo bạn đang ở tab Manage (Quản lý) và nhấp vào biểu tượng dấu cộng.
- Điều hướng đến thư mục font đã giải nén và thêm chúng theo yêu cầu.
Sau khi khởi động lại các ứng dụng bạn đang sử dụng, bạn sẽ thấy font Roboto có sẵn để lựa chọn.
Sử dụng font Google Roboto trên Website
Nếu bạn muốn sử dụng font Roboto trên website, bạn có thể dùng cú pháp CSS3 @font-face để nhúng font bên ngoài vào trang web.
Truy cập trang font Roboto của FontSquirrel, nhấp vào "Webfont Kit", chọn định dạng font ưa thích, subset (nếu có) và nhấp "Download @Font-Face Kit".
Giải nén file zip vào thư mục font của website. Mở file stylesheet web 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'); 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; }
Đảm bảo bạn thay đổi "src" để trỏ đến đường dẫn thư mục font.
Tiếp theo, bạn có thể dùng cú pháp font-family:"Roboto"; để hiển thị font Roboto trên trang web.
Kết luận
Font Roboto của Google là một lựa chọn thay thế thanh lịch cho các font chính thống như Helvetica và Arial. Thêm vào đó, nó là tiên phong trong sáng kiến Material Design của Google. Dù vậy, Roboto hoạt động tốt trong mọi loại ứng dụng, và việc cài đặt nó trên Windows, macOS, Linux, thậm chí website của bạn rất dễ dàng.
Nếu bạn không thích Roboto, bài viết của chúng tôi về cách kiểm tra các yếu tố thiết kế trang web có thể giúp bạn biết font nào được dùng trên một trang web cụ thể. Bạn có dùng font Roboto trên máy tính không, và nếu có, cho mục đích gì? Hãy cho chúng tôi biết trong phần bình luận bên dưới!