...
Download your font files and place them under
your-project/themes/custom/simplytheme/src/fonts/fonts-name
Preferably TTF/OTF, WOFF, WOFF2 formats for better browser compatibility. SVG and EOT font files are not supported by most browsers. To know more details about the font formats: https://www.w3schools.com/css/css3_fonts.asp
In your font files, there will be a css file generated by the font that have font-face setting, in there you can setup the font-weight range, font-family name, etc. There’s one thing needs to be noticed, if the text jumps while loading the custom font, add property font-display: fallback would normally fix the issue. For more details, please check out this article https://web.dev/optimize-webfont-loading/ .
Include the css file in your-project/themes/custom/simplytheme/simplytheme.libraries.yml under fonts: css: theme: like this src/fonts/your-fonts-name/font.css
If it’s a variable font, please check this doc for more details: Variable Fonts
From there you can setup font family and all the other properties in
your-project/themes/custom/simplytheme/src/sass/settings/typography.scss
Based on design.
WordPress
...
| Excerpt |
|---|
|
Webfonts API method with theme.json:Download your font files and place them under wp-content/themes/theme-name/src/fonts/fonts-name
Preferably TTF/OTF, WOFF, WOFF2 formats for better browser compatibility. SVG and EOT font files are not supported by most browsers. To know more details about the font formats: https://www.w3schools.com/css/css3_fonts.asp In the theme.json file, add your font settings. The fonts should be registered under settings.typography.fontFamily. The fontFace setting represents the @font-face CSS rule, where you can set up the font-family, font-weight, src path, etc. Example: | Code Block |
|---|
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "\"Open Sans\", sans-serif",
"name": "Open Sans",
"slug": " |
|
...
primary",
"fontFace": [
{
"fontFamily": "Open Sans",
"fontWeight": "400",
"fontStyle": "normal",
"src": [ file:./src/fonts/OpenSans/OpenSans.ttf" ]
}
]
}
]
}
} |
You can then use this font family as a variable by referencing the slug you inputted. In the above example, the variable would be: var(--wp--preset--font-family--
|
...
primary).
In KalaPress, we use slugs like "primary" and "secondary" for our fonts to avoid the hassle of tweaking variables for each new project throughout the theme.
For more information: https://fullsiteediting.com/lessons/theme-json-typography-options/#using-the-web-fonts-api-with-theme-json
|
Congrats! Now you have your fonts set up locally. 🎉
...