Table of contents
When you open the theme.json of your Base FSE child theme, you will find the following lines.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {},
"styles": {},
"templateParts": [],
"customTemplates": []
}For the purpose of this documentation, we are adding the font Berkshire Swash (available at Google Fonts) to our child theme.
Technical implementation of the font files
This is how our modifications to the theme.json will look like.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "\"Berkshire Swash\"",
"slug": "berkshire-swash",
"name": "Berkshire Swash",
"fontFace": [
{
"fontFamily": "\"Berkshire Swash\"",
"fontWeight": "400",
"fontStyle": "normal",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
"src": [
"file:./assets/fonts/Berkshire-Swash/berkshire-swash-v16-latin-regular.woff2",
"file:./assets/fonts/Berkshire-Swash/berkshire-swash-v16-latin-regular.woff"
]
},
{
"fontFamily": "\"Berkshire Swash\"",
"fontWeight": "400",
"fontStyle": "normal",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF",
"src": [
"file:./assets/fonts/Berkshire-Swash/berkshire-swash-v16-latin-800.woff2",
"file:./assets/fonts/Berkshire-Swash/berkshire-swash-v16-latin-800.woff"
]
}
]
}
]
}
},
"styles": {},
"templateParts": [],
"customTemplates": []
}
You can see that we have added two entries for the font. The reason is that we are splitting up the font by Unicode ranges Latin and Latin-ext. This helps to reduce the file size of loaded font files for visitors. The font files we are using here are WOFF2 and WOFF.
Creating your font stack
Base FSE adds some custom fonts to your website by default. If you do not touch the font settings, you will have these options available:
- System Fonts
- Noto Sans
- Andada Pro
If you are adding custom fonts in the theme.json of your child theme, the default fonts will collectively not be loaded anymore.
We recommend always adding back the System Fonts definitions to your font stack. The System Fonts are a great fallback font that will be compatible with all devices.
When it comes to creating your font stack, we recommend adding a maximum of 3 custom fonts. Ideally, you will use one font which is optimized for style and design for the headlines. For the body text of your website, we recommend a simple font that is optimized for readability (Noto Sans is our default choice at Base FSE).
Make System Fonts available as a font in WordPress
To add System Fonts as a font option to your child theme, just add these lines to the settings > typography > fontFamilies section of your `theme.json`.
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\", \"Fira Sans\", \"Droid Sans \", \"Helvetica Neue\",sans-serif",
"slug": "system-font",
"name": "System Font"
}Add Noto Sans to your font stack
Base FSE uses Noto Sans as the default font for primary text. If you are adding custom fonts, this font will also stop being loaded. If you want to add it back to your theme, you may add it to the theme.json of your child theme.
You don’t have to copy the font files for Noto Sans to your child theme. If you use the lines below, the font will automatically be loaded from the Base FSE folder.
These are the original lines from the Base FSE theme.json that you can simply copy/paste to the settings > typography > fontFamilies section of your child theme’s theme.json.
{
"fontFamily": "\"Noto Sans\"",
"slug": "noto-sans",
"name": "Noto Sans",
"fontFace": [
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "400",
"fontStyle": "normal",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-regular.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-regular.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "700",
"fontStyle": "normal",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-800.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-800.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "400",
"fontStyle": "italic",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-italic.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-italic.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "700",
"fontStyle": "italic",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-800italic.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-800italic.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "400",
"fontStyle": "normal",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-ext-regular.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-ext-regular.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "700",
"fontStyle": "normal",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-ext-800.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-ext-800.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "400",
"fontStyle": "italic",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-ext-italic.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-ext-italic.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "700",
"fontStyle": "italic",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-ext-800italic.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-latin-ext-800italic.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "400",
"fontStyle": "normal",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-vietnamese-regular.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-vietnamese-regular.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "700",
"fontStyle": "normal",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-vietnamese-800.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-vietnamese-800.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "400",
"fontStyle": "italic",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-vietnamese-italic.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-vietnamese-italic.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "700",
"fontStyle": "italic",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-vietnamese-800italic.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-vietnamese-800italic.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "400",
"fontStyle": "normal",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-regular.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-regular.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "700",
"fontStyle": "normal",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-800.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-800.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "400",
"fontStyle": "italic",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-italic.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-italic.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "700",
"fontStyle": "italic",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-800italic.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-800italic.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "400",
"fontStyle": "normal",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-ext-regular.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-ext-regular.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "700",
"fontStyle": "normal",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-ext-800.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-ext-800.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "400",
"fontStyle": "italic",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-ext-italic.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-ext-italic.woff"
]
},
{
"fontFamily": "\"Noto Sans\"",
"fontWeight": "700",
"fontStyle": "italic",
"fontStretch": "normal",
"fontDisplay": "swap",
"unicodeRange": "U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",
"src": [
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-ext-800italic.woff2",
"file:./assets/fonts/Noto-Sans/noto-sans-v27-cyrillic-ext-800italic.woff"
]
}
]
}Styling your theme
Once you have created your font stack and technically loaded your fonts, you can start to style your theme.
Base FSE, by default, utilizes System Fonts, Noto Sans, and Andada Pro for body text and accents (such as headlines and the site title).
If you want to add your font to these WordPress core blocks, you can customize the styles section of your `theme.json`.
In this case, you don’t have to repeat all the configurations from Base FSE’s original core block configuration. WordPress will inherit the original Base FSE configuration and only override them with the items you are defining in your `theme.json`.
Add your font to headlines
These are the lines to add your custom font to the headings block of WordPress. In this example, we’re again using the Berkshire Swash font from the example above. The code goes to the styles section of your `theme.json`.
"blocks": {
"core/heading": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--berkshire-swash)",
}
}
}Add your font to the site title block
You can also add your custom font to the site title block if you don’t want to edit the block manually in the editor. These are the lines to be added to the styles > blocks section of your `theme.json`.
"core/site-title": {
"elements": {
"link": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--berkshire-swash)",
"fontStyle": "normal"
}
}
}
}