Chuyển đến nội dung chính

Google Fonts

  1. Truy cập Google Fonts và chọn phông chữ bạn thích.

  2. Trên trang phông chữ, tìm và nhấp vào nút Get font.

1

  1. Nhấp vào Get embed code.

2

  1. Chọn @import.

3

  1. Chúng ta cần sao chép hai phần ở đây:

4

Phần Một

Với phông chữ tôi đã chọn, mã nhúng do Google cung cấp trông như thế này:

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');
</style>

Chúng ta chỉ cần sao chép phần sau dấu hỏi trong URL (được tô đỏ trong hình phía trên) và dán vào trường Google Fonts (Font families) trong trang tùy chọn của plugin. Trong ví dụ này, tôi chỉ cần sao chép family=Noto+Sans+JP:[email protected]&display=swap.

Phần Hai

Với phông chữ này, mã kiểu do Google cung cấp trông như thế này:

// <uniquifier>: Sử dụng một tên lớp duy nhất và có tính mô tả
// <weight>: Sử dụng một giá trị từ 100 đến 900

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

Chúng ta chỉ cần phần được tô đỏ trong hình phía trên.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

Đôi khi bạn cần điền một số giá trị vào trong các kiểu. Ví dụ, với phông chữ này, giá trị cho font-weight là <weight>, điều đó có nghĩa là bạn cần cung cấp một giá trị. Các phần giữ chỗ này thường được đặt trong <>. Bạn có thể tìm các giá trị tương ứng trên Mozilla.

Đối với font-weight, chúng ta có thể dùng normal.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;

Dán nội dung này vào trường Google Fonts (CSS properties) trong trang tùy chọn của plugin.

  1. Hoàn tất thiết lập.

5

  1. Quay lại trang video để xem phông chữ đã được áp dụng. Hình bên dưới cho thấy Noto Sans Japanese và Noto Serif Japanese đang được sử dụng.

6