There are lots of benefits by hosting font files locally, no need to rely on 3rd party services, more fonts to choose from, full control over caching, fewer server requests, etc.

But the most important reason to serve your fonts locally is that by using 3rd party fonts such as Google Fonts, it’s against the law in Europe cause of GDPR(General Data Protection Regulation). For more details: How Google Fonts Became ‘Illegal’ in Europe

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