Managed-WP.™

如何轻松更改 WordPress 网站的全局字体


Changing the global font on your WordPress website can have a significant impact on its overall appearance and user experience. The right font can make your content easier to read, reinforce your brand identity, and create a more visually appealing layout. In this article, we will walk you through the process of changing your WordPress website’s global font using various methods. We’ll cover everything from using WordPress Customizer to working with CSS and installing plugins.

目录

  1. 使用 WordPress 定制器
  2. Adding Google Fonts
  3. Custom CSS Method
  4. 使用插件
  5. Gutenberg Editor Fonts
  6. 结论

1. Using WordPress Customizer

WordPress Customizer is a built-in tool that allows you to modify the design and layout of your website, including your global font. Here’s how you can use it to change your website’s font:

1.1 Access the Customizer

Login to your WordPress dashboard and navigate to Appearance → Customize.

1.2 Locate Typography Settings

Search for typography settings within the Customizer. This may vary depending on the theme you’re using, but typically you’ll see options like 排版, Fonts, 或者 Font Settings.

1.3 Change Global Font

Select the desired font from the available options and adjust the font size, line height, and other properties as desired. Once you’re satisfied with your changes, click the Publish button to save and update your website’s global font.

2. Adding Google Fonts

With Google Fonts, you can easily access a wide range of fonts to use on your website. Here’s how to add and use Google Fonts on your WordPress website:

2.1 Select a Font

Browse through the available fonts at fonts.google.com and choose a font that best fits your website’s design. Click on the font, and select the styles you want to use (e.g., normal, bold, italic).

2.2 Embed the Font

Once you’ve selected the font and styles, click the Embed tab to get the code you need to add to your website. Copy the generated link and paste it into your WordPress theme’s header.php file, just before the closing </head> tag.

2.3 Apply the Font

To apply the font to your entire website, find the font-family CSS property in the code provided by Google Fonts, and copy it. Then, add this CSS property to the body selector in your theme’s style.css file.

3. Custom CSS Method

If your theme doesn’t support typography customization through the WordPress Customizer, you can still change the global font using custom CSS. Follow these steps:

3.1 Access Additional CSS

From your WordPress dashboard, go to Appearance → Customize, and then locate the Additional CSS 部分。

3.2 Add Custom CSS

Enter the following code snippet into the Additional CSS text area and replace your-font-family with the desired font:

body {
  font-family: your-font-family;
}

点击 Publish button to save and apply the new font to your entire website.

4. Using Plugins

There are several plugins available that can help you change your website’s global font easily, such as Easy Google FontsCustom Adobe Fonts (Typekit). Here are the general steps to using a font plugin:

4.1 Install and Activate the Plugin

Search for the desired font plugin in the WordPress plugin directory, install and activate it.

4.2 Configure Plugin Settings

Go to the plugin’s settings page and configure it as needed. For example, you might need to enter your API key, choose a font from the plugin’s font library, or adjust font properties.

4.3 Apply the Font

Finally, apply the selected font to your website by following the plugin’s instructions. This may involve adding a CSS class or modifying your theme’s CSS file.

5. Gutenberg Editor Fonts

If you’re using the Gutenberg block editor, you may have additional options for controlling the font directly in the editor. These options may include:

  • Font size and line height controls in the block’s toolbar
  • Drop cap styling for paragraphs
  • Global styling options for headings, paragraphs, and other text elements.

To access these font settings, select the desired text element within the editor and look for the relevant options in the right-hand settings panel or the block toolbar at the top of the screen.

6. Conclusion

Changing your WordPress website’s global font can be an effective way to improve its overall design and readability. As we’ve discussed, there are multiple methods for doing so, including using WordPress Customizer, Google Fonts, custom CSS, and plugins. The most suitable approach will depend on your personal preferences and your theme’s capabilities. By following the steps outlined in this article, you’ll be well on your way to creating a more visually appealing site with the perfect global font.


热门文章