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 phông 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 đầu tiên tốt, tạo 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. Học cũng nhận thấy rằng phông chữ ảnh hưởng đến khả năng học, nhớ thông tin và ghi nhớ văn bản của người đọc.
Nếu bạn chỉ đã cài đặt một chủ đề WordPress hoặc có một số kinh nghiệm viết mã và CSS, chúng tôi sẽ chỉ cho bạn một số tùy chọn bạn có thể sử dụng để thay đổi phông chữ trong WordPress.
Cách thay đổi phông chữ trong WordPress
Có ba tùy chọn chính có sẵn để bạn thay đổi phông chữ trong WordPress:
1. Cách thay đổi phông chữ trong WordPress bằng cách sử dụng phông chữ web
Sử dụng phông chữ web là cách thay đổi phông chữ trong WordPress dễ dàng và nhanh hơn so với tải xuống và tải lên tệp phông chữ.
Với cách này tùy chọn, bạn có thể truy cập nhiều loại phông chữ mà không cần cập nhật chúng mỗi khi có thay đổi và nó không ảnh hưởng đến dung lượng máy chủ trên máy chủ của bạn. Phông chữ được phân phát trực tiếp từ máy chủ của nhà cung cấp bằng cách sử dụng một plugin hoặc bằng cách thêm mã vào trang web của bạn.
In_content_1 all: [300x250] / dfp: [640x360]->
Đảm bảo rằng phông chữ web bạn chọn cho trang web phù hợp với đặc điểm thương hiệu của bạn, 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 tâm trạng và hình ảnh mà bạn muốn.
Bạn có thể thêm phông chữ web sử dụng một 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 tùy chọn.
Cách thêm phông chữ web bằng plugin WordPress
Tùy thuộc vào phông chữ web bạn đã chọn, bạn có thể sử dụng WordPress plugin để truy cập thư viện phông chữ và chọn một 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 Kiểu chữ Phông chữ Google.
Nếu có những phông 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ố.
Lưu ý: Nếu bạn quên chọn xuất bản trong Trình tùy chỉnh, bạn sẽ mất tất cả các thay đổi bạn đã thực hiện.
Cách thêm Phông chữ Web bằng Mã
Bạn có thể cài đặt và sử dụng phông chữ web nếu bạn có quyền truy cập vào mã chủ đề của mình. Đây là một giải pháp thay thế thủ công để thêm một plugin bổ sung, nhưng không phức tạp nếu bạn làm theo các bước một cách cẩn thận.
Tuy nhiên, có các bước khác nhau cần thực hiện nếu bạn đang sử dụng một chủ đề từ thư mục chủ đề WordPress hoặc một chủ đề tùy chỉnh.
Nếu bạn mua một chủ đề từ thư mục chủ đề WordPress, 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 tệp định kiểu và hàm từ chủ đề của mình.
Lưu ý: Chúng tôi đã chọn Work Sans cho hướng dẫn này nên phông chữ Tên của bạn có thể khác tùy thuộc vào tên bạn đã chọn.
Đ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 các plugin của bên thứ ba. Nó cũng cho phép sửa đổi chủ đề con dễ dàng hơn.
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');
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_font s ');
Trong trường hợp này, chúng tôi đã xếp cả phông chữ Cambria và Work Sans.
Bước tiếp theo là thêm phông 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.
body {
font-family: 'Work Sans', sans-serif;
}
h1, h2, h3 {
font-family: 'Cambria', serif ;
}
Trong trường hợp này, phông chữ chính sẽ là Work Sans trong khi các phần tử 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 phông chữ của bạn có hoạt động như bình thường không. Nếu không, hãy kiểm tra để đảm bảo rằng các 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 và thử lại.
body {
font-family: 'Work Sans Phông chữ ', Arial, sans-serif;
}
h1, h2, h3 {
-family: 'Cambria', Times New Roman, serif;
}
Nếu mọi việc ổn, khách truy cập trang web của bạn sẽ thấy các phông 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, chẳng hạn như Arial hoặc Times New Roman trong trường hợp của chúng tôi.
2. Cách thay đổi phông chữ trong WordPress bằng Phông chữ lưu trữ
Lưu trữ phông 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 phông chữ web của mình, nhưng cũng là một cách an toàn hơn để làm điều đó thay vì lấy tài nguyên từ các trang web của bên thứ ba.
Phông chữ Google và các phông chữ web khác cho phép bạn tải xuống phông chữ để sử dụng làm phông chữ được lưu trữ cục bộ, nhưng bạn vẫn có thể tải các phông chữ khác xuống máy tính của mình với điều kiện giấy phép bạn phải làm như vậy.
@ font-face {
font-family: 'Work Sans';
src: url (“fonts / Work Sans-Medium.ttf”) format ('woff'); / * medium * /
font-weight: normal;
font-style: normal;
}
@ font-face {
font-family: 'Work Sans';
src: url ( Định dạng “font / Work Sans-Bold.ttf”) ('woff'); / * medium * /
font-weight: bold;
font-style: normal;
}
@ font-face {
font-family: 'Cambria';
src: url (“ định dạng font / Cambria.ttf ”) ('woff'); / * medium * /
font-weight: normal;
font-style: normal;
}ạnh>
Lưu ý: Sử dụng @fontface cho phép bạn sử dụng chữ in đậm, in nghiêng và các biến thể khác của phông chữ, sau đó bạn có thể chỉ định độ đậm hoặc kiểu cho mỗi phông chữ.
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 phông 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 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 biết trong phần bình luận.