PVA Font Manager: plugin đổi font WordPress bằng một file zip, không cần Google Fonts

Mình làm website đèn trang trí nên khá hay phải chỉnh font. Có lần tắt Google Fonts để bớt tải tài nguyên bên ngoài, chữ trên web lại rơi về Arial. Muốn đổi sang font khác thì phải mò trong phần cài đặt của theme, mà mỗi theme lại một kiểu.

PVA Font Manager ra đời từ chuyện đó. Mình viết plugin này để đổi font WordPress bằng cách tải lên một file ZIP chứa font, thay vì phải tự chép file rồi sửa CSS.

PVA Font Manager làm được gì?

Đây là plugin miễn phí giúp đưa font lên chính hosting của website và áp dụng font đó cho toàn site. Bạn chọn bộ chữ muốn dùng, tải file ZIP về rồi đưa vào plugin.

Với bộ font này, trình duyệt lấy file từ website của bạn, không cần tải font từ máy chủ Google. Việc đó giúp bớt phụ thuộc vào kết nối bên ngoài; tốc độ thực tế còn tùy hosting, bộ nhớ đệm và dung lượng font.

Cần phân biệt một chút: tự host font không có nghĩa là không được dùng các bộ chữ trong thư viện Google Fonts. Mình vẫn có thể chọn font ở đó, nhưng tải file về hosting để phục vụ cho người xem.

Nếu theme hoặc plugin khác vẫn gọi Google Fonts riêng, bạn cần tắt phần đó trong công cụ tương ứng. Không nên mặc định cài PVA Font Manager là mọi kết nối Google Fonts trên website đều tự biến mất.

Cài plugin trước, tải font sau

Sau khi tải PVA Font Manager, vào Plugin → Thêm Plugin → Tải plugin lên, chọn file ZIP cài đặt, bấm cài và kích hoạt. Khi đã kích hoạt, mở Cài đặt → PVA Font để đưa bộ font vào.

Ở đây có hai file ZIP khác nhau: ZIP cài plugin dùng để cài PVA Font Manager; ZIP font tải từ google-webfonts-helper dùng để chọn bộ chữ cho website.

Cách đổi font WordPress trong 4 bước

Bước 1: Chọn bộ font muốn dùng

Vào google-webfonts-helper, tìm tên font bạn thích. Công cụ này cho phép chọn bộ ký tự, kiểu chữ và tải các file font về dưới dạng ZIP.

Bước 2: Chọn tiếng Việt và các kiểu chữ cần dùng

Ở mục Charsets, chọn latin và vietnamese. Nếu font không có tùy chọn vietnamese, hãy chọn bộ khác có hỗ trợ tiếng Việt.

Tiếp theo, ở mục Styles, chọn những kiểu chữ website thực sự dùng. Với website của mình, mình thường bắt đầu bằng bốn kiểu:

• regular: chữ thường, độ đậm 400.
• 700: chữ đậm.
• italic: chữ nghiêng, độ đậm 400.
• 700italic: chữ đậm và nghiêng.

Nếu giao diện dùng thêm độ đậm 500 hoặc 600, bạn có thể cần chọn thêm. Không nhất thiết tải mọi phiên bản chỉ vì thấy có sẵn.

Bước 3: Tải file ZIP font về máy

Kéo xuống phần tải xuống, bấm Download files và lưu file ZIP. Giữ nguyên file nén để đưa vào PVA Font Manager, không cần giải nén thủ công.

Bước 4: Tải font lên WordPress

Quay lại Cài đặt → PVA Font, bấm Choose File để chọn ZIP font vừa tải, rồi bấm Tải lên.

Plugin tự nhận tên font và các kiểu chữ trong bộ, rồi hiện lại cho mình xem. Chẳng hạn, bộ Poppins trong ảnh được nhận thành Regular / Bold / Italic 400 / Italic 700. Bạn không cần nhập lại tên hay khai báo từng kiểu chữ.

Nếu website có bộ nhớ đệm, hãy xóa cache rồi mở lại một vài trang để kiểm tra. Nhớ xem cả tiêu đề, đoạn văn có dấu, phần chữ đậm và chữ nghiêng trên điện thoại.

Những chỗ mình cố làm cho gọn

• Font mới thay font cũ: khi tải bộ mới lên, bộ cũ do plugin quản lý được xóa để không tích file thừa trên hosting.
• Có nút Xoá font: muốn quay về font mặc định của theme thì bấm nút này.
• Cảnh báo thiếu tiếng Việt: plugin báo khi bộ font thiếu phần hỗ trợ tiếng Việt để mình kiểm tra sớm, tránh đến lúc đăng bài mới thấy chữ có dấu bị lệch font.
• Không bắt buộc ZipArchive: plugin có cách xử lý cho hosting không bật tiện ích giải nén này.

Mình đang dùng plugin trên các website của mình và đã chạy với Flatsome. Các theme khác mình chưa kiểm tra kỹ, nên chưa khẳng định sẽ hiển thị giống nhau trong mọi trường hợp.

Chọn vừa đủ font để web nhẹ hơn

Bộ Poppins có tiếng Việt với bốn kiểu thường, đậm, nghiêng thường và nghiêng đậm mình đang dùng nặng khoảng 86 KB. Đây là dung lượng của bộ file mình dùng, không phải mức cố định cho mọi lần tải hay mọi định dạng font.

Bạn có thể bắt đầu với những kiểu chữ đang dùng trên website. Thiếu kiểu nào thì bổ sung kiểu đó. Sau khi đổi, thử đọc một câu có nhiều dấu như “Đèn trang trí phòng ngủ, ánh sáng dịu và dễ chịu” để xem chữ có đồng đều không.

Tải PVA Font Manager miễn phí

Tải plugin: Link tải sẽ được cập nhật tại đây.

Plugin do Văn Ân viết từ nhu cầu chỉnh font trên các website của mình. Anh chị dùng thấy lỗi gì cứ nhắn mình, kèm tên theme và ảnh chụp chỗ bị lỗi để mình dễ kiểm tra.