How to Change Font Type, Color, & Size in WordPress

努力在WordPress中更改字体？

您网站的字体或版式在你的网站的设计as well as its用户体验。When you’re creating or optimizing web pages, you'll want to findthe perfect font(s)to use for your content so visitors are not only captivated by your design but also receiving information as intended.

但是,它很难知道从哪里得到明星ted, especially if your WordPress theme doesn't offer very flexible font options. Thankfully, there are some easy ways to go beyond your theme's built-in typography options and access pretty much any font on the internet for yourWordPress website。

在这篇文章中，我们将审查更改WordPress字体的四种不同方法，包括更改字体类型，大小和颜色。

如何更改WordPress中的字体

Here's a quick summary of each method:

1. 使用您的WordPress主题：最好的起点是检查您的WordPress主题是否已经提供了灵活的排版设置。这并不总是有效，但我们总是建议从这里开始。
2. 使用Google字体插件: you can use a simple free plugin to access the 1,350+ free fonts at Google Fonts.
3. Upload a custom font：您可以使用简单的插件或您自己的自定义CSS上传任何自定义字体。
4. Adjust fonts for individual pieces of content：如果需要，您可以逐件调整网站的字体。

1. Change fonts with your WordPress theme settings.

In WordPress, the easiest way to change font — and the best place to start — is your theme's built-in typography settings.

几乎所有WordPress主题都带有内置选项，可让您更改字体，字体大小和字体颜色。但是，这些选项在每个主题中都是唯一的。

Some themes will give you very limited options, in which case you might want to use one of the other methods on this list. Other themes will give you very detailed options, in which case your theme's font options might be all you need.

There are two ways to access your theme's font settings.

WordPress Customizer

访问主题版式设置的最常见方法是via the WordPress Customizer。To launch it, go to外观→自定义在您的WordPress仪表板中。

You'll need to find the settings area for your theme's typography. Unfortunately, this will be slightly different for every theme, so we can't give you exact instructions.

通常，您会在Customizer侧边栏中看到一个名为“版式”的菜单区域。

但是，您可能需要首先导航到菜单类别之一。例如，在Astra主题中，您需要首先打开Globalsettings before you can find theTypographysettings:

Once you select those settings, you'll see options to change your site's font. Again, these options will be different for every WordPress theme.

For this example, the image below shows the typography options in the free Astra theme. You can use the drop-down menus to change the font for different parts of your site. If you're not sure how to change font size, you should be able to do that from this area, too.

当您在此处进行更改时，您应该看到这些更改立即出现在网站的实时预览中。

To change the font color, you might need to go to a different area in the Customizer, such as theColorsettings. Or, you might need to add some custom CSS. For example, here's how to change the font color in your header by adding some custom CSS:

。

颜色：＃0742ff;

}

You can add this custom CSS to theAdditional CSS定制器中的部分，如下所示。

If you're happy with how your changes look, click thePublishbutton to make them live.

Custom Theme Options Panel

This second method has become a lot less common, but some WordPress themes still use a custom theme options panel.

In this case, you'll typically manage fonts from that area instead of the WordPress Customizer.

如果您在定制器中没有看到任何字体选项，请检查主题的文档，以查看是否需要使用自定义主题选项区域。

2.添加谷歌字体to your WordPress website.

如果您对主题的内置字体设置不满意，另一个不错的选择是将Google字体添加到您的网站。

If you're not familiar with Google Fonts, it's a large collection of 1,350+free-to-use fonts，包括一些most popular fontson the web such as Roboto, Montserrat, and Lato. You canbrowse the full collection here。

Manypopular WordPress themesnow offer built-in Google Fonts support, which you can typically access via the methods in the previous section.

However, if your theme doesn't offer that option, there are a number of版式插件that let you easily add Google Fonts to WordPress. Here are some of the most-usedWordPress Google Fonts plugins:

• 字体插件
• Easy Google Fonts
• WP Google Fonts

More advanced users can also considerOMGF插件，它可以帮助您本地托管服务器上的字体，而不是使用Google Fonts内容交付网络（CDN）。一些网站管理员从性能的角度更喜欢这种方法，因为它使您可以控制缓存行为并消除第三方HTTP请求。

For this tutorial, we'll use the free Fonts Plugin, but most Google Fonts plugins work in a similar way.

To begin, install and activate the plugin from WordPress.org. From there, the Fonts Plugin lets you customize your site's fonts using the real-time WordPress Customizer, just as we showed you for the theme method above.

To launch the interface, go to字体插件→ Customize Fonts在您的WordPress仪表板中。You should see a live preview of your site along with four settings areas in the sidebar:

• 基本设置：control sitewide typography for your body text, headings, and buttons.
• Advanced Settings:将版式应用于更具体的元素，例如侧栏小部件和页脚小部件。这些将自动从基本设置区域继承字体，但是您可以在需要时覆盖它们。
• 字体加载：需要插件的高级版本。
• Debugging: you should be able to leave these as the defaults.

