Tự đổi Google Font tiếng Việt cho website Ghost [đơn giản nhất]

Hướng dẫn cách tự đổi bất cứ Google font tiếng Việt nào bạn muốn cho theme Ghost nhanh và đơn giản nhất.

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

Ghost theme thường được phát triển bởi các lập trình viên nước ngoài nên họ thường dùng các font chữ không hỗ trợ Việt Nam.

Đây có thể là lý do mà hầu hết các người dùng mới ở Việt Nam cho rằng Ghost lỗi font tiếng Việt hoặc không thể dùng Ghost ở Việt Nam.

Thực tế không phải vậy, việc thêm và đổi font chữ tiếng Việt cho Ghost không khó và bạn có thể tự mình thực hiện được kể cả không biết về code CSS.

Cách làm này áp dụng cho mọi theme Ghost và bạn có thể tự làm được dễ dàng. Bạn hãy thực hiện theo 2 bước đơn giản sau.

1. Thêm Google font vào Ghost site

Trước khi đổi font thì bạn cần phải thêm Google font vào site trước, bạn vào website https://fonts.google.com/.

Google font là thư viện font lớn nên để tìm font tiếng Việt, bạn cần dùng bộ lọc để tìm nhanh hơn.

Bộ lọc Google font
Bộ lọc Google font

Bạn lựa chọn font phù hợp và cảm thấy thích nhất. Với các bạn đã quen dùng Google font thì chỉ đơn giản tìm đúng tên gọi font family cần tìm là được.

Font chữ lúc nào cũng có một số style weight từ 100-900. Thông thường bạn chỉ chọn 400-800 mà thôi. Không nên chọn hết vì làm nặng site không cần thiết.

Chọn Font-weigth từ 400-800
Chọn Font-weigth từ 400-800 (Google Open Sans Font)

Lấy mã chèn font tự động của Google và chèn vào Ghost Head như sau:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,[email protected],400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
Copy từ Google Font

Bạn nên chỉnh lại một chút như sau:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,[email protected],400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&display=swap" as="font" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,[email protected],400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&display=swap">
</noscript>
Chỉnh lại code một chút
Ghost Head
Chèn code vào Ghost Head

<noscript> đóng vai trò dự phòng khi người xem cố gắng chặn JavaScript với trình duyệt của họ.

preconnectpreload là một mẹo để site load font Google từ máy chủ nhanh hơn.

2. Thay đổi font của Ghost theme

Theme Ghost thường được phát triển khác nhau nên cách thay đổi font cũng không giống nhau.

Bạn có thể thử dùng code CSS sau:

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

Một số theme sẽ quy định phần chữ nội dung bài viết và đề mục khác nhau.

Bạn có thể dùng công cụ Inspector của trình duyệt (Ctrl + Shift +I) để kiểm tra class của theme.

Ví dụ: Aspirethemes khá khó đổi font vì class khá nhiều và tách biệt.

Aspirethemes

Lời kết...

Cách làm này phù hợp với mọi người nhưng chưa phải là tối ưu nhất khi đổi font cho Ghost.

Cách đẹp nhất là dùng Local font và chỉnh sửa lại toàn bộ theme code để đổi font, mất nhiều công sức hơn nhưng sẽ nhanh hơn và mượt mà hơn.

Blog ghostFam đang dùng local font nên bạn sẽ không thấy bất kỳ hiện tượng nháy và tốc độ tốt hơn.

Tôi sẽ hướng dẫn bạn dùng Local Font ở bài hướng dẫn kế tiếp!

Hướng Dẫn

Bạn có thể quan tâm

Viết bài trên Google Docs, xuất bản trên Ghost

Hướng dẫn cách viết blog trên Google Docs và xuất bản trên Ghost CMS.

Viết bài trên Google Docs, xuất bản trên Ghost

Hiệu ứng lightbox video Youtube cho Ghost bằng Fancyapps

Cáchtạo hiệu ứng lightbox cho video Youtube đơn giản bằng Fanyapps cho Ghost.

Hiệu ứng lightbox video Youtube cho Ghost bằng Fancyapps

Thêm hiệu ứng lightbox cho Ghost siêu đơn giản với Fluidbox

Cách đơn giản để thêm hiệu ứng lightbox cho ảnh, vừa nhanh vừa đẹp.

Thêm hiệu ứng Lightbox cho ảnh siêu đơn giản cho Ghost
Cường Trần

Cường Trần

Cường chuyên viết về giải pháp liên quan đến WordPress và Ghost, là một How-to blogger thực chiến.

bởi @CườngTrần