There are a two ways you can add your fonts to StoreConnect.
Option 1: using external links
The first option is to paste the external link into the head content block. This approach will work as long as your font source comes from a provider such as Typekit, Google Fonts, or any other source that offers an external link.
Optional
When using an external Google Font link on your website, it can sometimes cause slower speed performance, which may result in a lower rating for your SEO and reduced site performance. To avoid this issue, we recommend using the following liquid code.
To get started, replace external-link-here with your desired link, and this code will do the trick for you.
{% assign font_url = 'external-link-here' %}
https://fonts.gstatic.com" crossorigin>
Example after pasting your external link in the code snippet above:
{% assign font_url = 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap' %}
Once that’s done, paste the entire liquid code into the head content block.
Depending on the requirements of your project scope, you may use one or more fonts across the entire site, using CSS to set the desired font(s). If you want to set a base custom font, such as Open Sans, as shown in the example above, you can save time by using the following approach.
Provide the font family name as follows within the quotation marks:
:root {
--sc-font-family: "Open Sans";
}
Then add it at the top of your custom CSS: Adding Custom CSS.
This CSS rule will set the font for the entire site.
Option 2: upload your font files to your media
The second option is to upload your font file through the media object.
Self-hosting your own fonts has several benefits. Firstly, it allows you to have complete control over the fonts used on your website. By hosting the fonts yourself, you can ensure that they are always available to your users, regardless of whether the font provider experiences downtime.
Additionally, self-hosting your own fonts enables you to use variations of fonts, such as italic or bold versions. Furthermore, you can take advantage of advanced font options, such as SVG fonts, which allow for more detailed and customizable typography.
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:
@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.