Make your site awesome with web fonts

Web fonts have been around for some time now, giving web designers free reign to stylise their sites with custom fonts. But the rise of the web font hasn’t been a smooth journey, to say the least.

As a creative designer, using custom fonts in a design is a great way of making text-heavy content more interesting. Designers have used typography in print for a number of years and have even created a whole movement using typography alone. Designers were able to use any fonts that were available to them, since the end result would be a printed document; usually a brochure or poster, or a book. Use of custom fonts on the web has not been so easy…

Core web fonts

In the 1990’s web fonts were restricted to a narrow selection of screen fonts introduced by Microsoft called ‘Core Fonts for the Web’. This package of core fonts included Arial, Times New Roman, Verdana and Trebuchet MS among others. The aim was to provide legible screen-based fonts that could be used on both Windows and Mac operating systems. The fonts were pre-installed on each operating system so that if a web page used one of them, the page would render in the way that the designer had intended – with the correct font. While this was a good move, it lacked the creativity that designers wanted; the fonts were regarded as ‘boring’.

The solution back then was to fire up Photoshop and create images of any part of your site where you wanted to use custom fonts. The images were then placed into the pages. While visually this looked effective, it also caused problems – some people deliberately disabled images in their browser which meant that the custom font content was missing completely. added to this, any search engine crawling the page was unable to read the text content in the images. Not a great solution.

sIFR – Flash based text replacement

Designers began looking for better solutions. One came along in 2005 called sIFR (or Scalable Inman Flash Replacement). sIFR was an open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents. sIFR allowed text classes to be targeted and changed into Flash based elements such as headings, sub-headings and even body text. The great thing about sIFR was that the text remained ‘readable’, the big downside was that it used Flash to render text, and if Flash was not available, the text would revert to it’s web safe format (which looked pretty messy in some cases).

@font-face adoption

A real change came in late 2009 when the CSS3 specification gave the vast majority of browsers the capability of rendering remote fonts using the @font-face feature. Font files would be downloaded from a remote server and then used in the pages of a site, allowing much greater support and compatibility across all operating systems and browser applications.

Google Fonts

In more recent years, Google Fonts has been adopted as the go-to engine for custom web fonts. The Google Fonts engine has over 680 font families and provides web fonts to millions of sites across multiple CMS platforms.

To illustrate the popularity and widespread adoption of Google Fonts, the graph above shows comparative search queries from 2005 to the present day for two search phrases: ‘web fonts’ and ‘google fonts’. It’s clear to see that although the phrase ‘web fonts’ has been talked and written about for a number of years, ‘google fonts’ by comparison only really began to get a lot of search queries in mid 2010, but since then it has gone stratospheric. Google Fonts is a great solution for developers, since it reduces the number of server calls, added to the fact that when Google Fonts are served, they are extremely fast.

Icon Fonts and CSS Toolkits

Custom font usage is now widespread, leveraging new dimensions with CSS and icons. Icons are being used more and more in sites, apps and other web-based software implementations. With the power of CSS, icons can be used in a variety of ways and remain scalable and customisable. The icon kit simply works in a bootstrap design allowing the designer to access thousands of icons and styles, simply by using a CSS class call. Fontawesome is perhaps the most well known provider of icon fonts.

If you are interested in using custom icons and fonts in your site, please get in touch with us to discuss your requirements.

Owner and creative director at Creative Freedom Ltd. Unbelievably cool icon design expert, husband, and father of two awesome girls. A proper decent chappy and thoroughly fab to work with. Ok, so I wrote my own bio…