Using Non-Standard Fonts in Web Development

If you've ever actually sat down and created your own website you will be more than aware of the font limitations of current technology. The main problem is that any users who don't actually have the font installed on their computer will see the default font (i.e. Times New Roman or similar) and not the beautiful site that you've created. Whilst designers for print get the freedom to create as they see fit, us web designers are left sitting with an insanely restricted font set.

The most common solution for this is by turning certain design elements into images i.e. your headers and logo etc. This works well enough that it is considered common practise, however when you create a whole page this way the text no longer becomes accessible in a few crucial ways.

A page completely consisting of text as images:

  • Will lose SEO value (Lower or Non-Existent in Search Engines)
  • Will be inaccesible to those with eyesight problems who increase fonts or use screen readers.
  • Will take a longer time to load than text based pages

So What Can You Do?

Option One – Images & Standard Fonts

The first, which happens to be recommended and most common, is to use the fancy fonts only in headers etc and complete the rest with a web safe font. The fonts that come with the Thesis Theme are generally considered web-safe.

Option Two – Web Font Replacement

The second option is a little more involved. It often requires the use of flash and javascript which may slow your sites loading time somewhat. The end result however is that you can retain the fonts that you had originally intended and they will still be accessible by search engines and screen readers. This is usually a more time/resource-intensive task and therefore will demand a higher investment whether that be your own time or that of your designer.

Possible Font Replacement Solutions

So there you have it, there are ways of adding non-standard fonts within your web design. Whilst neither may be the perfect solution it is definitely a workable solution whilst the finer details of this area are worked out between the font and browser developers. With some luck we will be able to use fonts more with less restrictions in the near future..

Props to @ericnicolaas for his recommending the @font-face method whilst researching this post

1 thought on “Using Non-Standard Fonts in Web Development”

  1. I never really gave fonts that much consideration, but I guess it makes sense! Great post, thank you

Comments are closed.

Scroll to Top