fonts, choice, and constraint

I understand that you want your website to look just right and specify the exact font that matches the style you’ve developed for your business. It’s your brand and you want your website to match. With the rise of various services such as Google Web Fonts and Adobe Typekit, there are many fonts you can add to your site.

There are reasons you may want to do this, but I also want to raise some awareness of why it might not be as important or as great as you think.

As with every business decision, there is a cost to every choice you make, and I don’t mean in real money. Adding a font increases complexity. It is twofold, first it is another part that needs to stay consistent across your site and second it may impact the page loading speed. You need to weigh the trade-offs and make the decision that’s right for you.

Specifying fonts

There are several ways you can add a specific font to your site. You can link to a third-party website and load the font from there, this is the common and preferred method in use today. Depending on the licensing model, sometimes you can load a copy onto your web server, aka self-host. There are benefits and challenges to both solutions: third party sites are often configured in a way that is optimized to best serve your fonts, however using them can create a site speed trade-off. By contrast you have more control if you load it onto your own server, however it’s another bit of code to maintain.

To specify fonts in a website, they are written into a style sheet in this general format:
font-family: 'font', 'fall back font', (sans-)serif;

If the first font isn’t available for the web browser to use, then the next choice is attempted, followed by a generic solution. The second choice is generally what’s referred to as a “web safe font”, these are fonts most likely found on any computer.

What should you do? Limit the number of different fonts you use. It will (likely) improve overall readability, reduce complexity, and could even improve site speed. I suggest a font for headings, and another one for all content.

User’s choice

Before adding and relying completely on custom fonts, please understand that your site visitor may override them for accessibility reasons. There are fonts designed for dyslexia (and coding). Or they may need to view it in a larger font size for vision requirements.

What should you do? I think it’s important to understand that you don’t have full control over how everything is displayed. I suggest testing your site with enlarged fonts and different defaults.

No fonts

There could be an additional issue at play, maybe your site visitor doesn’t see the fonts at all and accesses it through a screen reader. It’s important to make sure lack of a specific font or style doesn’t cause the visitor to misunderstand your site.

What should you do? Write clear content and apply special formatting only when there is no other way to convey meaning. This will also be beneficial to your SEO!

Brief word on images for formatting

One of my pet peeves is an image where text would convey the same meaning. It’s not as common today, but still exists here and there. I understand you may want the special parts of your site, such as your address to display a certain way, however if it’s not possible to easily copy and paste that will be frustrating to your site visitors. Yes, you may also link to a map, however, perhaps I want to copy the address into my calendar or email a friend to meet me at a certain address. If you feel that you must display something as an image, please include the important content in the ALT tag!

Choose a font you love, but think beyond your needs to those of your site visitors. If they can’t easily read your site, they will go elsewhere. I hope this brief discussion of fonts and websites helps you to think about ways you can make informed choices and improve your site for everyone’s experience.

Additional Resources