If you’re just starting to use WordPress, or you’ve never used Full Site Editor (FSE) themes before, you may be overwhelmed by the number of templates, patters and settings you have in your control. And there’s a high chance you won’t even notice that FSE themes have quite a lot of color and font settings available to you out of the box.
Great thing is that most used styling settings are well organized, and you’ll be able to find them all in one panel. Let’s check how font settings look in WordPress.
How to change fonts in WordPress
To access font settings in WordPress Full Site Editor themes you need to open site editor. You can do it by going to Appearance >> Editor in WordPress admin panel, or by clicking Edit site while you’re browsing your website as a visitor.
Once you’re in site editor look for Styles icon on the top right of the screen.
After clicking Styles you’ll see all available global styling settings for your current theme. Click Typography to check font settings.
Default WordPress themes lets you set different fonts for text, links, heading and buttons. Click on ony of those to change their default settings.
Just a short reminder – if you need, you can override these settings in any block while you’re editing pages or posts. And don’t worry about changing global settings if you have custom font settings in already existing posts. Global settings won’t reset your custom fonts.
When you select any of the items in Typography section you can change font family, font size, appearance (bold, italic, etc.) and line height.
Must themes have multiple fonts available by default.
Once you change font in typography settings you’ll see the result immediately. Left side of site editor will update it’s fonts and any other settings you’re editing there, even before saving changes.
Once you hit Save button website font settings will be live.
How to add font to WordPress Full Site Editor
The old methods of adding fonts directly to theme’s style.css file, or by adding custom CSS will work for website visitors, but you won’t be able to preview pages with the right font from the admin. So it’s not the right solution for FSE-based themes.
Good news is that WordPress let’s you easily add fonts to theme settings. To do that click Tools >> Theme File Editor in WordPress admin menu. Then click theme.json file on the right, and check for FontFamilies in file code.
You probably already noticed how different fonts are defined in theme. To add an additional font to WordPress theme you need to add additional fontFace to these settings.
Here’s the example how to add Georgia font to Full Site Editor based theme:
{
"fontFamily": "Georgia",
"name": "Georgia",
"slug": "georgia"
},Here’s where you should add the code:
Once you’ll add font it will be available to use both in main styling settings, and in custom block settings as well. It will also be previewed while you edit your site content.
How to add Google font with few weights to WordPress Full Site Editor
Want to add few different weights of Google font to WordPress full site editor? You can do it in the same Tools >> Theme File Editor, by adding font family with a bit more details.
But before adding a specific Google Font to WordPress you need to download that font files. You can use Google Webfonts helper tool for that. Here’s the example with Monsterrat font. First select font weights and styles you need:
Then scroll to the bottom of the page and download the selected font package.
Extract downloaded fonts, and upload them to /fonts folder in your WordPress theme using Filezilla or other similar FTP client.
Once files are in place you need to add that Google font family to theme.json file via Tools >> Theme File Editor.
Here’s an example I used in Frost theme to add multiple weights of Google Font in WordPress. You can add it just after “fontFamilies”: [ line:
{
"fontFace": [
{
"fontFamily": "Montserrat",
"fontStretch": "normal",
"fontStyle": "normal",
"fontWeight": "400",
"src": [
"file:./assets/fonts/montserrat-v25-latin-ext_latin-regular.woff2"
]
},
{
"fontFamily": "Montserrat",
"fontStretch": "normal",
"fontStyle": "italic",
"fontWeight": "400",
"src": [
"file:./assets/fonts/montserrat-v25-latin-ext_latin-italic.woff2"
]
},
{
"fontFamily": "Montserrat",
"fontStretch": "normal",
"fontStyle": "normal",
"fontWeight": "500",
"src": [
"file:./assets/fonts/montserrat-v25-latin-ext_latin-500.woff2.woff2"
]
},
{
"fontFamily": "Montserrat",
"fontStretch": "normal",
"fontStyle": "normal",
"fontWeight": "600",
"src": [
"file:./assets/fonts/montserrat-v25-latin-ext_latin-600.woff2.woff2"
]
},
{
"fontFamily": "Montserrat",
"fontStretch": "normal",
"fontStyle": "normal",
"fontWeight": "700",
"src": [
"file:./assets/fonts/montserrat-v25-latin-ext_latin-700.woff2.woff2"
]
}
],
"fontFamily": "\"Montserrat\", sans-serif",
"name": "Montserrat",
"slug": "montserrat"
},Here’s the screenshot:
That’s it, you should be able to use Google Font in WordPress now, and see how it looks directly in WordPress editor.
If you’re looking for simpler Google Fonts implementation in WordPress (without previewing it in Editor), you can check my other article how to add Google fonts locally to WordPress.
