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 for your site.

This feature is available on sites with our WordPress.com Premium, Business, and Commerce plans, and the legacy Pro plan. For sites on the Free and Personal plans, upgrade your plan to access this feature.

Watch a video showing how to update fonts on block themes. Instructions for all theme types can be found in the next section of this guide.

You can change the fonts of your site using the steps below.

To determine which section of this guide to follow, visit your dasard and check under Appearance on the left side. If you find Editor here, use the Site Editor section of this guide. Otherwise, use the Page Editor or Customizer instructions.

Select the appropriate tab for your editor:

Site EditorPage EditorCustomizer

If your site uses a theme that supports the site editor, you can use the Styles option to change change your fonts on your site. To change your site’s fonts, follow these steps:

1. Visit your website’s dasard.
2. Go to Appearance → Editor.
3. Click on Styles on the left.
4. Select the “Typography” option.
5. Choose from the following text elements on your site:
   • Text
   • Links (including menu items)
   • 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. You can adjust other settings related to the text, including the size, appearance (bold and italics), line height, letter spacing, and letter case.
8. Click the “Save” button to make your changes appear on the site.

On higher level plans, you can upload your own font files.

A small number of themes (full list) have their font settings within the page editor. Follow these steps to change your site’s font:

1. Visit your WordPress.com dasard.
2. Go to Pages and click on any page to edit it.
3. Click on the “Global Styles” icon (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” or “Save” to save your choice or “Reset” to revert the changes.

In classic WordPress themes, you’ll find the font settings in the Customizer. You can follow these steps to change your site’s fonts:

1. Visit your dasard.
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 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.

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 selected.
• 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.

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

You can adjust the font for a specific block (supported themes and blocks) using the block’s typography settings. Or, apply a default font to specific blocks. You can also consider using a Heading or Quote block to create a piece of text that stands out.

In addition to the fonts available on WordPress.com, you can add custom fonts to your website. Our guides will show you how to install fonts from Google Fonts or upload your own font files.

This feature is available on sites with the WordPress.com Business and Commerce plans, and the legacy Pro plan. If you have a Business plan, make sure to activate it. For sites on the Free, Personal, and Premium plans, upgrade your plan to access this feature.

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:

.wf-loading body { visibility: hidden; }

or

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