Bạn chọn được một font tiêu đề rất đẹp trên bản thiết kế, nhưng lên website thì chữ “Đặc sản” và “Ưu đãi” bỗng lệch nét, dấu nằm chồng lên chữ hoặc chữ có dấu trông như của một font khác. Đây là lỗi rất hay gặp khi chọn font chữ tiếng Việt cho website, vì nhiều font nổi tiếng được làm cho tiếng Anh và không có đủ chữ có dấu. Bài này giải thích vì sao lỗi xảy ra, cách tự kiểm một font trong một phút, những font có tiếng Việt nên cân nhắc và cách cài vào WordPress.
Vì sao font đẹp vẫn lỗi dấu tiếng Việt
Một font là một bộ hình vẽ cho từng ký tự. Tiếng Việt cần thêm hơn một trăm hình cho các chữ có dấu như ặ, ữ, ỷ, Ẫ. Khi font thiếu một chữ, trình duyệt không bỏ trống mà mượn chữ đó từ một font khác có sẵn trên máy. Kết quả là trong cùng một từ, chữ không dấu là font bạn chọn, chữ có dấu là font khác: nét dày mỏng lệch nhau, độ cao lệch nhau, nhìn như in lỗi.
Lỗi thứ hai hay gặp nằm ở chữ in hoa có hai dấu chồng như Ẫ, Ỗ, Ữ. Font có hỗ trợ tiếng Việt nhưng làm sơ sài sẽ để dấu mũ và dấu ngã đè lên nhau, hoặc dấu bị cắt mất phần trên khi khoảng cách dòng hẹp. Tiêu đề in hoa là nơi lỗi này lộ rõ nhất.
Kiểm một font đủ dấu trong một phút
Trên trang xem thử của Google Fonts hoặc của nơi bán font, gõ hai dòng sau vào ô xem trước, một dòng thường và một dòng in hoa:
- Ưu đãi đặc sản: quýt ngọt lịm, mưa rơi ướt đẫm, kỷ niệm ở Huế.
- ẨM THỰC, HỖN HỢP, NGỮ ĐIỆU, LẪN LỘN, KỶ YẾU, ĐẶC SẢN
Rồi nhìn ba thứ: mọi chữ cùng một nét vẽ, không chữ nào trông “lạ”; dấu chồng ở dòng in hoa tách nhau rõ, không đè; và dấu không chạm vào dòng phía trên. Trên Google Fonts, dùng bộ lọc ngôn ngữ để chỉ hiện các font có hỗ trợ tiếng Việt, nhưng vẫn nên gõ thử, vì “có hỗ trợ” chưa chắc là “làm đẹp”.
Font Google Fonts có tiếng Việt nên cân nhắc
Theo Google Fonts, mọi font trong thư viện đều là mã nguồn mở, miễn phí và dùng được cho mục đích thương mại. Các font dưới đây có bộ ký tự tiếng Việt trên Google Fonts tại thời điểm chúng tôi kiểm (10/2026):
| Font | Kiểu | Hợp với |
|---|---|---|
| Be Vietnam Pro | Không chân, hiện đại | Thân bài và tiêu đề cho doanh nghiệp, công nghệ |
| Inter | Không chân, trung tính | Website nhiều chữ, bảng, số liệu |
| Roboto, Open Sans, Noto Sans | Không chân, phổ thông | Thân bài dễ đọc trên điện thoại |
| Montserrat, Raleway | Không chân, hình học | Tiêu đề thương hiệu thời trang, làm đẹp |
| Lexend, Nunito, Quicksand | Không chân, mềm | Giáo dục, trẻ em, spa |
| Oswald | Không chân, hẹp và cao | Tiêu đề ngắn, khuyến mãi |
| Lora, Merriweather, Noto Serif, Source Serif 4 | Có chân | Nhà hàng, nội thất, tạp chí, bài viết dài |
Ngược lại, hai font rất phổ biến là Poppins và Lato không có bộ ký tự tiếng Việt trên Google Fonts khi chúng tôi kiểm; dùng chúng cho nội dung tiếng Việt sẽ gặp đúng lỗi chữ có dấu lệch font ở trên.
Kết hợp font: hai là đủ
- Tối đa hai font: một cho tiêu đề, một cho thân bài; hoặc một font cho cả hai, chỉ đổi độ đậm.
- Ít độ đậm: thường chỉ cần thường, đậm vừa và đậm. Mỗi độ đậm là một tệp phải tải.
- Thân bài ưu tiên dễ đọc: font cá tính để cho tiêu đề; thân bài trên điện thoại cần nét rõ, khoảng cách dòng thoáng.
- Đi cùng màu: font mảnh cần màu chữ đậm hơn để đủ tương phản; xem bài Chọn màu sắc website theo logo thương hiệu.
Cài font vào WordPress đúng cách
WordPress có Thư viện phông chữ (Font Library) trong menu Giao diện (Appearance > Fonts trên bản tiếng Anh). Theo tài liệu của WordPress, từ bản 7.0 thư viện này dùng được cho cả giao diện khối và giao diện cổ điển. Thẻ Install Fonts cho cài font từ Google Fonts sau khi bạn cho phép kết nối; WordPress tải tệp font về lưu ngay trên website thay vì gọi tới máy chủ Google mỗi lần khách mở trang. Thẻ Upload nhận tệp .woff2, .woff, .ttf, .otf cho font bạn đã mua bản quyền.
Font lưu trên website giúp trang tải gọn hơn; cách để chữ hiện ngay trong lúc font đang tải nằm ở bài 7 việc nâng điểm PageSpeed. Sau khi cài, mở website trên điện thoại và đọc lại hai dòng thử ở trên một lần nữa, vì font hiển thị trên màn hình nhỏ có thể khác bản xem trước. Nếu bạn đang làm website và muốn bộ chữ được chọn cùng màu sắc ngay từ bản thiết kế, xem các kiểu website ở trang Dịch vụ.
Tóm lại
- Font thiếu chữ có dấu làm trình duyệt mượn font khác, chữ trong một từ bị lệch nét.
- Gõ thử một dòng thường và một dòng in hoa nhiều dấu chồng trước khi chốt font.
- Dùng tối đa hai font có tiếng Việt, cài qua Thư viện phông chữ của WordPress để lưu font ngay trên website.