Thêm font chữ tùy chỉnh vào website WordPress

Hướng dẫn thêm font chữ tùy chỉnh (custom fonts) vào website WordPress một cách đơn giản.

Nếu bạn vừa download được ở đâu đó trên mạng một font chữ đẹp và đang muốn sử dụng nó cho website WordPress của mình thì bài viết này là dành cho bạn. Mặc dù tôi không khuyến khích việc sử dụng Google Fonts hoặc các font chữ tùy chỉnh của bên thứ ba vì chúng ít nhiều gây ảnh hưởng tiêu cực đến tốc độ load web. Tuy nhiên, cũng phải thừa nhận rằng, chúng có thể mang lại cho website của bạn phong cách khác biệt và những nét cá tính riêng.

Tham khảo thêm:

• Lưu trữ Google Fonts ngay trên host để tăng tốc độ load
• Khắc phục lỗi Google Fonts trong Google PageSpeed Insights

Một số lưu ý trước khi tiến hành

• Hãy đảm bảo font chữ mà bạn muốn thêm có định dạng file là .woff2, .woff, .ttf, .eot, .svg hoặc .otf. Các bạn có thể upload cùng lúc nhiều định dạng. Tuy nhiên, bạn nên ưu tiên sử dụng .woff2 hoặc .woff vì chúng có tốc độ load tốt hơn.
• Nhớ kích hoạt tính năng cho phép upload các file tùy chỉnh trong website WordPress. Tham khảo bài viết “Upload các định dạng file tùy chỉnh trong WordPress” nếu bạn chưa biết cách làm.

Thêm font chữ tùy chỉnh vào WordPress

1. Đầu tiên, các bạn cần phải cài đặt và kích hoạt một plugin có tên là Custom Fonts (download).

2. Truy cập Appearance => Custom Fonts. Tại đây, các bạn sẽ nhìn thấy một số thiết lập như sau:

Trong đó:

• Name: đặt tên cho font chữ.
• Font Fallback: lựa chọn font chữ dự phòng. Chúng nên là font chữ mặc định mà thiết bị nào cũng có sẵn, ví dụ sans-serif, serif, Arial, Helvetica, Time New Roman…
• Font Display: các bạn nên chọn swap để nó ít ảnh hưởng tới tốc độ load web nhất.
• Font weight: chọn độ đậm của font chữ.
• Lựa chọn file font chữ mà bạn có để upload lên, tương ứng với các mục Font .woff2, Font .woff, Font .ttf, Font .eot, Font .svg hoặc Font .otf.
• Click vào nút Add Font Variation nếu bạn muốn thêm các biến thể của font chữ (ví dụ thêm font weight khác chẳng hạn).

Sau khi hoàn tất, click vào nút Add New Font để xác nhận.

3. Các font chữ đã được thêm thành công sẽ hiển thị trong khung bên phải của giao diện.

4. Khai báo việc sử dụng font chữ trong CSS. Ví dụ:

h1, h2, h3, h4, h5, h6 {
    font-family: "SFU Sydney", sans-serif;
    font-weight: normal;
    font-size: 18px;
    line-height: 1.3;
    color: #222;
}

Thật đơn giản phải không nào? Chúc các bạn thành công!

Bạn có đang sử dụng font chữ tùy chỉnh trên website WordPress của mình không? Bạn đã làm cách nào để tích hợp nó? Hãy chia sẻ với chúng tôi phương pháp của bạn thông qua khung bình luận ở bên dưới.

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)