Back to Support Design Your Site Change Your Site's Fonts

Change Your Site’s Fonts

The style of the text characters on your website is known as the font. This guide will show you how to choose the fonts on your site.

Method 1: Change Fonts in the Site Editor

If your site uses a theme that supports the site editor, you can change your site’s fonts using this method. A quick way to find out if your site uses the site editor is to check under Appearance in your dashboard. If you see Editor here, you can change your site’s fonts by following these steps:

  1. Visit your WordPress.com dashboard.
  2. Go to Appearance → Editor.
  3. Click on Styles on the left, or select the Styles icon as shown here. The icon looks like a black-and-white circle.
  4. Select Typography.
  5. Choose from the following text elements on your site:
    • Text
    • Links
    • Headings
    • Captions
    • Buttons
  6. Click the dropdown under Font and choose your desired font. The text will update to your chosen font for you to see how it looks.
  7. Click Save.

These steps are demonstrated in the video below:

This feature is available on sites with our WordPress.com Explorer, Creator, and Entrepreneur plans. If your site has one of our legacy plans, it is available on the Pro plan.

An arrow points to the Styles button in the Site Editor. The icon is a black and white circle.
The Styles icon
Changing fonts in the Site Editor

See our Styles guide for more detailed information on everything you can do to adjust the appearance of text on your website.

Method 2: Change Fonts in the Page Editor

If your site uses one of these themes, you can change the site’s font using the Global Styles setting.

  1. Visit your WordPress.com dashboard.
  2. Go to Pages and click on any page to edit it.
  3. Click on the Global Styles icon, as shown here. The icon has an upper case ‘A’ followed by a lower case ‘a’.
  4. Click the dropdown under Heading Font or Base Font to see the available font options:
    • Heading Font is used for all of the headings on your site, such as post and page titles, widget titles, comment headers, and headlines inside posts and pages.
    • Base Font is used for the main body text and for the menus on your site.
  5. Choose your desired font. The text will update to your chosen font for you to see how it looks.
    • If you’re unsure which font to choose, you will see some recommended pairings below the dropdowns.
  6. Click Publish to save your choice or Reset to revert the changes.
A box around the the Global Styles button that is located in the top left corner of the block editor between the Page Settings button and the Jetpack settings button.

Method 3: Change Fonts in the Customizer

In classic WordPress themes, you’ll find the font settings in the Customizer. A quick way to check if your site has a classic theme is to check under Appearance → Customize in your dashboard. If you see Fonts here, you can change your site’s fonts by following these steps:

  1. Visit your dashboard.
  2. Go to Appearance Customize.
  3. Click on the Fonts option.
  4. Click the dropdown under Headings or Base Font to see the available font options:
    • Headings is used for all of the headings on your site, such as post and page titles, widget titles, comment headers, and headlines inside posts and pages.
    • Base Font is used for the main body text and for the menus on your site.
  5. Choose your desired font. The text will update to your chosen font for you to see how it looks.
  6. Click Save Changes to publish your new font choices. to the site.
The Customizing Fonts section of the Customizer displaying the Headings and Base Font drop-down menus.

Depending on the font you have chosen, you may see additional options:

Font style – To adjust the style of your heading fonts, click the option below and to the left of the font. The available styles will vary depending on the font you have chosen.

Font size – To adjust the size of either your heading or your base fonts, click the size option below and to the right for each selected font and select a size from the drop-down menu.

The Customizing Fonts panel with the Headings option set to Tangerine, the font style set to bold and the font size set to huge.

You can switch back to your theme’s default font by clicking the X to the right of the font name:

The Customizing Fonts panel with an arrow pointing to the X to the right of the custom heading font to reset the font to the theme's default.
Click the X next to a custom font to restore the default font for the theme.

Apply a Font to Specific Text

When choosing fonts, you’ll see options to set the fonts for your overall site, not for individual pages or a specific line of text. This is a best practice when it comes to design — websites look best when there is consistency with the fonts across the entire site. If a site had a bunch of different fonts, it could get unwieldy.

If your goal is to make a piece of text stand out, consider other ways of doing so, such as applying different colors, using a Heading or Quote block, or inserting an image.

Upload Custom Fonts

This section of the guide applies to sites with the WordPress.com Creator or Entrepreneur plan. If your site has one of our legacy plans, this feature is available on the Pro plan.

You will find a large selection of font styles for your website. If you would like more fonts to choose from, you can install or upload custom fonts directly through the Site Editor.

Our comprehensive guide will show you how to install, upload, and manage custom fonts.

Flash of Unstyled Text

Flash of Unstyled Text (FOUT) is when a different font briefly appears before your chosen font appears. The text is displayed in the theme’s default font on slower connections first. This way, people can start reading your content before your chosen font loads instead of waiting while looking at a blank page. This might mean that there’s a flash of a different font before the page finishes loading, but overall this is better for viewers on slower connections than seeing a blank screen.

If you don’t want this to happen, you can add this CSS code to your site with eligible plans (Explorer plan and above), using the CSS Editor in Appearance → Customize → Additional CSS:

.wf-loading body { visibility: hidden; }

or

html:not(.wf-active) body { display: none; }

Google Fonts and GDPR

All requests to serve Google Fonts used in WordPress.com themes are served through WordPress.com’s servers and no longer use Google’s CDN/FDN. This change was made in December 2022.

If your site uses a custom plugin or third-party theme, verify with the plugin and/or theme developers to ensure they are not serving Google Fonts through Google’s CDN/FDN. You can learn more about GDPR here.

Was this guide helpful for you?

Not quite what you're looking for? Get Help!

Copied to clipboard!