{"title":"How to add fonts","slug":"how-to-add-fonts","url":"https://support.storeconnect.com/articles/how-to-add-fonts","url_markdown":"https://support.storeconnect.com/articles/how-to-add-fonts.md","subtitle":null,"summary":"Add custom fonts to your store using external links (Google Fonts, Typekit) in the Head Content Block, or self-host font files via the media library with @font-face CSS rules.","type":"Help_Documentation","video_url":"","keywords":"add fonts, custom fonts, google fonts, typekit, font upload, self-host fonts, head content block, font-face css, web fonts, typography, otf ttf woff, store design","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"There are a two ways you can add your fonts to StoreConnect.\n\n## Option 1: using external links\n\nThe first option is to paste the external link into the [head content block](adding-custom-javascript-css-and-head-content). 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.\n\n### Optional\n\nWhen 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.\n\nTo get started, replace `external-link-here` with your desired link, and this code will do the trick for you.\n\n\n```\n\n    {% assign font_url = 'external-link-here' %}\n    https://fonts.gstatic.com\" crossorigin\u003e\n```\n\n\nExample after pasting your external link in the code snippet above:\n\n\n```\n\n    {% assign font_url = 'https://fonts.googleapis.com/css2?family=Open+Sans\u0026display=swap' %}\n```\n\n\nOnce that’s done, paste the entire liquid code into the [Adding custom JavaScript, CSS and head content](adding-custom-javascript-css-and-head-content).\n\nDepending 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.\n\nProvide the font family name as follows within the quotation marks:\n\n```\n:root {\n  --sc-font-family: \"Open Sans\";\n}\n```\n\nThen add it at the top of your custom CSS: [Adding custom CSS](adding-custom-css).\n\nThis CSS rule will set the font for the entire site.\n\n## Option 2: upload your font files to your media\n\nThe second option is to upload your font file through the [Upload images, media, and other files](uploading-media).\n\nSelf-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.\n\nAdditionally, 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.\n\n**Supported files:**\n\n-   Open Type Fonts (OTF)\n-   True Type Fonts (TTF)\n-   Web Open Font Format (WOFF)\n-   Embedded OpenType\n-   SVGs\n\nThen reference your font within your CSS rules using the font face rule as follows:\n\n```\n@font-face {\n  font-family: ;\n  src:  [,]*;\n  [font-weight: ];\n  [font-style: ];\n}\n```\n\nThe `font-family` property contains the name value provided by your font source. There’s a full description of [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) rule in MDN web docs so you can get a better understanding of the values allowed on this rule.\n\nHere’s an example of how it will look like:\n\n```\n@font-face {\n  font-family: \"Open Sans\";\n  src: url(\"https://res.cloudinary.com/raw/OpenSans-Regular-webfont.woff2\") format(\"woff2\");\n  font-weight: 600;\n  font-style: normal;\n}\n```\n\nThen refer the font family as follows (take note that you can use it on specific CSS rules too):\n\n```\n  :root {\n    --sc-font-family: \"Open Sans\";\n  }\n```\n\nYou will need to set a @font-face rule for each file uploaded indicating its `font-weight` or `font-style`.\n\nTo set font weight values in @font-face you can compare the values against StoreConnect global values:\n\n```\n  root: {\n    --sc-font-normal: 400;\n    --sc-font-bold: 600;\n  }\n```\n\nThe value for the `src` property comes from the file you have uploaded through the media object.\n\n### Related article\n\n-   [Adding custom CSS](adding-custom-css)\n-   [Upload images, media, and other files](uploading-media)"}