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

Phông chữ Roboto là một kiểu chữ theo đẳng cấp sans-serif được sáng tạo bởi Google. Phông chữ này đã xuất hiện từ các 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ó tính 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 dùng chủ yếu trên các ứng dụng hệ thống và tất cả những ứng dụng của Google.

Có một tin vui cho các người yêu thích phông chữ này, đó là các nhà phát triển của Google đã ban 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 tận gốc có thể sử dụng nó trên Windows, MAC, Linux hoặc cho dù trên trang web của mình.

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

Tải về Google Roboto

Cho dù bạn dùng hệ điều hành nào đi chăng nữa thì vấn đề đầ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 trư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 mọi thứ 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 mọi thứ các phông chữ, sau đó bấm 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ũng có thể sử dụng phông chữ Roboto trên các phần mềm 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ỳ phần mềm 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ì việc 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ũng đều 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 mong 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 phía 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    ;   

Hãy chắc chắn rằng bạn thay đổi “src” đến đường dẫn của thư mục phông chữ.

Tiếp theo, bạn sử dụng cú pháp sau để hiển thị phông chữ Roboto trên trang web của mình:

   font-family    :    "Roboto"    ;   

Chúc bạn cài đặt được nghĩ mình những phông chữ vừa ý.

Xem thêm:

• Website giúp bạn quản lý toàn bộ font chữ đã được cài đặt trong máy tính
• 5 trang web tìm và tải font chữ miễn phí
• Hướng dẫn tải về bộ font chữ miễn phí khổng lồ từ Google, hỗ trợ tiếng Việt
• 8 công cụ “nhận diện” font chữ sử dụng trên phần mềm hoặc trang web

Từ khóa bài viết: Google Roboto, Google Roboto Font, phông chữ Google Roboto, cài đặt phông chữ Google Roboto, Google Roboto Windows, Google Roboto Mac, Google Roboto Linux, cài đặt Google Roboto cho trang web, Cách cài Google Roboto

Bài viết Cách cài đặt phông chữ Google Roboto trên Windows, Mac và Linux được tổng hợp sưu tầm và biên tập bởi nhiều user – Sửa máy tính PCI – TopVn Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho chúng tôi để điều chỉnh. Xin cảm ơn.