How to add fonts

There are two ways to add fonts to your store. Link to a hosted font when your provider offers an external link, which is the quicker option. Self-host the font files when you need guaranteed availability, font variations such as italic and bold, or advanced formats.

Option 1: link to a hosted font

Paste the external link into your head content block. This works with any provider that offers an external link, such as Google Fonts or Typekit.

Preconnect to speed up an external font

An external Google Font link can slow the page down, which lowers your performance and SEO scores. Preconnecting to the font host avoids most of that cost. Replace external-link-here with your own link:

```liquid

{% assign font_url = ‘external-link-here’ %}

```

With a real link in place, the first line looks like this:

```liquid

{% assign font_url = ‘https://fonts.googleapis.com/css2?family=Open+Sans&display=swap’ %} ```

Paste the whole snippet into your head content block, as described in adding custom JavaScript, CSS, and head content.

Set the font for the whole site

To apply a font site-wide, set the --sc-font-family variable rather than targeting individual elements. Give the font family name in quotation marks:

:root { --sc-font-family: "Open Sans"; }

Add this at the top of your custom CSS, as described in adding custom CSS. Every page then renders in that font.

Option 2: self-host your font files

Upload the font file to your media library, as described in uploading media.

Self-hosting gives you complete control over the fonts on your site. The fonts stay available even if the font provider has an outage, you can use variations such as italic and bold, and you can use advanced formats such as SVG fonts.

Supported files:

• Open Type Fonts (OTF)
• True Type Fonts (TTF)
• Web Open Font Format (WOFF)
• Embedded OpenType
• SVGs

Then reference your font within your CSS rules using the font face rule as follows:

```css

@font-face { font-family: ; src: [,]*; [font-weight: ]; [font-style: ]; } ```

The font-family property contains the name value provided by your font source. There’s a full description of @font-face rule in MDN web docs so you can get a better understanding of the values allowed on this rule.

Here’s an example of how it will look like:

@font-face { font-family: "Open Sans"; src: url("https://res.cloudinary.com/raw/OpenSans-Regular-webfont.woff2") format("woff2"); font-weight: 600; font-style: normal; }

Then refer the font family as follows (take note that you can use it on specific CSS rules too):

:root { --sc-font-family: "Open Sans"; }

You will need to set a @font-face rule for each file uploaded indicating its font-weight or font-style.

To set font weight values in @font-face you can compare the values against StoreConnect global values:

root: { --sc-font-normal: 400; --sc-font-bold: 600; }

The value for the src property comes from the file you have uploaded through the media object.