Nhiều website sử dụng theme Flatsome sau khi cập nhật phiên bản mới gặp tình trạng lỗi font chữ Tiếng Việt, khiến văn bản hiển thị sai hoặc không đồng bộ. Nguyên nhân chính do tính năng lưu trữ Google Fonts cục bộ (local) trên hosting của Flatsome. Bài viết này cung cấp hướng dẫn từng bước để khắc phục lỗi nhanh chóng, giúp font chữ hiển thị chuẩn xác trở lại.
Nguyên nhân gây lỗi font chữ Tiếng Việt trên theme Flatsome
Sau khi cập nhật, Flatsome đã kích hoạt tính năng “Local Google Fonts” nhằm tối ưu điểm số Google Pagespeed bằng cách lưu trữ font chữ trực tiếp trên hosting. Tuy nhiên, cơ chế này đôi khi không tương thích tốt với font Tiếng Việt, dẫn đến:
- Font chữ bị lỗi, hiển thị không đúng kiểu.
- Chữ có thể bị nhòe, không rõ nét, hoặc hiển thị sai ký tự đặc biệt.
5 bước khắc phục lỗi font Flatsome
Bước 1: Truy cập trình tùy biến Flatsome
Bước 2: Điều hướng đến mục Typography
Bước 3: Điều chỉnh cài đặt Google Fonts
Bước 4: Lưu thay đổi
Bước 5: Kiểm tra kết quả
Bước 1: Truy cập trình tùy biến Flatsome
Ở bước đầu tiên này, bạn sẽ truy cập vào khu vực Tùy biến giao diện. Đây là công cụ cốt lõi cho phép bạn quản lý và điều chỉnh hầu hết các thiết lập về giao diện và tính năng của theme Flatsome.
- Trước hết, hãy đăng nhập vào trang Admin WordPress của bạn.
- Trên thanh menu điều hướng ở phía bên trái màn hình, bạn tìm đến mục Giao diện (Appearance), sau đó nhấp vào Tùy chỉnh (Customize).
Nếu thực hiện đúng, màn hình sẽ chuyển sang giao diện Tùy biến của Flatsome. Lúc này, bạn sẽ thấy bản xem trước trực tiếp của website ở khung bên phải và cột chứa các tùy chọn cấu hình ở bên trái.
Bước 2: Điều hướng đến mục Typography
Ở bước này bạn sẽ đi sâu vào cài đặt Typography (Kiểu chữ). Đây là nơi bạn có thể kiểm soát toàn bộ các yếu tố liên quan đến văn bản trên website, từ font chữ, kích thước, độ đậm nhạt cho đến khoảng cách giữa các dòng. Việc truy cập vào mục này là cần thiết để tinh chỉnh hoặc khắc phục các vấn đề liên quan đến hiển thị văn bản.
Để truy cập vào các cài đặt này, bạn hãy thực hiện tuần tự các thao tác sau trong trình tùy biến Flatsome:
Từ cột tùy chọn bên trái, bạn hãy tìm và nhấp vào mục Style.
Sau khi menu Style mở ra, bạn tiếp tục chọn mục Typography.
Màn hình sẽ hiển thị một danh sách chi tiết các tùy chọn về kiểu chữ. Bạn sẽ thấy các mục như Headlines, Base,… Điều này xác nhận bạn đã truy cập thành công vào khu vực quản lý Typography và đã sẵn sàng cho các bước cấu hình tiếp theo.
Bước 3: Điều chỉnh cài đặt Google Fonts
Bước này tập trung vào việc cấu hình lại cách website của bạn tải Google Fonts. Mục tiêu là chuyển từ phương thức tải font được nhúng sẵn trong theme (có thể đã lỗi thời hoặc gây xung đột) sang phương thức tải trực tiếp từ máy chủ của Google (CDN). Việc này không chỉ giúp khắc phục lỗi không hiển thị đúng font chữ mà còn cải thiện đáng kể tốc độ tải trang và trải nghiệm người dùng.
Trong giao diện cài đặt Typography, bạn hãy tìm đến khu vực cấu hình cho Google Fonts và thực hiện các thao tác sau:
- Tìm và kích hoạt (tích chọn) vào ô “Load Google Fonts from CDN“.
- Tiếp theo, tại mục “Google Fonts font-display type“, hãy nhấp vào hộp chọn và tìm giá trị Swap.
Giải thích:
- Swap: Cơ chế này cải thiện trải nghiệm người dùng bằng cách cho phép trình duyệt hiển thị văn bản ngay lập tức bằng một font dự phòng (font mặc định của hệ thống). Sau khi Google Fonts tải về hoàn tất, nó sẽ được hoán đổi và áp dụng một cách liền mạch.
- Tải từ CDN: Đảm bảo font luôn được phân phối từ mạng lưới máy chủ toàn cầu (CDN) của Google, nhằm tăng tốc độ tải đồng thời giúp trình duyệt của người dùng nhận được định dạng font (ví dụ: WOFF2) đã được tối ưu hóa nhất.
Bước 4: Lưu thay đổi
Sau khi hoàn tất các bước bên trên, bạn cần áp dụng cấu hình mới bằng cách nhấn nút “Đăng” (Publish) ở trên cùng của trình tùy biến. Sau khi nhấp, tất cả thay đổi của bạn sẽ được lưu và áp dụng ngay lập tức.
Bước 5: Kiểm tra kết quả
Sau khi lưu cấu hình, bạn cần thực hiện các bước xác thực sau:
- Kiểm tra trực quan: Tải lại trang web trên trình duyệt để kiểm tra hiển thị thực tế. Đảm bảo font chữ Tiếng Việt không bị lỗi ký tự hay sai định dạng.
- Xóa cache (nếu có): Đối với các website đang kích hoạt giải pháp lưu bộ nhớ đệm (caching plugin, CDN,…), bạn cần xóa toàn bộ cache để phiên bản mới nhất của trang được tải về cho người dùng.
Lưu ý các lỗi thường gặp:
- Trong trường hợp font chữ chưa hiển thị chính xác, vui lòng làm mới trang bằng tổ hợp phím Ctrl + F5 để xóa bộ nhớ đệm (cache) của trình duyệt.
- Hãy chắc chắn rằng cấu hình hosting của bạn cho phép kết nối đến tên miền fonts.googleapis.com.
Bằng cách chuyển cài đặt Google Fonts từ chế độ Local sang CDN, bạn đã khắc phục thành công lỗi font chữ Tiếng Việt trên theme Flatsome. Thao tác này đơn giản, nhanh chóng và không yêu cầu kiến thức kỹ thuật chuyên sâu, giúp website hiển thị đúng chuẩn và chuyên nghiệp. Trong quá trình thực hiện nếu còn vấn đề nào thắc mắc bạn có thể liên hệ Vietnix để được hỗ trợ kịp thời.
VIETNIX – DỊCH VỤ HOSTING, VPS TỐC ĐỘ CAO, ỔN ĐỊNH, BẢO MẬT
- Địa chỉ: 265 Hồng Lạc, Phường Bảy Hiền, Thành Phố Hồ Chí Minh
- Điện thoại: 1800 1093
- Email liên hệ: sales@vietnix.com.vn
- Website: https://vietnix.vn/
