...

Now, let’s talk about how to setup local fonts properly.

Drupal

1. 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
   

2. 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/ .
   
   

3. 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
   

4. If it’s a variable font, please check this doc for more details: Variable Fonts
   

5. 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.
   

WorldPress

Congrats! Now you have your fonts set up locally. 🎉

...