Adding a custom Web Font to your theme

Web Fonts allow you to add your own custom font to a theme, with the fonts being downloaded to your customers' browsers when they visit your store. This means that you are no longer limited to the set of common fonts that are distributed with the operating system and browser.

Installing the Web Font

You will need to source your web font, either by purchasing it from a font vendor, or by downloading one from a repository of free fonts.

In order to achieve support for your font across a wide range of browsers, you will need to provide your font in four different formats.

The formats required are:

• .eot - Embedded OpenType
• .ttf - True Type Font
• .woff - Web Open Font Format
• .svg - Scalable Vector Graphics

If you have only a .ttf font file, then you may be able to use the Font Squirrel Font Face Generator service to generate the other file formats for you. You can find the generator at the Font Squirrel web site.

Once you have your four font files, upload them to your theme. Go to your "Design & Assets -> Theme editor" page, scroll down to the "Upload a new Theme file", and upload your four web font files.

Using your Web Font

Once you have uploaded your web font files, you will need to create or modify a CSS file to start using your new custom font.

In this example, we will be creating a new CSS file for a font called myfont. Firstly, create a file named myfont.css.liquid using your favourite editor on your computer. You can also create this file directly using the WebDAV feature.

This CSS file will contain the @font-face declarations for the web font, plus any additional styles that will be using the font. You need to add the .liquid suffix as the file will contain Liquid tags to reference the font files that you've already uploaded.

Here is an example of the declarations that you will need to add to this CSS file.

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

h1, h2, h3, h4 {
  font-family: 'MyFont';
}

In the above example, just replace myfont with the name of your own font.

Now, upload or save the file as a theme asset in the same way that you uploaded your font files.

If you have created a new CSS file for your font, then just include it as part of your Theme.liquid file and you should now see your brand new fonts appearing as part of your theme.