How to add fonts to Shopify

Adding fonts to your Shopify theme is straightforward, but knowledge of CSS and HTML is useful. However, if you carefully follow these steps, your new font should be uploaded in minutes. You will first upload the font onto the Assets folder of your theme and then will install the new font to your theme. Here’s how:

1. Download the Webfont version of your font. The font files must include at least the WOFF and WOFF2 file types (TTF or OTF are not Webfont file types).
2. From your Shopify dashboard, navigate to Online Store > Actions > Edit Code.
3. Scroll down to the Assets folder and click Add a New Asset. Select your font file, and click Upload Asset.
4. Next, you will install the new font to your theme. Go to your theme's main CSS file, which you’ll find in the Assets folder of your theme - navigate to the bottom of this file to add the new code to your theme.
5. Add this code: @font-face {
   font-family: "Font name";src: url({{ "Filename" | asset_url }}) format("Format"); }
6. Replace the Font name with the name of the font you have chosen. If the name is made up of more than one word, it will need quotation marks.
7. Next, replace the File name with the file you just uploaded, including the extension code. For example verdana_bold.ttf.
8. Lastly, replace the Format with that of your font. For example, Athena.ttf would be "TrueType".
   
   

How to add custom fonts to Shopify

If you want to make your font unique and eye-catching, a custom font is a great option. This requires a bit of extra effort but is worth the time spent. Follow these steps to upload a custom font:

1. As in the tutorial above, Download the Website font version of your font.
2. From your Shopify Admin naviage to Online Store > Themes > and then Actions > Edit Code. In the sidebar choose Assets > theme.scss.liquid. Scroll to the bottom of the file and paste this code:
   @font-face {font-family: {"NAME OF FONT";
   src: url("NAME-OF-FONT-FILE.woff2") format("woff2"),
   url("NAME-OF-FONT-FILE.woff") format("woff");}
3. As with the above uploading steps, replace the details with your custom font details. Below this code, paste the following code:
   <p><span style="font-weight: 400;">yourcssselectorhere { font-family: "NAME OF FONT"!important; }</span></p> 
4. Lastly, go to the Assets folder on your Shopify dashboard and click Add a new asset. Upload each version of the font file one by one.
   
   

How to change fonts on Shopify

If you are happy with the fonts available on Shopify, changing fonts is a lot easier. Since Shopify offers a broad range of attractive fonts, this can be a great option for those who do not already have a brand image. Here is how to change fonts in Shopify:

1. From your Shopify admin, go to Online Store > Themes.
2. Next to Supply, click Customize and then Theme settings > Typography.
3. For each type of text, click Change to use the font picker. This allows you to use multiple fonts.
4. If you haven’t chosen a font yet, explore your options in the search field, or by clicking Load more.
5. Click the name of the font that you want to use. If you want to change the font to a different style, click the name of the current font style, and then select a new font style from the drop-down menu.
6. Click Select and then Save. If you want to ensure that it worked, click Preview. 

You should now see your fonts and typography as you want them to appear. If you are not satisfied, play around a bit to try out different options, sizes, colors, and placement