Hosting Custom Fonts with Shopify

This article helps you add a custom font to Shopify to match your branding.

• Get your font
• Host your font source file
• Prepare your font-face file
• Send your request to Tech Support

Get your font

Find a free font or purchase a font from your provider of choice.  Make sure that you get a font source file, and a font-face file.  If you cannot find a font-face file we will build one (see Prepare your font-face file).

• For examples see: Adding a Custom Font to the Email Builder.

Important: Some font providers require use of their hosted font source.  Check your license details to ensure you are not violating your contract.

Host your font source file

1. In your Shopify store, go to the Settings menu.
   
   
   
   
2. Select Files.
   
   
   
   
3. Click the Upload files button on the top right.
   
   
   
   
4. Upload your font source.
   
   
   
   
5. Your webfont source file now appears in your files list.
   
   
   
   

Prepeare you font-face file

If you did not receive a font-face file from your font provider you will need to create the file yourself.  The steps below will allow you to create a basic font-face file.

1. Open your preferred text editing program. The team at ReSci likes Sublime Text 3.
2. Copy and paste the text below into your editor.
   
   

   /* FONTNAME */
   @font-face {
     font-family: 'fontfamily';
     font-style: normal;
     font-weight: 400;
     src: url(https://THISISYOURFILE.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
   }

   
   
   
   
3. Copy your font information into your font-face file. Our example font is "example_font" so that's what we will use for the font-family and font name
   
   
   
   
4. Add your font source URL to the font-face file, and match the format to your file extension.
   
   
   
   
   
   
   
5. Save your font-face file as a .css.
   
   
   
   
6. Upload your font-face file to Shopify.
   
   
   
   
   
   

Send your request to Tech Support

1. Open the Retention Science Support dashboard.
2. Copy this text into the form:
   

   Hello Tech Support!
   
   I would like to add a custom font to our email builder.
   
   The Font Name is 
   The Font Family is 
   The Font-Face file is hosted at
   
   Thanks!
   
   Valued Client

3. Copy your Font-Face location
   
   
   
   
4. Put your font information into the form
   
   
   
   
5. Send your request to tech support!