In the past, web designers have had to use the widely-distributed fonts (such as Arial and Times New Roman) so they could guarantee their users could read their website. This left little room for creating websites that looked a little more like print. In the past, non-standard fonts would have to be converted into images, and this generally was not good for page loading, SEO, or website maintainability.
Although we have come a little closer to being able to use non-web-standard fonts on our websites, we still need to use Javascript to render different fonts, until more advanced methods are widely-used and available in browsers. The @font-face tag can be used, but it requires advanced browsers using CSS3, though the idea was proposed in CSS2.
Overall, I suggest using a combination of CSS @font-face and one of the Javascript methods to load the font. I also suggest using a custom font sparingly and only in certain HTML tags and instances, such as in header <H1> (or <H2> and <H3>) tags only, pull quotes, or in navigation menus. I certainly do not recommend using a non-web-standard font for all body text. In all instances, I recommend using a fallback method in case there is an issue with the custom font loading, such as making all custom fonts default to 'sans-serif' in the case that the custom font does not load.
@font-face
To embed the font using CSS @font-face, you must first have permissions to use the font in this way. (Fonts are copyright, just as images are.) If you have permission to use the font and there are no restrictions on the licensing, you can load the font file as below. The following loads the font depending on the browser requirements on varying types of font format. The method was reworked several times by multiple developers since 2009, and this method is devised by the website FontSpring.com (1). This solution works in all browsers that support @font-face and on Android phones.
@font-face: {
font-family: 'MyCustomFont';
src: url('/fontfolder/CustomFont.eot?') format('eot'),
url('/fontfolder/CustomFont.woff?') format('woff'),
url('/fontfolder/CustomFont.ttf?') format('truetype'),
url('/fontfolder/CustomFont.svg#svgFontName?') format('svg'),
}
@font-face: {
font-family: MyCustomFont;
src: url('/fontfolder/CustomFontDark.eot?') format('eot'),
url('/fontfolder/CustomFontDark.woff?') format('woff'),
url('/fontfolder/CustomFontDark.ttf?') format('truetype'),
url('/fontfolder/CustomFontDark.svg#svgFontName?') format('svg'),
weight:bold;
}
Once you have loaded the font following the method above, you can call it using the font-family tag, as below.
h1 {
font-family: 'MyCustomFont', serif;
}
The following websites below use the @font-face method:
http://www.codeslingerschallenge.com/
http://www.faciodesign.co.uk/blog/
Note how the websites restrict the custom font to the headers and, in the case of the faciodesign.co.uk website, the navigation.
The following methods that I will look at include: Typeface.js, Google Fonts, sIFR, TypeKit, and Cufon.
Typeface.js
This solution uses a Javascript file to render fonts.
Advantages:
Easy to implement.
Does not require Flash.
The Javascript file is small, and it has the ability to load quickly.
Disadvantages:
The text rendered is output like an image, and each word is output into a <span> tag.
Uses the <canvas> tag for each word, and combined with separate <span> tags, it inserts a lot of HTML.
The solution cannot be read by screen readers.
Looks different in different browsers and does not render in all browsers.
To use Typeface.js, simply download the Javascript file from:
http://typeface.neocracy.org/download.html
You will need to select a font that you have permission to use, and you will need to convert the font into a Javascript file (available on the Typeface.js website). Simply load the two Javascript files after your CSS file is loaded. After this is completed, you should be able to reference the font name in the CSS 'font-family' tag.
I had some problems converting some fonts to Javascript, and some fonts that were converted had rendering problems.
Google Web Fonts
This solution is developed by Google and allows developers to use licensed web fonts on their websites through Javascript.
Advantages:
Google Web Fonts is free.
Easy to implement and only requires loading Javascript from Google onto your website.
Disadvantages:
There are only a few fonts available to use.
To use this method, simply visit the website:
http://www.google.com/webfonts#ChoosePlace:select
Choose a font and import Google's Javascript that renders the font by using:
@import url(http://fonts.googleapis.com/css?family=MyFont+Serif&v1);
Simply add the font to the font-family tag in CSS.
sIFR (Scalable Inman Flash Replacement)
This solution uses Flash and Javascript to render the font and is an SEO-friendly method.
Advantages:
Text is selectable and SEO-friendly.
Screen readers will not have problems reading the fonts that use this method.
Disadvantages:
Requires the Flash plugin, so this cannot be seen on the iPhone.
Page loading is an initial problem as it needs to load CSS, Javascript, and Flash.
There seems to be a learning curve, and it takes extra time to configure setting up on secure websites.
It requires much testing and there may be problems with it rendering in certain visual instances.
See the credit for a tutorial on how to use this method on your website (2).
To try this method, you can download sIFR from the developer's website:
http://novemberborn.net/sifr3
Typekit
This solution uses Javascript to render fonts, which are then passed from TypeKit's servers and delivered to the website. This solution is a subscription plan, and the company is now owned by Adobe.
Advantages:
Owned by big brand, Adobe, so I suspect that this will continue to be developed and supported.
Contains many fonts to select from, and all are available to use.
Disadvantages:
You pay monthly to rent the font.
If you have a lot of fonts in your kit, the produced Javascript file can be large and slow.
To use this method:
Visit the website http://www.typekit.com. You can sign up for a trial to test before you purchase one of their plans.
Cufon
Cufon allows you to render your fonts into Javascript files to use on your websites.
Advantages:
Easy to use.
Disadvantages:
Although you can convert any type of font, you need to bear in mind the licensing restrictions on the fonts that you wish to use.
Renders fonts as not selectable, and creates extra HTML and uses <canvas>.
Is not good for SEO.
I tried this method, and some of the fonts would not convert. Others converted, but they did not convert the font correctly.
To use this method:
Download the Cufon Javascript and the font-specific Javascript. To generate your font's Javascript, simply visit: http://cufon.shoqolate.com/generate/
Use Cufon.replace to add the font to specific HTML tags and classes:
Cufon.replace('#cufon-text h1');
Other Methods
Many other methods exist, and these work similar to TypeKit's solution, though some of these methods are free, and others require a fee. Methods include: Webtype, FontDeck, FontsLive, TypeFront, FontSpring, Fonts.com, and WebINK. There are many more, and these can be researched to discover the correct method for you.
In conclusion, I am glad that some progress is being made in this area so that we can use custom fonts in our web designs without relying on images or compromising SEO. There is still some way to go in this area, but we have come a long way from the days when you were limited to only using Times New Roman or Arial in websites and images for headings or navigation menus.
1) FontSpring. The New Bulletproof @font-face syntax. http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax [3 February, 2011].
2) Wake-up Later. sIFR Tutorial:Use your own fonts. http://www.wakeuplater.com/website-building/use-your-own-fonts-a-simple-sifr-guide.aspx [10 October, 2011].
Recent Comments