How To Use Custom Fonts

What Are Web Fonts?

Many site designs rely on the same handful of fonts for their design. This is because when using a font, the browser must be able to have access to that font file on the user's computer. With web fonts, you can specify a specific file on your server instead of looking for it on the user's computer. This is helpful when you want to use a a font that most users will not have installed. One thing to consider, however, is that it will increase your page size by the size of the font file.

The CSS

@font-face {
    font-family: 'DesyrelRegular'; 
    src: url('/Shared/Themes/MinimalistWhite/fonts/desyrel-webfont.eot'); 
    src: url('/Shared/Themes/MinimalistWhite/fonts/desyrel-webfont.eot?#iefix') format('embedded-opentype'),  
         url('/Shared/Themes/MinimalistWhite/fonts/desyrel-webfont.woff') format('woff'), 
         url('/Shared/Themes/MinimalistWhite/fonts/desyrel-webfont.ttf') format('truetype'), 
         url('/Shared/Themes/MinimalistWhite/fonts/desyrel-webfont.svg#DesyrelRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

Above is an example taken from the standard Minimalist White theme. In it, we include a handful of formats as different browsers require different formats. Notice that the src property has been defined twice. The first one does not contain format and the second includes ?#iefix appended to url. This is to allow older versions of Internet Explorer to load the correct font. For more technical information on why this is needed, please view this post on Paul Irish's blog. For simplicity, just be sure to include your .eot version twice and in the manner shown above in the sample.

You will need to upload these font files to your server to be used. If you are using them on multiple stores, they need to be included in your /Shared directory. You can create a fonts folder inside your theme as we have done to keep things simple.