Cách host Google font tiếng Việt cho site Ghost

Hướng dẫn tự host font Google tiếng Việt cho site Ghost.

Cường Trần
Cường Trần
6 phút đọc

Tự host font Google sẽ đem lại lợi ích rất lớn về tốc độ tải trang và điểm số khi bạn chạy các bài kiểm tra như Pagespeed Insights.

Tuy nhiên, vì tự host font nó khá phức tạp nên hầu như toàn bộ theme Ghost đều không áp dụng vì bạn – người dùng phổ thông – sẽ rất rất khó thay đổi font khi có nhu cầu.

Tôi sẽ hướng dẫn bạn cách tự host font Google tiếng Việt cho site Ghost của bạn với 3 bước tương đối dễ làm sau:

1. Tải Google font về theme

Bạn sẽ không thể tải font Google tại site chính thức Google Font nhưng bạn có thể tải tại "bên thứ ba" – axllent.org.

Bạn chọn font bạn thích tại khung tìm kiếm. Sau đó đánh dấu chọn Latin + Vietnamese cùng với font weight phổ biến (thường dùng mọi theme) là Regular, 500, 600, 700, 800.

Ví dụ: Tải font Mulish của Google
Ví dụ: Tải font Mulish của Google

Các biến này tuỳ font và tùy bản thân bạn. Một theme đơn giản có thể chỉ có 2 font-weight là Regular700. Regular được dùng cho chữ nội dung, 700 font-weight thường dùng cho chữ tiêu đề hay đề mục.

Bạn giải nén file zip mới tải về, mở folder con static bạn chỉ lấy các file font với đuôi woff2. Còn lại XOÁ HẾT.

Xoá hết chỉ dùng woff2 font
Xoá hết chỉ dùng woff2 font

Tại sao chỉ woff2?

Font định dạng woff2 tương tự như định dạng ảnh webp vậy, hiện tại đã cực kỳ phổ biến, nên bạn dùng rất an toàn với hầu hết trình duyệt.

Font woff2 có kích thước siệu nhẹ vì đã nén sẵn, so với ttf thì nhẹ hơn rất nhiều (trên 50%) giúp bạn tối ưu hơn nhiều.

Woff2 – 96% mức độ phổ biến toàn cầu
Woff2 – 96% mức độ phổ biến toàn cầu

Bạn bỏ toàn bộ font woff2 vào folder mới đặt tên là fonts. Bạn chú ý, đặt tên và kiểm tra lại cho chính xác để tránh lỗi các bước sau.

Copy folder font vào thư mục assets trong theme của bạn.

# Cấu trúc theme Ghost
...
├── /assets
    ├── /css
    ├── /fonts
        ├── Mulish-Regular.woff2
        ├── Mulish-500.woff2
        ├── Mulish-600.woff2
        ├── Mulish-700.woff2
        └── Mulish-800.woff2
    ├── /images
    └── /js
├── /partials
...

Trở thành thành viên để xem tiếp nội dung...

bởi @CườngTrần