i follow the twenty twenty two theme, and added to my custom theme: i have in my assets/fonts folder, my woff2 font. and in my theme.json inside the setiings -> typography ->fontFamilies like so:
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"slug": "system-font",
"name": "System Font"
},
{
"fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
"slug": "helvetica-arial"
},
{
"fontFamily": "Geneva, Tahoma, Verdana, sans-serif",
"slug": "geneva-verdana"
},
{
"fontFamily": "Cambria, Georgia, serif",
"slug": "cambria-georgia"
},
{
"fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif",
"slug": "hoefler-times-new-roman"
},
{
"fontFamily": "Rubik, Verdana, sans-serif",
"slug": "rubik-verdana"
},
{
"fontFamily": "Rubik-Italic, Verdana, sans-serif",
"slug": "rubik-italic-verdana"
},
{
"fontFamily": "\"Rubik Glitch\", cursive",
"name": "Rubik Glitch",
"slug": "rubik-glitch",
"fontFace": [
{
"fontFamily": "Rubik Glitch, cursive",
"src": ["file:./assets/fonts/Rubik_Glitch/RubikGlitch-Regular.woff2"]
}
]
}
]
but it doesn't work. when i go to the global styles and change the site fonts, nothing is changing.
what am i doing wrong?
I think you'll need to have a "name" for each font you're referencing. You may need to supply a source for the fonts that aren't web standard. My customizations seem to be working. Here's what I have:
"fontFamilies": [
{
"fontFamily": "Montserrat",
"name": "Montserrat",
"slug": "montserrat",
"fontFace": [
{
"fontFamily": "Montserrat",
"fontWeight": "100 200 300 400 500 600 700 800 900",
"fontStyle": "normal",
"src": [ "https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" ]
},
{
"fontFamily": "Montserrat",
"fontWeight": "100 200 300 400 500 600 700 800 900",
"fontStyle": "italic",
"src": [ "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" ]
}
]
},
{
"fontFamily": "Better Together",
"name": "Better Together",
"slug": "better-together",
"fontFace": [
{
"fontFamily": "Better Together",
"src": [
"file:./assets/fonts/BetterTogether/BetterTogether.eot",
"file:./assets/fonts/BetterTogether/BetterTogether.svg",
"file:./assets/fonts/BetterTogether/BetterTogether.ttf",
"file:./assets/fonts/BetterTogether/BetterTogether.woff",
"file:./assets/fonts/BetterTogether/BetterTogether.woff2"
]
}
]
},
{
"fontFamily": "Buttercake",
"name": "Buttercake",
"slug": "buttercake",
"fontFace": [
{
"fontFamily": "Buttercake",
"src": [
"file:./assets/fonts/Buttercake/Buttercake.eot",
"file:./assets/fonts/Buttercake/Buttercake.svg",
"file:./assets/fonts/Buttercake/Buttercake.ttf",
"file:./assets/fonts/Buttercake/Buttercake.woff",
"file:./assets/fonts/Buttercake/Buttercake.woff2"
]
}
]
},
{
"fontFamily": "Winter Calligraphy",
"name": "Winter Calligraphy",
"slug": "winter-calligraphy",
"fontFace": [
{
"fontFamily": "Winter Calligraphy",
"src": [
"file:./assets/fonts/WinterCalligraphy/WinterCalligraphy.eot",
"file:./assets/fonts/WinterCalligraphy/WinterCalligraphy.svg",
"file:./assets/fonts/WinterCalligraphy/WinterCalligraphy.ttf",
"file:./assets/fonts/WinterCalligraphy/WinterCalligraphy.woff",
"file:./assets/fonts/WinterCalligraphy/WinterCalligraphy.woff2"
]
}
]
} ],