Một cách tuyệt vời để thêm một số thương hiệu và chủ nghĩa cá nhân vào trang web WordPress của bạn là thay đổi font chữ trong chủ đề của bạn.
Kiểu chữ và các yếu tố dải khác tạo ấn tượng tốt đầu tiên, thiết lập tâm trạng cho khách truy cập trang web của bạn và thiết lập bản sắc thương hiệu của bạn. Các nghiên cứu cũng phát hiện ra rằng font chữ ảnh hưởng đến khả năng học hỏi, ghi nhớ thông tin và ghi nhớ văn bản của người đọc.
=> Xem thêm: Cách xây dựng blog Wix tốt như WordPress
Nếu bạn vừa cài đặt một chủ đề WordPress hoặc có một số kinh nghiệm mã hóa và CSS, thì chúng tôi sẽ chỉ cho bạn một số tùy chọn mà bạn có thể sử dụng để thay đổi font chữ trong WordPress.
Cách thay đổi font chữ trong WordPress
Có ba tùy chọn chính để bạn thay đổi font chữ trong WordPress:
- Sử dụng font chữ web như Google Fonts , Fonts.com hoặc Adobe Edge Web Fonts , được lưu trữ trên trang web của bên thứ ba
- Viết mã font chữ web vào chủ đề của bạn và liệt kê chúng
- Lưu trữ phông chữ trên trang web của bạn và thêm chúng vào chủ đề của bạn
1. Cách thay đổi font chữ trong WordPress bằng font chữ web
Sử dụng font chữ web là cách dễ dàng và nhanh chóng hơn để thay đổi font chữ trong WordPress so với tải xuống và tải lên tệp phông chữ.
Với tùy chọn này, bạn có thể truy cập nhiều font chữ khác nhau mà không cần cập nhật chúng mỗi khi có thay đổi và nó không chiếm dung lượng máy chủ trên dịch vụ lưu trữ của bạn. Phông chữ được cung cấp trực tiếp từ máy chủ của nhà cung cấp bằng plugin hoặc bằng cách thêm mã vào trang web của bạn.
Đảm bảo font chữ web bạn chọn cho trang web của mình phù hợp với nhận dạng thương hiệu, dễ đọc đối với nội dung văn bản, quen thuộc với khách truy cập trang web và truyền tải loại tâm trạng cũng như hình ảnh mà bạn muốn.
Bạn có thể thêm font chữ web bằng plugin WordPress hoặc theo cách thủ công bằng cách thêm một vài dòng mã vào trang web của mình. Hãy khám phá cả hai lựa chọn.
Cách thêm font chữ web bằng plugin WordPress
Tùy thuộc vào font chữ web bạn đã chọn, bạn có thể sử dụng plugin WordPress để truy cập thư viện font chữ và chọn phông chữ bạn muốn trên trang web của mình. Đối với hướng dẫn này, chúng tôi đã chọn Google Fonts và sử dụng plugin Google Fonts Typography .
- Để bắt đầu, hãy đăng nhập vào bảng điều khiển quản trị viên WordPress của bạn và chọn Plugin > Thêm mới .
- Nhập Google Fonts Typography vào hộp tìm kiếm và chọn Install Now .
3. Chọn Kích hoạt .
4. Tiếp theo, truy cập Tùy biến bằng cách vào Giao diện > Tùy chỉnh .
- Chọn phần Google Fonts .
- Tiếp theo, nhấp vào liên kết để mở cài đặt font chữ và định cấu hình chúng như sau:
- Trong Cài đặt cơ bản , hãy đặt font chữ mặc định cho văn bản nội dung, tiêu đề và nút của bạn.
- Trong Cài đặt nâng cao , định cấu hình tiêu đề và mô tả trang web của bạn, menu, tiêu đề và nội dung, thanh bên và chân trang.
- Bỏ chọn bất kỳ trọng lượng phông chữ không mong muốn nào trong phần Tải font chữ để tránh làm chậm trang web của bạn .
Nếu có font chữ trên trang web của bạn không hiển thị hoặc hoạt động bình thường, hãy sử dụng phần Gỡ lỗi để khắc phục sự cố.
- Bạn có thể kiểm tra các cài đặt này trong Tùy biến để đảm bảo chúng đang hoạt động theo cách bạn muốn, sau đó chọn Xuất bản .
Lưu ý : Nếu quên chọn xuất bản trong Tùy biến, bạn sẽ mất tất cả các thay đổi đã thực hiện.
Cách thêm font chữ web bằng Code
Bạn có thể cài đặt và sử dụng font chữ web nếu bạn có quyền truy cập vào mã của chủ đề. Đây là một giải pháp thay thế thủ công cho việc thêm plugin bổ sung, nhưng sẽ không phức tạp nếu bạn làm theo các bước cẩn thận.
Tuy nhiên, có các bước khác cần thực hiện nếu bạn đang sử dụng chủ đề từ thư mục chủ đề WordPress hoặc chủ đề tùy chỉnh.
=> Xem thêm: Thực tế ảo tăng cường hoạt động như thế nào ?
Nếu bạn đã mua một chủ đề từ thư mục chủ đề WordPress, hãy tạo một chủ đề con và sau đó cung cấp cho nó tệp style.css và functions.php. Sẽ dễ dàng hơn nếu bạn có một chủ đề tùy chỉnh vì bạn có thể chỉnh sửa biểu định kiểu và tệp chức năng từ chủ đề của mình.
- Để bắt đầu, hãy chọn một font chữ từ thư viện Google Fonts và chọn biểu tượng + (dấu cộng) để thêm phông chữ đó vào thư viện của bạn.
- Tiếp theo, chọn tab ở cuối nơi bạn sẽ tìm thấy mã để thêm vào trang web của mình. Chuyển đến phần Nhúng phông chữ trong tab Nhúng . Bạn sẽ tìm thấy mã được tạo bởi Google Fonts, trông giống như sau:
<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>
Lưu ý : Chúng tôi đã chọn Work Sans cho hướng dẫn này nên tên font chữ có thể khác với tên của bạn tùy thuộc vào những gì bạn đã chọn.
- Sao chép phần mã này: https://fonts.googleapis.com/css2?family=Work+Sans
Điều này cho phép bạn sắp xếp kiểu từ máy chủ Google Fonts để tránh xung đột với plugin của bên thứ ba. Nó cũng cho phép sửa đổi chủ đề con dễ dàng hơn.
- Để liệt kê phông chữ, hãy mở tệp chức năng và thêm đoạn mã sau. (Thay thế liên kết bằng liên kết bạn nhận được từ Google Fonts):
function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);
wp_enqueue_style( ‘googleFonts’);
}
add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );
- Bạn có thể thêm một dòng mới vào chức năng của mình hoặc vào cùng một dòng nếu bạn muốn thêm nhiều phông chữ hơn trong tương lai như sau:
function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);
wp_enqueue_style( ‘googleFonts’);
}
add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );
Trong trường hợp này, chúng tôi đã sử dụng cả phông chữ Cambria và Work Sans.
Bước tiếp theo là thêm font chữ vào biểu định kiểu của chủ đề để làm cho phông chữ hoạt động trên trang web của bạn.
- Để thực hiện việc này, hãy mở tệp style.css của chủ đề và thêm mã để tạo kiểu cho các thành phần riêng lẻ bằng phông chữ web của bạn như sau:
body {
font-family: ‘Work Sans’, sans-serif;
}
h1, h2, h3 {
họ phông chữ: ‘Cambria’, serif;
}
Trong trường hợp này, font chữ chính sẽ là Work Sans trong khi các thành phần tiêu đề như h1, h2 và h3 sẽ sử dụng Cambria.
Sau khi hoàn tất, hãy lưu biểu định kiểu và kiểm tra xem font chữ của bạn có hoạt động bình thường không. Nếu không, hãy kiểm tra để đảm bảo rằng phông chữ không bị ghi đè trong biểu định kiểu hoặc xóa bộ nhớ cache của trình duyệt rồi thử lại.
- Chuẩn bị sẵn font chữ dự phòng để đảm bảo rằng phông chữ có thể được hiển thị hoặc truy cập dễ dàng, đặc biệt đối với người dùng có thiết bị cũ, kết nối kém hoặc nếu nhà cung cấp phông chữ gặp sự cố kỹ thuật. Để thực hiện việc này, hãy chuyển đến biểu định kiểu và chỉnh sửa CSS để đọc như sau:
body {
font-family: ‘Work Sans’, Arial, sans-serif;
}
h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}
Nếu tất cả đều ổn, khách truy cập trang web của bạn sẽ thấy font chữ web mặc định của bạn, trong trường hợp của chúng tôi là Work Sans và Cambria. Nếu có vấn đề, họ sẽ thấy các phông chữ dự phòng, ví dụ như Arial hoặc Times New Roman trong trường hợp của chúng tôi.
2. Cách thay đổi font chữ trong WordPress bằng cách lưu trữ phông chữ
Lưu trữ font chữ trên máy chủ của riêng bạn giúp bạn tối ưu hóa hiệu suất của font chữ web nhưng đó cũng là cách thực hiện an toàn hơn thay vì lấy tài nguyên từ các trang web của bên thứ ba.
=> Xem thêm: Cách thay đổi cài đặt phím Fn trong Windows 10
Font chữ của Google và các phông chữ trên web khác cho phép bạn tải xuống các font chữ để sử dụng làm font chữ được lưu trữ cục bộ nhưng bạn vẫn có thể tải xuống các phông chữ khác về máy tính của mình với điều kiện giấy phép cho phép bạn làm như vậy.
- Để bắt đầu, hãy tải xuống, giải nén, tải tệp phông chữ lên trang web của bạn rồi liên kết tệp đó trong biểu định kiểu của bạn. Trong trường hợp này, bạn không cần phải sắp xếp các phông chữ trong tệp tin functions.php như bạn đã làm với các font chữ trên web. Xác nhận rằng các tệp bạn đang tải lên có định dạng .woff trước khi sử dụng chúng trên trang web của bạn.
- Tiếp theo, truy cập wp-content/themes/themename để tải tệp font chữ lên chủ đề của bạn.
- Mở biểu định kiểu và thêm mã sau (trong trường hợp này chúng tôi đang sử dụng phông chữ Work Sans nhưng bạn có thể thay thế bằng phông chữ của riêng mình):
@ font-face {
font-family: ‘Work Sans’;
src: url(“phông chữ/Work Sans-Medium.ttf”) định dạng(‘woff’); /* medium */
font-weight: normal;
kiểu chữ: bình thường;
}
@ font-face {
font-family: ‘Work Sans’;
src: url(“phông chữ/Work Sans-Bold.ttf”) định dạng(‘woff’); /* trung bình */
độ dày phông chữ: đậm;
kiểu chữ: bình thường;
}
@ font-face {
font-family: ‘Cambria’;
src: url(“phông chữ/Cambria.ttf”) định dạng(‘woff’); /* medium */
font-weight: normal;
kiểu chữ: bình thường;
}
Lưu ý : Sử dụng @fontface cho phép bạn sử dụng chữ đậm, chữ nghiêng và các biến thể khác của phông chữ, sau đó bạn có thể chỉ định trọng lượng hoặc kiểu cho từng phông chữ.
- Tiếp theo, thêm kiểu dáng cho các phần tử của bạn như sau:
body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}
h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}
Tùy chỉnh kiểu chữ WordPress của bạn
Thay đổi font chữ trong WordPress là một ý tưởng tuyệt vời để cải thiện thương hiệu và trải nghiệm người dùng. Đây không phải là một nhiệm vụ đơn giản, nhưng bạn sẽ có nhiều quyền kiểm soát hơn đối với chủ đề của mình.
Bạn có thể tùy chỉnh phông chữ của trang web của mình bằng các bước sử dụng các mẹo trong hướng dẫn này không? Hãy cho chúng tôi trong các ý kiến.