Versions Compared

Old Version 3

changes.mady.by.user Jon Zhang

Saved on

compared with

New Version 4

changes.mady.by.user Kristina Kaminski

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  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.

...

WordPress

The 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: https://www.w3schools.com/css/css3_fonts.asp

  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:

    Code Block
    "settings": {
  "typography": {
      "fontFamilies": [
        {
          "fontFamily": "\"Open Sans\", sans-serif",
          "name": "Open Sans",
          "slug": "open-sans",
          "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--open-sans)



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

...