The problem with custom fonts

When it comes to designing a brand one of the key considerations is typography. Many designers will use custom fonts, or at least fonts that are sourced from a Font seller that are more unusual and therefore more likely to be unique. The reason for this is that it allows you to stand out and really bring more of your character to your brand. And this is all well and good for an offline product, such as a flyer or brochure, because the fonts are rendered into the final file which is then produced as a PDF or printed item. But how does this work on your website? Well often the answer is it doesn’t!

So what is the challenge with custom fonts on a website?

For an offline product, such as a PDF, your custom font is rendered into an image-like object and then is set in stone when it is exported to create your final file. Therefore the only person who actually requires that font file on their computer is the person who does the design for you. Anyone can view it normally as it is rendered into that final file.

But with a website things are a bit different. Because a website is a collection of code and assets, the browser you use needs to be able to read that code and understand it and then render it in real time. This means that your custom font needs to be something that your browser understands and unfortunately there are only a few fonts that are actually universal to all browsers. If you have a font that isn’t part of this universal list then the browser won’t know what it is and it will have to guess instead. This often means that you get an ugly font instead which doesn’t look very good at all.

Is there a way around this?

It is possible to render your custom fonts on your website. You can do this by giving the actual font file as part of the code and assets that your website is made from. This gives the browser the actual font and then it can use this to render the site properly. Sounds good right? Unfortunately it isn’t that simple, because every browser (and version of browser) works slightly differently and so in order to cover all browsers you need to provide a number of different file types (WOFF, WOFF2, OTF, etc.). So often providing these files types doesn’t solve the problem and you still end up with certain browsers still not looking very good.

So what is the best approach?

Google have solved this problem by creating Google Fonts. This is a free online library of hundreds of different fonts. As it is an online repository we can just put a single line of code into your website and then all browsers will be able to use that font. And also, just for your designers, you can download the fonts and use them in your offline designs as well.

We would always recommend that if you want to use a custom font then use one from Google Fonts. Or, if you want a really funky brand, make sure that your ‘web brand guidelines’ have alternative fonts from Google’s library instead. This way you don’t risk having your lovely website looking a bit naff on some browsers.