Description

Not sure where in the documentation it would go; but would benefit from providing direction how to include a 3rd party typeface (one that is not local to a user's device).

I was able to figure how to do it for one that is locally hosted in my theme:

Global Styles reads the value from a @font-face selector in the theme's CSS.

(Example scenario, the font is in the theme's folder fonts)

@font-face {
  font-family: 'CustomNameOfMyFontFamily';
  src: url('path-to-my-font.woff2') format("woff2"), url('path-to-my-font.woff2') format("woff");
}

Then in the theme.json file, use the value from the font-family property in the above CSS as the fontFamily;
custom-slug will be a CSS variable and its name will follow the structure specified in https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#presets

      "fontFamilies": [
        {
          "fontFamily": "CustomNameOfMyFontFamily,sans-serif",
          "slug": "custom-slug",
          "name": "Work Sans"
        }

Semi-related:

I don't know what your direction/preference/best practice are for fonts that are hosted on CDNs besides google and where to document this;

For Google, I found https://github.com/Automattic/themes/blob/1aa5058bcff44951877c2db4f461fd4a46433613/blockbase/functions.php#L75

That is then read in a blockbase child theme https://github.com/Automattic/themes/blob/1aa5058bcff44951877c2db4f461fd4a46433613/quadrat/theme.json#L390

This isn't explicitly documented anywhere.

Step-by-step reproduction instructions

n/a

Screenshots, screen recording, code snippet

No response

Environment info

all

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes