Thay đổi font chữ theme wordpress

Đôi lúc khi cài đặt một theme đẹp nào đó về, thì lại phát hiện ra theme sử dụng những font chữ lạ, làm cho trang web của bạn hiển thị tiếng việt không đẹp, chữ không đều, bị lỗi, ….

Khi gặp trường hợp như vậy, giải pháp tốt nhất là các bạn thường tìm cách đổi font, đối với nội dung bài bài viết thì các bạn có thế đổi font bằng các Plugin như Easy Google Fonts hoặc WP Google Fonts … để đổi font.

Nhưng đối với tiêu đề bài viết hoặc menu, …. có thể sẽ không đổi được. Trường hợp này chỉ còn cách thay đổi trong file style.css của font. Cách làm cũng khá đơn giản, không cần các bạn phải biết code, mình sẽ hướng dẫn các bạn cách thay đổi font cho tiêu đề bài viết, thay đổi các thứ khác cũng tương tự.

Đầu tiên, bạn vào trang web của bạn trên trình duyệt Chrome (các trình duyệt khác cũng tương tự), vào chỗ nào hiện ra tiêu đề bị lỗi font, click phải vào vùng trống, chọn kiểm tra (hoặc phím tắt: Ctrl+shift+I).

Thay đổi font chữ theme wordpress

Sau đó, các bạn bấm Đăng để lưu lại.

Vẫn tại giao diện đó, bạn tiếp tục tick vào ô “Disable Google Fonts. No fonts will be loaded from Google.” Và bấm Đăng để lưu lại.

Thay đổi font chữ theme wordpress

Bước 2: Thêm font chữ mới vào hosting

Ở đây, mình có 2 font chữ : utm-avo và utm-avo-bold

Thay đổi font chữ theme wordpress

mình sẽ up nguyên thư mục (folder) font lên hosting, theo đường dẫn:

wpfast.vn/wp-content/themes/wpfast/assets/font/utm-avo.ttf

wpfast.vn/wp-content/themes/wpfast/assets/font/utm-avo-bold.ttf

wpfast là folder theme đang được sử dụng (đang kích hoạt)

Thay đổi font chữ theme wordpress
font được up vào folder assets của theme đang được kích hoạt

Sau khi up font lên hosting thành công, bạn hãy kiểm tra lại đường dẫn tới font đã chính xác chưa, trước khi tiếp tục bước tiếp theo.

Bước 3: Thay đổi font chữ mặc định của theme flatsome bằng font chữ mới

Để áp dụng font chữ mới thay thế font mặc định flatsome, tại thanh admin menu bar – bạn vào đường dẫn sau: Flatsome -> Advanced -> Custom CSS

Thay đổi font chữ theme wordpress

Tại ô Custom CSS (ALL SCREENS)

Thay đổi font chữ theme wordpress

Bạn past đoạn mã sau vào ô ALL SCREENS

@font-face{font-family:”utm-avo”;
font-weight:normal;
font-style:normal;
src:url(“/wp-content/themes/wpfast/assets/font/utm-avo.ttf”) format(“truetype”);
font-display:swap
}
@font-face{font-family:”utm-avo-bold”;
font-weight:normal;
font-style:normal;
src:url(“/wp-content/themes/wpfast/assets/font/utm-avo-bold.ttf”) format(“truetype”);
font-display:swap
}
.nav>li>a,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family:’utm-avo’,
sans-serif
}
p,
a,
span,
strong,
button,
li {
font-family:’utm-avo’,
sans-serif
}

Thay đổi font chữ theme wordpress

Và bấm Save All Changes để lưu lại nhé!

LƯU Ý : ở dòng

src:url(“/wp-content/themes/wpfast/assets/font/utm-avo.ttf”) format(“truetype”);

Các bạn cần thay thế bằng đường dẫn tới file font đã up lên ở bước 2 nhé!

Vậy là chúng ta đã hoàn tất việc thay font cho theme flatsome rồi. Bây giờ bạn quay lại trang chủ, nhấn f5 để xem thành quả nhé!

(Có 1 số trường hợp vẫn không thấy font mới được áp dụng, bạn hãy chắc chắn rằng đường dẫn tới file font mới hoàn toàn chính xác, hoặc xóa cache trình duyệt nhé!)

Tổng kết

Chỉ với 3 bước đơn giản, bạn đã có thể thay đổi font chữ cho theme flatsome mà không cần phải dùng plugin. Việc này giúp website của bạn có tốc độ tải trang nhanh hơn, ít tốn tài nguyên hệ thống hơn, trang admin ít plugin sẽ nhẹ nhàng hơn.

Bài hướng dẫn thay đổi font chữ flatsome nếu có thiếu sót, mong các bạn nhẹ tay góp ý cho mình ở bình luận bên dưới nhé! Xin cảm ơn.

Từ khóa liên quan: Thay đổi font chữ theme wordpress, Thay đổi font chữ trong website, Thêm font chữ vào WordPress, Import font vào wordpress