Title: A guide to using any font on the web

Date: Thursday, July 24, 2014

When the CSS2 specification was released way back in 1998 it attempted to improve font selection on the internet by adding font-matching, synthesis and downloading. Unfortunately due to the fact that the then two competing browsers (IE & Netscape) decided to choose different standards and protocols, the idea never gained popularity. What we are seeing today is a resurgence of the idea that you can have accessible fonts available on your webpage that do not conform to the well known ‘safe fonts’ criteria.

What I am going to run through here is just some of my experiences using some of the upcoming font embedding techniques. They all, unfortunately have their drawbacks, none are perfect. But at least it is all a step in the right direction for Web Typography.

@font-face

Whilst not exactly new feature to CSS3 @font-face was first proposed as part of CSS2 and is actually compatible with IE 5+. However, Microsoft at the time used a proprietory format, and pick up of the technology was near unexistent until the release of Safari 3 which allowed the use of licenced .ttf  (TrueType Font) or .otf (OpenType Font) on webpages. The idea is that it “lets designer specify the location of their own font files. Instead of having to design with just a handful of web-friendly fonts”.

craigmod

Example of a site using @font-face

@font-face will work with IE4+, Firefox 3.5+, Safari 3.1+, Opera 10+ and Chrome 4.0+. This means that basically all commonly used browers support the standard, the problem lies with the fact that the current delivery of fonts using @font-face is considered “illegal distribution” by the ‘foundry‘ and is not permitted.

But there is no need to fear. There are a number of organisations that are moving for the creation of a free and open web. One such is The League of Moveable Type who have created a repository of Open Source fonts available for use on the web.

To actually use it is pretty straight forward. The font-family must be declared using @font-face rule.

@font-face {
  font-family: 'GothicCustom';
  src: url("LeagueGothic.eot");
  src: url("LeagueGothic.otf") format('opentype');
}

And then called using font-family as per usual CSS.

h2 { font-family: GothicCustom, sans-serif; }

Easy huh? Here is a quick break down of the pros and cons:

Pros:

Cons:

You can read more about the @font-face module at nicewebtype.com

Cufon

Cufon is one if the newer technologies that is starting to gain a bit of traction on the web. Whilst it is based off the older typeface.js it is in all  essence a faster, more improved version. Cufon actually uses the browser to draw Vector objects using VML (Vector Markup Language) for IE and the Canvas element for compatible browsers. Canvas being a new technology released as part of the HTML5 markup.

yellowbirdproject

Example of a site using Cufon for font replacement

Cufon works very well for the intended purpose. It even does a fantastic job rendering large amounts of text, ie Paragraph text. However it really is not suitable at the moment for anything other than headings due to the fact that the text created using Cufon is not selectable. This site uses Cufon for its headings. Go ahead and try select them. The reason it can’t be done is because the text is actually being redrawn as an element on the page and is no longer actually text.

Using Cufon is very easy as well, it just requires a couple of extra steps to get your fonts in a format compatible with the system. Firstly head over to the Cufon site, where you will need a physical copy of your desired font that you can upload and convert into an SVG font.

You then simply include the Cufon.js file (this does all the tricky stuff) and you include your converted SVG font into the head of your page with a little function that calls Cufon and tells it to replace (in this example) all h2 with the font Myriad Pro.

<script src="cufon.js" type="text/javascript"></script>
<script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
	Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
</script>

Pros:

Cons:

Visit the Cufon Documentation to get a better understanding of the uses and possibilities this technology offers.

SIFR (Scalable Inman Flash Replacement)

SIFR (named after Shaun Inman who conceived the idea) is a technology that has been around for a number of years now. It uses a slightly more complicated system that the other two. It, as the name describes, uses flash, actionscript and javascript to replace the specified text on the page with a vector version, rendered in an swf.

squared-eye

Example of a site using SiFR for font replacement

Whilst it sounds complicated, after a bit of practice the procedure becomes pretty straight forward. To use it you open the Flash file located in the .zip change the font to the type that you want and publish.

Due to the fact that Adobe Flash has licence to use and embed fonts across the web, this method of Font Embedding is technically the only legal variant.

Due to the lengthy process needed to activate a SIFR font you are better off reading how to install it from the experts in full. My explanation would not do the original justice.

Pros:

Cons:

Hopefully this has helped ease you into the process of embedding web fonts. Whilst it may seem a little daunting, the outcome is always worth effort. Especially from a design point of view. We no longer have to feel limited and suffocated by the standard font families.

Category: Articles

Tags: ,, ,