Set fonts locally

Owned by Jon Zhang
Last updated: Apr 19, 2024 by Kristina Ung
2 min read

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: https://kalamuna.atlassian.net/wiki/spaces/KALA/pages/2646507536

  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.

WordPress

Webfonts API method with theme.json:

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

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

    "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" ] } ] } ] } }

     

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



Congrats! Now you have your fonts set up locally.