Create a Custom Self-hosted Webfont

Posted by Zak under Design, General, Projects

A few years ago it looked like self-hosted fonts were going to take the web by storm. By simply linking to a typeface in our CSS, we could use any typeface imaginable. But due to licencing issues with commercial typefaces, the focus has now shifted to font hosting providers like Typekit, Fontdeck and more recently Google Webfonts.

The great thing about these font providers are they ensure web designers are using quality fonts with full browser compatibility. Implementation is damn easy and they’re really useful if you want to change the appearance of body copy to a more specialized font.

Most designers would ask why bother self-hosting any fonts when you have huge repositories of beautiful typefaces available for a small subscription or in some cases free.

This being the case, I thought I’d experiment developing and hosting my own custom eCommerce icon font set.

A bit of a background on Shopper Std

As the font’s website describes, Shopper Std is a hosted font substitute for eCommerce icons. The beauty of hosting the icons as a font rather than storing them as images means we can style each icon like text.

Laying out each letter was really simple. Using High Logic’s FontCreator, I imported each monochromatic bitmap symbol from my Photoshop document and individually resized them to fit the provided guides and grid system. The program allows you to render your typefaces on the fly meaning you save directly as a TrueType Font and reopen it later to make edits. At a tiny 9kb, designing custom fonts in this program is quick, easy and is perfect for amateur typographers like myself at only $79.

I designed the font to use many of the common icons you’ll see in online shops including a trolley, auction gavel and credit cards.

The beauty of the font is we can resize letters to any size, recolour them, add a shadow and even a gradient without touching Photoshop. Also feel free to use the icons as many times as you like on a page; drawing from a typeface reduces browser requests which means your website will fly.

Will @font-face work in all browsers?

Most designers unfamiliar with self-hosted fonts think there isn’t widespread support in browsers. All browsers except Internet Explorer render TrueType Fonts (.TTF) but all including IE can show Embedded OpenType (.EOT) fonts. I simply converted the TrueType format to Embedded OpenType and now we have IE support. Here’s the CSS I used to link the font to my website.

@font-face  {
font-family: 'Shopper';
src: url('font/Shopper-Std.eot');
}

@font-face {
font-family: 'Shopper';
src: url('font/Shopper-Std.ttf') format('opentype');
}

The first call targets all browsers including Internet Explorer. The second @font-face declaration overrides the original call, but it only targets modern browsers (Firefox, Safari, Chrome and Opera) by using the OpenType format attribute.

Conclusion

Self-hosted custom webfonts can be useful for adding minor styling to your website but I’d personally shy away from using it for major headings and body text.

For more information on the font itself or to implement it on your website, visit http://www.shopperfont.com/.