Step 1: Compile Your Font Files

To ensure that your font is correctly displayed regardless of which browser your customers are using, we recommend uploading your custom font in all four of the following files types:

• .eot

• .woff

• .ttf

• .svg

Step 2: Locate Your Code Editor

1. Within your Shopify admin, go to Online Store > Themes.

2. Go to the theme you are working with.

3. Click Actions, and select Edit code from the drop-down menu.

Step 3: Add the Font Files as Assets

Once you have opened your code editor, you can then upload your font as a new asset.

1. Within your theme code editor, open Assets.

2. Select Add a new asset.

3. Click Choose file, and select a font file to upload.

4. Select Upload asset.

Step 4: Reference the Files in Your Stylesheet

The title of your theme's stylesheet varies based on which version of the theme you have - it exists within your Assets folder, and will be named one of the following options:

• timber.scss.liquid

• theme.scss.liquid

• custom.css

1. Under Assets, locate your stylesheet.

2. Find an empty line and add the code snippet below.

3. Replace the "Font" label with your font title.

4. Replace the placeholder font files with the names of your font files.

@font-face {   
	font-family: "Font";   
	src: url('{{ "font.eot" | asset_url }}');   
	src: url('{{ "font.eot" | asset_url }} ?#iefix') format("embedded-opentype"),
	url('{{ "font.woff" | asset_url }}') format("woff"),        
	url('{{ "font.ttf" | asset_url }}') format("truetype"),        
	url('{{ "font.svg" | asset_url }} #myfont') format("svg"); 
}

Step 5: Integrate the Font into Your Storefront

Now that your font files have been uploaded and referenced within your theme's stylesheet, you can implement this font into your theme's code as you wish.

Still need help?