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ố tạo 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. Các nghiên cứu^(Studies) 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^{(installed a WordPress theme)} 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 mà bạn có thể sử dụng để thay đổi phông chữ trong WordPress .

Cách thay đổi phông chữ trong WordPress^{(How to Change Fonts in 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^{(Google Fonts)} , Fonts.com hoặc Phông chữ Web Adobe Edge^{( Adobe Edge Web Fonts)} , được lưu trữ trên trang web của bên thứ ba
• Mã^(Code) phông chữ web vào chủ đề của bạn và xếp chúng vào hàng đợi
• Lưu trữ^(Host) 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^{(1. How to Change Fonts in WordPress Using Web Fonts)}

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 loại phông chữ khác nhau^{(access a variety of fonts)} 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^(Make) bảo rằng 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^{(using a WordPress plugin)} 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^{(How to Add Web Fonts Using a WordPress Plugin)}

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 plugin Google Fonts Typography .

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 ^(WordPress)Plugins > Add New .

1. Nhập Kiểu chữ Google Fonts^{(Google Fonts Typography)} vào hộp tìm kiếm và chọn Cài đặt ngay^{(Install Now)} .

1. Chọn Kích hoạt^(Activate) .

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

1. Chọn phần Phông chữ của Google^{(Google Fonts)} .

1. 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:

• Trong Cài đặt cơ bản^{(Basic Settings)} , đặt phông 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^{(Advanced Settings)} , hãy đị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 của bạn.

• Bỏ chọn^(Uncheck) bất kỳ trọng lượng phông chữ không mong muốn nào trong phần Tải Phông chữ^{(Font Loading)} để tránh làm chậm trang web của bạn^{(avoid slowing down your site)} .

Nếu 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 phần Gỡ lỗi^{(Debugging )} để khắc phục sự cố.

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

Lưu ý^(Note) : Nếu bạn quên chọn xuất bản trong Trình tùy chỉnh^(Customizer) , 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ã^{(How to Add Web Fonts Using Code)}

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 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 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^{(create a 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ừ thư viện Phông chữ của Google^{(Google Fonts)} và chọn biểu tượng + (plus) để thêm nó vào thư viện của bạn.

1. 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. Chuyển đến phần Nhúng phông chữ^{(Embed font)} trong tab Nhúng . ^(Embed)Bạn sẽ tìm thấy mã do Google Fonts tạo ra , trông giống như sau:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Lưu ý^(Note) : 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 nhau đối với bạn tùy thuộc vào những gì bạn đã chọn.

1. 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 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.

1. Để sắp xếp phông chữ, hãy mở tệp chức năng và thêm mã sau. ( Thay thế^(Replace) 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');

1. 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 cho các phần tử riêng lẻ 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 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ó đang hoạt động như bình thường hay không. Nếu không, hãy kiểm tra xem 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.

1. Có sẵn một phông chữ dự phòng để đả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 ổ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, 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ữ^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

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^{(a more secure way)} làm điều đó an toàn hơn thay vì lấy tài nguyên từ các trang web của bên thứ ba.

Phông chữ Google^(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 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 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.

1. Tiếp theo, truy cập wp-content/themes/themename để tải tệp phông chữ lên chủ đề của bạn. 
2. 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;
}

Lưu ý^(Note) : 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 từng phông chữ.

1. Tiếp theo, thêm kiểu 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^{(Customize Your WordPress Typography)}

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^(Were) 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^(Tell) chúng tôi biết trong phần bình luận.

How to Change Fonts in WordPress

A great way to add some branding and individualism to your WordPress ѕite is to change the fonts in your theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from 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’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

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’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@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;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

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;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• Cách di chuyển WordPress site từ máy chủ này sang máy chủ khác

• Cách cài đặt & Cài đặt WordPress trên Microsoft Azure

• Cách chạy Blazedly Fast WordPress trên Microsoft Azure

• Làm thế nào để cấu hình Privacy trong WordPress và tại sao điều quan trọng là

• Làm thế nào để cài đặt WordPress trên Google Cloud Platform

• Protect và WordPress website an toàn từ hacker

• người dùng chuyển hướng từ trang 404 trong WordPress

• Cách tìm thông tin đăng nhập quản trị viên WordPress của bạn

• Cách cài đặt trang web thử nghiệm WordPress trên máy tính của bạn

• Cách thiết lập thủ công WordPress trên tên miền

• Must Have WordPress Yoast SEO Settings 2021

• Cách tạo cửa sổ bật lên phiếu giảm giá của riêng bạn trong WordPress

• Hiển thị đoạn trích trên trang chủ của WordPress blog

• 7 mẹo WordPress để có một trang web thân thiện với thiết bị di động

• Cách sử dụng Lumen5 để biến bài đăng trên blog của bạn thành video

• Đánh giá sách: Xây dựng trang web của riêng bạn: Hướng dẫn truyện tranh về HTML, CSS và Wordpress

• Cách thêm thanh bên nổi trong Wordpress

• Cách thực hiện kiểm tra phân tách hiệu quả trong WordPress

• Cách thay đổi URL đăng nhập WordPress của bạn để bảo mật tốt hơn

• 8 chủ đề Premium WordPress miễn phí để cài đặt