Make sure the layout.css file is called correctly, both on the frontend and backend.
No need to add fontFace, you have called it via @import :
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "700px",
"wideSize": "1200px"
},
"typography": {
"fontFamilies": [
{
"fontFamily": "\"PT Sans\", sans-serif",
"name": "PT Sans",
"slug": "pt-sans"
},
{
"fontFamily": "\"Lato\", sans-serif",
"name": "Lato",
"slug": "lato"
},
{
"fontFamily": "\"Martel Sans\", sans-serif",
"name": "Martel Sans",
"slug": "martel-sans"
}
]
}
},
"styles": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--martel-sans)"
}
},
"templateParts": [
{
"name": "sidebar",
"title": "Sidebar",
"area": "sidebar"
}
]
}
If you mean the font does not appear in the font selection dropdown, it means you need to Reset Style in the block editor in the section: Style >> Typography
Update :
The way to import fonts directly via CSS with @import from Google Fonts or other URLs is not the best way for modern WordPress themes, especially for Full Site Editing (FSE).
There are two ways to add fonts to the Theme:
- Place the Font File in the Theme directory, then call it via theme.json with fontFace :
for example adding the same font but different style
your-theme/assets/fonts/nunito/Nunito-VariableFont_wght.woff2
and
your-theme/assets/fonts/nunito/Nunito-Italic-VariableFont_wght.woff2
And call it via theme.json , because the Nunito font has variations of 200 – 1000, so here input the fontWeight according to the font variation, or just what is needed.
{
"settings": {
"typography": {
"fontFamilies": [
{
"fontFace": [
{
"fontFamily": "Nunito",
"fontStyle": "normal",
"fontWeight": "200 1000",
"src": [
"file:./assets/fonts/nunito/Nunito-VariableFont_wght.woff2"
]
},
{
"fontFamily": "Nunito",
"fontStyle": "italic",
"fontWeight": "200 1000",
"src": [
"file:./assets/fonts/nunito/Nunito-Italic-VariableFont_wght.woff2"
]
}
],
"fontFamily": "\"Nunito\", sans-serif",
"name": "Nunito",
"slug": "nunito"
}
]
}
}
}
- Using custom functions in PHP
source : webfont-loader