How To Upload A Font To The Assets Folder Of Shopify

Adding fonts to your Shopify theme

Larn how to add fonts to your current Shopify theme

Written by Karl Jones
Updated over a week ago

This is an advanced tutorial and is non supported by Shogun. Noesis of HTML and CSS is required.

Uploading your font
Installing your font in your theme
Calculation your font to Shogun

Characteristic Introduction

Adding custom fonts to your Shopify theme tin be a great method of creating a unique look and experience for your site. In this tutorial, we will be going through the steps on how to add a Shopify font to your theme, and then onto adding it into Shogun for use with your Shogun pages.

Start building your store with Page Builder

Bank check out our weblog article on editing and customizing fonts on Shopify: The Guide to Shopify Fonts: How to Edit & Customize Fonts on Shopify

Uploading your font

To go started, y'all will beginning need to upload the font into the Avails folder of your theme.

To get to the Assets folder of your theme, navigate to your Shopify dashboard. From hither, go to: Online Shop > Actions > Edit Code
Coil down till you notice the Assets folder and click add a new asset, select your font file and hit upload asset.

Installing your font in your theme

Next up: telling your theme that it tin utilize the font file that you have uploaded.

Become to your theme's main CSS file (unremarkably named styles.scss.liquid, theme.scss.liquid, or some other variation of this). This file can be found in the Assets folder of your theme - navigate to the bottom of this file to add new code into your theme.
Add together the code beneath, replacing highlighted elements of the code with bodily data.
Font name > the proper noun of the font, if the font has more than one word in it'south proper noun information technology will demand "quotation marks" - these will also exist needed when inserting into Shogun.
Filename > the name of the file that was simply uploaded to your theme including the file extension, for example, cosmic_sans_bold.ttf.
Format > the format of the font that was uploaded, for example, for Athena.ttf this would be "TrueType".

              @font-face up {
                font-family: "Font proper name";
                src: url({{ "Filename" | asset_url }}) format("Format");
}

Available font formats: "woff", "woff2", "truetype", "opentype", "embedded-opentype" and "svg".

Calculation your font to Shogun

In one case your font has been added to your theme, you tin can take the Font-Name that we added to a higher place and add it into your settings that can be found on your Shogun dashboard. More than information can be found in the article below.

Source: https://getshogun.com/help/en/articles/4437764-adding-fonts-to-your-shopify-theme

Posted by: dominguezhousight.blogspot.com