Cách thay đổi phông chữ trong WordPress

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 dải khác elements tạo ấn tượng tốt ban đầu, 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 đã phát hiện ra 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 vừa 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:

• Sử dụng các phông chữ web như Phông chữ Google , Fonts.com hoặc Phông chữ Web Adobe Edge, được lưu trữ trên trang web của bên thứ ba
• Mã phông chữ web vào chủ đề của bạn và xếp chúng vào hàng đợi
• 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 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 chóng hơn 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 phông 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 ảnh hưởng đến không gian máy chủ trên máy chủ 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 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.

Đảm bảo rằng các phông chữ web bạn chọn cho trang web của mình 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 bằng cách 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 bạn. 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 plugin WordPress để truy cập thư viện phông 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 Google Fonts Typography plugin.

1. Để bắt đầu, hãy đăng nhập vào bảng điều khiển quản trị WordPress của bạn và chọn Plugins > Add New.

2. Kiểu Google Fonts Typography trong hộp tìm kiếm và chọn Install Now.

3. Lựa chọn Activate.

4. Tiếp theo, truy cập vào Customizer bằng cách đi đến Appearance > Customize.

5. Chọn Google Fonts phần.

6. Tiếp theo, nhấp vào liên kết để mở cài đặt phông chữ và định cấu hình chúng như sau:

• Dưới Basic Settings, đặt phông chữ mặc định cho văn bản nội dung, tiêu đề và các nút của bạn.

• Dưới Advanced Settings, định cấu hình tiêu đề và mô tả trang web, menu, tiêu đề và nội dung, thanh bên và chân trang.

Nếu có các 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 Debugging phần để khắc phục sự cố.

7. Bạn có thể kiểm tra các cài đặt này trong Trình tùy chỉnh để đảm bảo chúng hoạt động theo cách bạn muốn, sau đó chọn Publish.

Ghi chú: 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 nó 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 nhau 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.

Nếu bạn đã mua một chủ đề từ thư mục chủ đề WordPress, hãy tạo một chủ đề con child theme 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.

1. Để bắt đầu, hãy chọn một phông chữ từ Google Fonts thư viện và chọn biểu tượng dấu + (plus) để thêm nó vào thư viện của bạn.

2. Tiếp theo, chọn tab ở dưới cùng nơi bạn sẽ tìm thấy mã để thêm vào trang web của mình. Đi đến Embed font phần dưới Embed tab. 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">

Ghi chú: Chúng tôi đã chọn Work Sans cho hướng dẫn này vì vậy tên phông chữ có thể khác tùy theo bạn tùy thuộc vào những gì bạn đã chọn.

3. Sao chép phần này của mã: https://fonts.googleapis.com/css2?family=Work+Sans

Điều này cho phép bạn sắp xếp kiểu từ Google Fonts máy chủ để ngăn xung đột với bên thứ ba plugins. Nó cũng cho phép sửa đổi chủ đề con dễ dàng hơn.

4. Để sắp xếp phông chữ, hãy mở tệp chức năng và thêm mã sau. (Thay thế liên kết bằng liên kết bạn lấy 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' );

5. Bạn có thể thêm một dòng mới vào hàm 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ắp 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.

1. Để 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 riêng lẻ elements với phông chữ web của bạn như sau:

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 tiêu đề elements 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 hay 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.

2. Có một phông chữ dự phòng tại chỗ để đảm bảo rằng các 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ữ có vấn đề 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 tốt, 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ữ sao lưu, 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 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 nó cũng một cách an toàn hơn thay vì lấy tài nguyên từ các trang web của bên thứ ba.

Google Fonts 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 cho phép bạn làm như vậy.

1. Để 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 và sau đó 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 phải xếp hàng các phông chữ trong tệp functions.php như đã làm với phông chữ 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.

2. Tiếp theo, duyệt đường dẫn sau wp-content/themes/themename để tải tệp phông chữ lên chủ đề của bạn.
3. 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( "fonts/Work Sans-Medium.ttf") format('woff'); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Work Sans';
src: url( "fonts/Work Sans-Bold.ttf") format('woff'); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Cambria';
src: url( "fonts/Cambria.ttf") format('woff'); /* medium */
font-weight: normal;
font-style: normal;
}

Ghi chú: 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ữ.

4. Tiếp theo, thêm kiểu dáng cho elements 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 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 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 biết trong phần bình luận.