Hướng dẫn thêm font chữ tối ưu SEO vào WordPress
Các phương pháp dễ thực hiện với mã CSS dễ sao chép
Các phương pháp thêm font chữ web-safe
1 Sử dụng Customizer (Khuyến nghị) Dễ nhất
Bước 1: Đăng nhập vào WordPress Dashboard
Bước 2: Truy cập Giao diện (Appearance) → Tùy chỉnh (Customize)
Bước 3: Chọn CSS tùy chỉnh (Additional CSS)
Bước 4: Sao chép và dán đoạn mã CSS sau:
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
color: #333;
}
h1, h2, h3, h4, h5, h6 {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
color: #2c3e50;
}
code, pre {
font-family: ‘Courier New’, Courier, monospace;
}
Bước 5: Nhấp vào Đăng xuất bản (Publish) để lưu thay đổi
Mẹo cho Flatsome
Trong theme Flatsome, bạn cũng có thể thêm CSS tùy chỉnh bằng cách vào Appearance > Customize > Advanced > Custom CSS.
2 Sử dụng Child Theme
Bước 1: Truy cập file style.css của Child Theme
Bước 2: Thêm đoạn mã CSS sau vào cuối file:
/* Áp dụng font chữ web-safe toàn website */
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
color: #333;
}
h1, h2, h3, h4, h5, h6 {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
color: #2c3e50;
}
.site-title {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
font-weight: 700;
}
code, pre {
font-family: ‘Courier New’, Courier, monospace;
}
/* Responsive font sizes */
@media (max-width: 768px) {
body {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
}
Kết quả đạt được
Lợi ích khi sử dụng font web-safe
- Tốc độ tải trang nhanh hơn – Không cần tải font từ server bên ngoài
- Tương thích trên mọi thiết bị – Font có sẵn trên 99% thiết bị
- Tối ưu SEO – Cải thiện điểm Core Web Vitals (FCP, LCP)
- Không có vấn đề FOUT/FOIT – Văn bản luôn hiển thị ngay lập tức
- Hiển thị nhất quán – Trải nghiệm đồng nhất trên mọi nền tảng
Lưu ý quan trọng
Nếu bạn sử dụng trình kéo thả (như Elementor, Divi, WPBakery), font chữ có thể bị ghi đè bởi thiết lập của page builder. Sau khi áp dụng CSS, hãy kiểm tra và điều chỉnh trong thiết lập của page builder nếu cần.
Cảnh báo
Không nên chỉnh sửa trực tiếp file style.css của theme chính vì mọi thay đổi sẽ bị mất khi cập nhật theme. Luôn sử dụng Child Theme hoặc Customizer để thêm CSS tùy chỉnh.
3 CSS bổ sung cho các phần tử cụ thể
Nếu cần tùy chỉnh thêm, bạn có thể sử dụng các đoạn CSS sau:
.main-navigation a {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
}
/* Tùy chỉnh tiêu đề widget */
.widget-title {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Tùy chỉnh nút bấm */
button, .button, input[type=”button”], input[type=”submit”] {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
}
Với quy trình làm việc chuyên nghiệp, vật liệu chất lượng và sự tận tâm, TIENFAST luôn đặt sự hài lòng của khách hàng lên hàng đầu. Hãy để chúng tôi biến ý tưởng của bạn thành hiện thực!
Liên hệ ngay với TIENFAST để nhận báo giá và tư vấn miễn phí!
Liên hệ nhận báo giá nhanh gọn: 0773233824