Page Comparison

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-sansprimary", "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)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