Sử Dụng Google Fonts

Hoàng Tùng

Trong bài học này chúng ta sẽ tìm hiểu cách sử dụng phông Google (hay Google fonts) cho trang web.

Chọn Phông

Google cung cấp cho chúng ta nhiều phông chữ khác nhau để sử dụng. Để chọn phông thì đầu tiên bạn hãy truy cập trang chủ của Google Fonts. Ở trang này bạn sẽ thấy danh sách các phông cung cấp bởi Google. Bạn cũng có thể sử dụng ô tìm kiếm ở góc trên ngoài cùng phía trái để tìm kiếm theo tên phông.

Nhấp vào liên kết của phông để xem thông tin chi tiết về phông và nếu như muốn chọn sử dụng phông bạn sẽ nhấn vào SELECT THIS FONT. Ở bài học này chúng ta sẽ chọn phông Roboto vì phông này hỗ trợ tất cả các ký tự trong tiếng Việt:

Chọn phông Goolge sẽ sử dụng

Sau khi chọn phông bạn cần tiếp tục click vào tab Family Selected nằm ở phía cuối màn hình để mở rộng tab này:

Click mở rộng tab chứa các phông đã chọn

Trong cửa sổ mở rộng của tab bạn sẽ tìm thấy đoạn code HTML với thẻ <link> dùng để nhúng phông như hình phía dưới đây:

Cửa sổ mở rộng chứa thông tin chi tiết các phông đã chọn

Thiết Lập Phông

Để thiết lập thêm các tuỳ chọn như kiểu chữ (in đậm, in nghiêng) và ngôn ngữ sẽ được hỗ trợ bởi phông thì bạn cần nhấp vào tab CUSTOMIZE nằm trong cùng cửa sổ chứa các phông đã chọn.

Tích chọn các kiểu chữ sẽ được hỗ trợ bởi phông như hình dưới đây:

Thiết lập  kiểu chữ hỗ trợ bởi phông

Để thiết lập hỗ trợ tiếng Việt cho phông thì vẫn ở trong tab CUSTOMIZE, bạn kéo xuống phía dưới để thấy phần lựa chọn Languages:

Thiết lập hỗ trợ tiếng Việt bởi phông

Tích vào ô checkbox tương ứng để chọn ngôn ngữ Vietnamese.

Sử Dụng Phông

Sau khi thêm vào các thiết lập cho phông, bạn quay về tab con *EMBED và sao chép đoạn code chứa thẻ <link> đã được cập nhật lại để hỗ trợ hiển thị tiếng Việt.

<link href="https://fonts.googleapis.com/css?family=Roboto&amp;subset=vietnamese" rel="stylesheet">

Mở tập tin home.html và dán vào bên trong thẻ <head> ở vị trí ngay trước thẻ <link> dùng nhúng tập tin main.css như hình dưới đây:

...
    <head>
        ...
        <link href="https://fonts.googleapis.com/css?family=Roboto&amp;subset=vietnamese" rel="stylesheet">
        <link rel="stylesheet" href="stylesheets/main.css">
    </head>
...

Thực hiện thao tác trên với các tập tin contact.htmlabout.html.

Để sử dụng phông mới này bạn cần sao chép đoạn code trong tab EMBED nằm dưới mục Specify in CSS như trong hình phía dưới đây:

Code CSS dùng sử dụng google phông trên trang web

Quay trở lại tập tin main.css dán vào bên trong đoạn code áp dụng cho phần tử body:

body {
    font-family: 'Roboto', sans-serif;
}

Cuối cùng tải lại các trang web trên trình duyệt để xem hiển thị của trang với phông chữ mới.

Thêm Phản Hồi

Câu Hỏi Liên Quan

Hướng Dẫn Liên Quan

  • HTML Cơ Bản

    HTML là ngôn ngữ cơ bản và phổ biến nhất và được dùng để tạo ra tất cả các website trên thế giới. Kh...
  • ES6 Cơ Bản

    Ra đời từ sau *cuộc chiến trình duyệt* giữa các công ty công nghệ phát triển trình duyệt như Microso...
  • JavaScript Date Object

    Ngôn ngữ JavaScript cung cấp sẵn đối tượng Date giúp cho cho lập trình viên có thể dễ dàng làm việc...