Engage and delight people who visit your website by incorporating web fonts into the design. The selection and application of unique fonts will add to a companies personality and the overall brand appeal. We previously looked at the anatomy of a typeface to better understand the composition of the characters. Now, let us explore how we can bring these amazing fonts into a website and the benefits they provide.
A Brief History of Web Fonts
In the early days of the web, designers were limited to a small selection of default fonts for websites. These fonts included Arial, Georgia, Times New Roman and Veranda to name a few. Not a very interesting group of typefaces but they got the job done.
Developers devised many workarounds to liven up the font selection for websites. Many of the implementations incorporated the use of images or Macromedia Flash (now Adobe Flash) for headlines and body text. Though these solutions cosmetically achieved the desired results, they had adverse effects on the websites SEO (Search Engine Optimization) and accessibility.
CSS3 to the Rescue
In the mid-2000’s, the working draft for CSS3 (Cascading Style Sheets) which incorporated the @font-face rule for using custom fonts was introduced. This new rule made it possible for developers to load a WOFF (Web Open Font Format) file from the style sheet and apply it to the text formatting. A big benefit to this font file format is the embedded metadata and compression which help it to load faster than other fonts.
Here is an example of the CSS code of including a custom font.
@font-face {
font-family: 'WebFont';
src: url('webfont.woff');
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
body {
font-family: 'WebFont', Arial, sans-serif;
}
Font Hinting
Included in the font’s metadata is mathematical instructions on how to adjust the outline of a font according to the screens pixel resolution and font size, also known as font hinting. This improves the legibility of custom fonts on low resolution screens.
Font Foundries and Services
Many font foundries like Adobe, FontFont, Positype, along with countless others, have partnered with online font services to provide easy javascript implementations to integrate custom fonts into websites. Notable font service providers include:
Implementing a unique set of fonts on the web is now easier than ever, thanks to font foundries and online font services. Try implementing one or two unique fonts on your website to help distinguish your company from competitors.