Use @font-face fonts
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:
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.
The Generator will generate many files for you.
For example, if you use the Aller font:
You may want to use all those styles — or only some of them:
For each style you add to the generator, you will end up with 4 font files with extensions:
You will also have 1 stylesheet and a demo.html file.
You also have ready-made kits available on this page: http://www.fontsquirrel.com/fontface
The @font-face kit generator uses a CSS font-face syntax that was popularized by Paul Irish in his Bulletproof Font-Face post.
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), copy the stylesheet to the assets folder, re-zip your theme and re-upload it.
Rename your stylesheet and link it in theme.liquid
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:
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:
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:
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.