Use @font-face fonts

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Get your font

If you host your font files with Shopify, be absolutely certain that you have the rights to use your font on the web using @font-face. Shopify cares about intellectual property. Read our Terms of Service. The relevant part of those terms is in the General Conditions section:

Note

We may, but have no obligation to, remove Content and Accounts containing Content that we determine in our sole discretion are unlawful, offensive, threatening, libelous, defamatory, pornographic, obscene or otherwise objectionable or violates any party’s intellectual property or these Terms of Service.

A 100% safe alternative to hosting your font is to sign up for a Typekit account. A free account will allow you to use up to two fonts in one shop. You can also use Google's Font Directory

If you don't want to use Typekit, nor Google, Shopify strongly recommends that you pick a font available on Font Squirrel. From their website:

We know how hard it is to find quality freeware that is licensed for commercial work. We've done the hard work, hand-selecting these typefaces and presenting them in an easy-to-use format.

Generate your font kit

Head over to the free excellent @font-face kit generator.

Font face generator

The Generator will generate many files for you.

For example, if you use the Aller font:

Aller font

You may want to use all those styles — or only some of them:

Aller font 2

For each style you add to the generator, you will end up with 4 font files with extensions:

  • .woff
  • .ttf
  • .svg
  • .eot

You will also have 1 stylesheet and a demo.html file.

Notes:

  1. You also have ready-made kits available on this page: http://www.fontsquirrel.com/fontface

  2. The @font-face kit generator uses a CSS font-face syntax that was popularized by Paul Irish in his Bulletproof Font-Face post.

  3. Unzip your kit.

Add the fonts and stylesheet to your theme assets

To upload your font files, do the following: download your theme from the Edit HTML/CSS page, move the font files over to the assets folder of the unzipped theme (do NOT add a sub-folder to contain those), re-zip your theme and re-upload it.

In your Theme Assets, rename the stylesheet.css file to fontname.css or font.css, and link in that stylesheet in your theme.liquid file. Add this code to the head element of theme.liquid:

{{ "font.css"  | asset_url | stylesheet_tag }}

OR

{{ "fontname.css"  | asset_url | stylesheet_tag }}

Use your font in your CSS font-family property

The demo.html file that came with your kit contains examples of how to use your font in your CSS.

It provides handy class definitions that you can copy over to your theme stylesheet. You would also need to edit your HTML, though, to use those classes. For example, you could edit your theme.liquid layout to apply Aller to your site name like so:

<h2 class="Aller"><a href="/">{{ shop.name | escape }}</a></h2>

You can also style your text by selecting which type of text you want to use your font for. Example in your theme's stylesheet:

h1, h2, h3, h4, h5 {
    font-weight: normal;
    font-style: normal;
    line-height: normal;
    font-family: 'AllerRegular', sans-serif;
    font-size-adjust: 0.52;
}

From above: copy the definition of the appropriate class from your demo.html file into the curly brackets of your CSS rule.

Differences in operating systems

If your Windows machine is running a version of Windows older than Windows 7, you'll need to use ClearType. Otherwise the rendering of the font may be slightly jagged. As a general rule, the more curvy the font, and the larger it is, the worse it will look in Windows — if it does not look good to begin with. This is generally true regardless of the browser you use to view your web page with a Windows operating system, and yes, even in Vista.

Demo shop

This shop uses the Museo Slab font: http://zboncak-llc3903.myshopify.com

Font face demo