The Fresh Egg blog
Latest digital marketing news
Part two of the design team’s favourite tools and technologies turns the spotlight on fonts, and the various ways they can be implemented in a website.
Fonts are the different styles of typeface used by a computer to display text. Many of the well-known fonts, such as Arial and Verdana, come already installed with your computer’s operating system. However, there are many available fonts which web developers like to use on their sites which don’t come pre-installed. These are known as non-standard fonts.
What if you are looking at a website that is meant to display text in a font that you don’t have installed on your computer? If the developer of the site hasn’t taken this into account when building it, then your computer will choose a ‘default’ font (usually Arial) in which to display the text. This can make the site look very different to the way it was intended to.
So what can a developer do to ensure all users can see the text in the correct font? In the past, there was limited flexibility in implementing non-standard fonts onto a website.
If there was only a small amount of text displayed in a non-standard font, for example, titles or headings, then the developer could make this text display in a CSS background image instead of HTML text.
The HTML text would still be available in the source code for SEO and accessibility purposes but it would be hidden using the CSS text-indent attribute and replaced with the image.
This technique was useful in that it is fully browser compliant. However, creating images can be a lot more time consuming than typing HTML text and every time the text changed, a new image would need to be created. Multiple images also increase the average page load speed.
One advantage over creating an image is the text renders like HTML text and is therefore selectable.
Over the past few years, other techniques have become available which are more efficient than the image and SIFR techniques.
For example, if you wanted to include all text contained in a tag with a class name of ‘my-font’, then you would add:
You could also specify an id name or an HTML tag.
The following techniques are more efficient than those described above and are used by the design team here at Fresh Egg:
Typekit is a service from Adobe which allows developers to include fonts which are hosted on their Content Delivery Network (CDN).
The process involves going to http://www.google.com/webfonts and selecting the font you want to use.
For example, if you select Advent Pro as your font of choice, the Google Font API will give you the following line of code to include in your site:
All that remains is for you to add the name of the font to the CSS attribute font-family in your stylesheet in the same way you would do for a standard web font:
As with Typekit, Google Font API limits the font styles which can be used to only those hosted on their CDN.
An alternative to using a Content Delivery Network to host your font files is to host them on the same server as your website.
By using the CSS3 attribute @font-face, you can link to the font files and then use the font-family attribute to specify which ids, classes and tags are going to use this font.
The example below shows how to link to the Perspective Sans font files within the assets/fonts directories of the website:
src: url('/assets/fonts/persans-webfont.eot?#iefix') format('embedded-opentype'),
You may notice that the @font-face attribute is linking to four different file types of the same font. This is to achieve cross-browser support. Internet Explorer 8 and below supports only the .eot (embedded open type) format, whereas Firefox, Chrome, Safari and Opera all support the .ttf (true type) format. The .svg (scalable vector graphics) format is used by Safari for iPhone and iPad while the .woff (web open font) format is supported by Firefox 3.6+, Chrome 6+ and IE9.
Font Squirrel enables developers to download hundreds of pre-packaged @font-face kits and, as with the Google Font API, this technique only relies on CSS.