@import url("+Sans");
@import url(":100,100i,300,300i,400,400i,700,700i,900,900i");
@import url("+Sans:wght@200;300;400;600;700;800;900&display=swap");
This is an snipped form layout.css which I have commented now as I wanted that the block theme should import such fomts form theme.json. Below is my theme.json —
{
"$schema": ".json",
"version": 3,
"settings": {
"layout": {
"contentSize": "700px",
"wideSize": "1200px"
},
"typography": {
"fontFamilies": [
{
"name": "PT Sans",
"slug": "pt-sans",
"fontFamily": "\"PT Sans\", sans-serif",
"fontFace": [
{
"fontFamily": "PT Sans",
"fontStyle": "normal",
"fontWeight": "400",
"src": ["+Sans"]
}
]
},
{
"name": "Lato",
"slug": "lato",
"fontFamily": "\"Lato\", sans-serif",
"fontFace": [
{
"fontFamily": "Lato",
"fontStyle": "normal",
"fontWeight": "100 900",
"src": [":100,100i,300,300i,400,400i,700,700i,900,900i"]
}
]
},
{
"name": "Martel Sans",
"slug": "martel-sans",
"fontFamily": "\"Martel Sans\", sans-serif",
"fontFace": [
{
"fontFamily": "Martel Sans",
"fontStyle": "normal",
"fontWeight": "200 300 400 600 700 800 900",
"src": ["+Sans:wght@200;300;400;600;700;800;900&display=swap"]
}
]
}
]
}
},
"styles": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--martel-sans)"
}
},
"templateParts": [
{
"name": "sidebar",
"title": "Sidebar",
"area": "sidebar"
}
]
}
But the fonts are not importing now.
@import url("https://fonts.googleapis/css?family=PT+Sans");
@import url("https://fonts.googleapis/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i");
@import url("https://fonts.googleapis/css2?family=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap");
This is an snipped form layout.css which I have commented now as I wanted that the block theme should import such fomts form theme.json. Below is my theme.json —
{
"$schema": "https://schemas.wp/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "700px",
"wideSize": "1200px"
},
"typography": {
"fontFamilies": [
{
"name": "PT Sans",
"slug": "pt-sans",
"fontFamily": "\"PT Sans\", sans-serif",
"fontFace": [
{
"fontFamily": "PT Sans",
"fontStyle": "normal",
"fontWeight": "400",
"src": ["https://fonts.googleapis/css?family=PT+Sans"]
}
]
},
{
"name": "Lato",
"slug": "lato",
"fontFamily": "\"Lato\", sans-serif",
"fontFace": [
{
"fontFamily": "Lato",
"fontStyle": "normal",
"fontWeight": "100 900",
"src": ["https://fonts.googleapis/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i"]
}
]
},
{
"name": "Martel Sans",
"slug": "martel-sans",
"fontFamily": "\"Martel Sans\", sans-serif",
"fontFace": [
{
"fontFamily": "Martel Sans",
"fontStyle": "normal",
"fontWeight": "200 300 400 600 700 800 900",
"src": ["https://fonts.googleapis/css2?family=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap"]
}
]
}
]
}
},
"styles": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--martel-sans)"
}
},
"templateParts": [
{
"name": "sidebar",
"title": "Sidebar",
"area": "sidebar"
}
]
}
But the fonts are not importing now.
Share Improve this question asked Apr 27 at 3:39 WordCentWordCent 1,9646 gold badges34 silver badges60 bronze badges 1- What does the console say? Any 404 errors under the hood while fetching the fonts? – user3135691 Commented Apr 27 at 22:48
1 Answer
Reset to default 3Make 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/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