Phông chữ Roboto là một kiểu chữ sans-serif do Google tạo ra. Nó thanh lịch và hiển thị tốt trên màn hình có độ phân giải cao như điện thoại Android. Do đó, nó hoàn toàn phù hợp cho nhiều ứng dụng. Hơn thế nữa, việc cài đặt phông chữ Roboto trên Windows, macOS và Linux là một phần nhỏ.
Trong bài đăng này, chúng tôi hướng dẫn bạn cách cài đặt phông chữ Google Roboto trên Windows, macOS, Linux và thậm chí trên trang web của bạn. Hãy bắt đầu!
Tải xuống Phông chữ Google Roboto
Bất kể nền tảng của bạn là gì, trước tiên bạn cần tải xuống gói phông chữ Roboto. Để làm điều này, hãy truy cập trang web phông chữ Roboto. Cách đơn giản nhất để tải xuống toàn bộ họ phông chữ là nhấp vào nút “Tải xuống Họ”.
Nó sẽ kết thúc dưới dạng tệp ZIP trên máy tính của bạn, tại thời điểm đó, bạn có thể cài đặt nó trên Hệ điều hành (OS) của mình.
Cách cài đặt Phông chữ Google Roboto trên Windows, Mac và Linux
Tin tuyệt vời là bất kể bạn muốn cài đặt phông chữ Roboto trên nền tảng nào, sẽ chỉ cần nhấp chuột.
1. Windows 10
Đối với Windows, trước tiên hãy giải nén thư mục phông chữ Roboto. Tiếp theo, đi tới Menu Bắt đầu và mở trang Cài đặt.
Từ đây, hãy nhấp vào tùy chọn Định danh, sau đó nhấp vào Phông chữ.
Tiếp theo, kéo các phông chữ đã giải nén vào cửa sổ trình cài đặt. Sau một vài giây, phông chữ Google Roboto sẽ được cài đặt trong Windows. Bạn có thể chọn nó như cách bạn làm với bất kỳ phông chữ nào khác từ trong các ứng dụng đã cài đặt của bạn.
2. macOS
Đối với Mac, trước tiên hãy giải nén tệp ZIP, sau đó chọn tất cả các phông chữ bên trong thư mục (bỏ qua LICENSE.txt), nhấp chuột phải và chọn “Open With -> Font Book” từ menu ngữ cảnh.
Thao tác này sẽ tải chúng vào Font Book và sẽ cung cấp chúng để sử dụng trong các ứng dụng của bạn.
Lưu ý rằng bạn cũng có thể bấm đúp vào các tệp phông chữ riêng lẻ để tải chúng vào Sách Phông chữ.
3. Linux
Mở thư mục chính của bạn và bật tùy chọn để xem các tệp / thư mục ẩn. Tìm thư mục “.fonts”. Nếu nó không tồn tại, hãy tạo nó. Tiếp theo, di chuyển thư mục phông chữ Roboto vào thư mục “.fonts” này.
Ngoài ra, bạn có thể sử dụng chương trình Trình quản lý phông chữ để quản lý phông chữ của mình.
1. Cài đặt Trình quản lý Phông chữ từ Trung tâm Phần mềm hoặc kho lưu trữ.
2. Sau khi cài đặt xong, hãy mở ứng dụng này và ứng dụng Phông chữ (một lần nữa, từ Thanh tìm kiếm).
3. Trong Trình quản lý phông chữ, hãy đảm bảo rằng bạn đang ở trên tab Quản lý và nhấp vào biểu tượng Dấu cộng.
4. Điều hướng đến thư mục phông chữ đã giải nén của bạn và thêm chúng theo yêu cầu.
Sau khi khởi động lại các ứng dụng đang sử dụng, bạn sẽ thấy phông chữ Roboto có sẵn để lựa chọn.
Sử dụng Phông chữ Google Roboto trên Trang web
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 CSS3 @font-face cú pháp để nhúng phông chữ bên ngoài vào trang web của bạn.
Truy cập trang phông chữ FontSquirrel Roboto, nhấp vào “Webfont Kit”, sau đó chọn định dạng phông chữ ưa thích của bạn, một tập hợp con (nếu có) và nhấp vào “Tải xuống @ Font-Face Kit.”
Giải nén tệp đã nén vào thư mục phông chữ trang web của bạn. Mở biểu định kiểu 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;
} Đảm bảo rằng bạn thay đổi “src” để trỏ đến đường dẫn của thư mục phông chữ.
Tiếp theo, bạn có thể sử dụng cú pháp font-family:"Roboto"; để hiển thị phông chữ Roboto trên trang web của bạn.
Kết luận
Phông chữ Roboto của Google là một sự thay thế đầy phong cách cho các phông chữ chính như Helvetica và Arial. Hơn nữa, nó còn đi đầu trong sáng kiến Thiết kế Vật liệu của Google. Mặc dù vậy, Roboto hoạt động trên tất cả các ứng dụng và việc cài đặt nó trên Windows, macOS, Linux và thậm chí cả trang web của bạn thật dễ dàng.
Nếu bạn không phải là người yêu 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 khác nhau có thể giúp bạn tìm hiểu phông chữ nào được sử dụng trên một trang web cụ thể. Bạn có sử dụng phông chữ Roboto trên máy tính của mình không và nếu có thì 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!