Option 1: Web-based fonts

If you use Fonts hosted on Google Fonts or similar platforms you can use these fonts by updating the following files:

document_head.hbs

Insert the following code at the end of the file (or whatever code your font provider offers)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque&family=Montserrat&display=swap" rel="stylesheet">

style.css

Find the following lines of code:

--text-font-family: $text_font_family;
--heading-font-family: $heading_font_family;

Replace the variables $text_font_family and $heading_font_family with the names of your fonts.

E.g.

--text-font-family: 'Montserrat', sans-serif;
--heading-font-family: 'Bricolage Grotesque', sans-serif;

Save and publish your theme.

Option 2: Font Files

If your font provider offers font files in woff, tff or similar format you can upload them to your theme as Assets

Assets

If you select an uploaded asset, you can copy its file name/path:

style.css

Next up, insert the following code block at the top of your style.css file, make sure to replace the src url with those of your uploaded assets. You can reference the exact format of your font face by reading the documentation of the font you chose.

@font-face {
  font-family: 'Avenir Next';
  src: url({{asset "AvenirNextCyr-Bold.eot"}});
  src: url({{asset "AvenirNextCyr-Bold.eot"}}) format('embedded-opentype'),
  url({{asset "AvenirNextCyr-Bold.woff"}}) format('woff'),
  url({{asset "AvenirNextCyr-Bold.ttf"}}) format('truetype');
  font-weight: normal;
  font-style: normal;
}

Find the following lines of code:

--text-font-family: $text_font_family;
--heading-font-family: $heading_font_family;

Replace the variables $text_font_family and $heading_font_family with the names of your fonts.

E.g.

--text-font-family: 'Avenir Next', sans-serif;
--heading-font-family: 'Avenir Next', sans-serif;

Save and publish your theme.