Open Source/Free Fonts

First, google the name of your font and @font-face to look for a CDN hosted version of your font. Not all fonts will have a CDN version, but most free/google fonts you will be able to find.

I am going to use the Outfit font as an example.

I found Outfit on: https://fontsource.org/fonts/outfit/cdn

Copy and paste the @font-face declaration into the CSS field on the CMS extension.

Here is an example of that:

/* outfit-latin-wght-normal */
@font-face {
  font-family: 'Outfit Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/outfit:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

Now that you have found the @font-face hosted somewhere, we need to pay attention to the inside and extract the actual font name, in this case, “Outfit Variable”. This goes in the Name field on the CMS extension.

And a good practice is to set web safe fallback fonts like so:

“Outfit Variable”, Helvetica, Arial, sans-serif

So the site will try to use “Outfit Variable” first, then Helvetica, then Arial, then any sans-serif font if none of the previous are available.

At the minimum it would be good to set it like so: “Outfit Variable”, sans-serif

Adobe Fonts

To use adobe fonts, you will need to login https://fonts.adobe.com/, find your font, then create a web-project with your necessary fonts. Here is Adobe's article on how to do that.

Once you have a web project created, you will want to make sure the project is closed and you are looking at the list of web projects. You will see a view similar to this:

Click the @import link that is highlighted above and then copy the @import statement that is inside the style tag:

  @import url("https://use.typekit.net/cmt0vvu.css");

This gets pasted into the CSS field in the CMS extension.

You will then need to click Edit Project and look for the font-family name.

And then you will use: miller-banner, serif to paste into the font name field in the CMS extension.