To begin, go to theBasic Settingsand make your sitewide selections. As you change the font, you should immediately see the live preview change.

For some sites, this might be all you need. However, if you want to adjust the font for specific elements, you might want to open theAdvanced Settings更颗粒状控制的区域。

3. Add custom fonts to WordPress.

Google Fonts is popular because of its huge library of quality fonts. However, you might have situations where the Google Fonts collection isn't enough.

In that case, you can find a number of free or paid fonts that you can use on your WordPress site. However, you'll need to upload the fonts to your site's server and then integrate them into your web pages.

To find fonts, try searchng on Google or browse popular free font marketplaces such as字体松鼠,达冯, and1001 Free Fonts(实际上有65,000多个免费字体）。Then, you can either use a plugin to add them to your site or upload and register the fonts manually using CSS.

We'll cover both methods below.

Download the “Use Any Font” plugin.

The simplest way to add custom fonts to WordPress is via the aptly named,Use Any Font plugin。顾名思义,这个插件允许您upload any font file to WordPress and use it anywhere on your site, including in the native editor,page builder plugins, and some popular WordPress themes.

This plugin is the best option for non-technical users because it eliminates the need to use custom CSS.

To begin, install and activate the plugin. Then, go to the newUse Any Fontarea in your WordPress dashboard.

首先，单击按钮Generate Free Lite / Test API Key然后单击Verifybutton once it generates the API key.

Then, go to theUpload Fonttab and upload the font file that you want to use. You can use the following formats:

• 。woff
• .ttf
• 。otf

If you downloaded the font as a zip file, you'll first need to extract the zip file and then upload the actual font file.

上传完成后，请转到Assign Fonttab to assign where you want to use that font on your site:

1. Click theAssign Fontbutton.
2. Select the font that you just uploaded using the drop-down.
3. Use the checkboxes to control where you want to apply that font. For example, to use the font for your blog post titles, you can select仅发布标题。或者，您可以选择标题1将其用于所有H1标签。
4. Click the otherAssign Fontbutton below the settings to save your choices.

And that's it. Your site will start using that font for the element that you selected. Here's an example of the custom font for the post title:

Use custom CSS code.

如果您不想使用插件，也可以使用CSS将自定义字体添加到WordPress中 - 尽管此方法更具技术性。

首先，您需要将自定义字体文件上传到WordPress站点的服务器。我们建议尽可能使用WOFF2格式，因为它提供的文件尺寸比其他字体格式更小，这将改善您的网站性能。

Once you've uploaded the font file, you need to use the CSS font-face property to register the font on your site. You can do this via two ways:

1. Open the WordPress Customizer and add the code to theAdditional CSS区域。
2. Create a WordPress child theme并将代码添加到style.css在您的孩子主题中归档。

这是您需要使用的代码。确保用您使用的实际字体替换详细信息（名称，文件位置等）：

@font-face {

字体家庭：您的fontfamilyname;

src: url(full-url-path-to-font-file.woff);

font-weight: normal;

}

完成此操作后，您可以使用其他CSS来控制使用该字体的位置。例如，如果您希望网站上的所有H1标题都使用此字体，则将添加以下代码：

字体家庭：您的fontfamilyname;

}

使用自定义CSS也是更改字体颜色的好解决方案，因为您只需要添加额外的代码线即可控制所使用的字体的颜色和大小。

4. Change fonts in the WordPress Editor.

So far, we've assumed that you want to change fonts across your entire site. However, you might have situations where you only want to change the font for a specific piece of content.

Here are two options for doing so.

Use the Block Editor and the Fonts plugin.

If you're using the native WordPress Block Editor, you can change the typography for specific blocks in your design. However, you'll need the help of a plugin — the sameFonts pluginthat we featured in the Google Fonts section above.

As long as you have the plugin active, you'll get a new Google Fonts block that you can use in the editor. This block lets you add paragraph or heading text to the editor. However, unlike the regular Paragraph or Heading blocks, you'll also get an option to change the font.

添加Google字体块时，您首先要选择块类型。The default is paragraph text, but you can also use the drop-down to make it into a heading.

然后，使用Font下拉以选择要使用的字体。您可以从Google字体中选择任何字体。

Below that, you'll also get additional options to control the font size, line height, and color, which also makes this a great solution for changing font size in WordPress.

Use a page builder.

另一个选择是use a page builder plugin, as virtually all page builder plugins give you granular typography control on a content-by-content basis. For example, if you useElementor，它将使您对页面上的每个小部件进行调整版式。

Changing Fonts in WordPress

排版在您的网站上起着重要的作用，因此学习如何更改WordPress中的字体是一项重要技能。

To start, you'll want to check if your theme's built-in typography options can do what you need. If not, consider using a Google Fonts plugin or uploading your own custom fonts.

If you need more granular control over fonts on a piece-by-piece basis, you can also use typography controls in your favorite page builder or the WordPress Block Editor (在插件的帮助下）。

Give these solutions a try and you'll be up and running with the perfect fonts on your site in no time.