Categories

How to replace fonts using CSS3 font-face

Typography and font replacement

Font replacement made simple using @font-face

@font-face has been available for a while but with CSS3 used more widely, it is finally being recognised as a viable method of font-replacement.

In previous how-to guides, we have considered SWIFr and Cufon for font replacement. These methods rely on Flash and JavaScript respectively to substitute a web-safe font with a rendered font image. These methods have limitations for user experience. For example, both can cause load-flicker while the replacement font is rendered, Cufon relies on JavaScript being enabled and neither of these methods renders selectable and editable text.

@font-face is a CSS styling method that dismisses these limitations. It does not rely on external programming or rendering engines and the font is rendered with the page by the browser.

Things to bear in mind

As always, check the license agreement for use and distribution of the font you intend to use. Do not use fonts that limit your ability to render or link to the font on the web.

Using linked fonts relies on the availability of the linked server: if Google’s Web Fonts server doesn’t respond or the directory of the font changes, your linked font will not render.

Using web fonts can add loading time because the fonts must be downloaded from a server. Depending on the size and number of fonts being downloaded, this may add significant loading times for pages.

Not all web fonts are designed for use on the screen and have varying quality. You should check replacement fonts for legibility before you use them. As a general rule, avoid hard-to-read fonts and avoid replacement fonts that have small bowls or considerable variation of stroke modulation as these are the most difficult to read on screen.

How to find fonts

There are many libraries available. These tend to fall into two categories — those that provide fonts for you to download and install on your server and those that provide a link to their own font servers. We will take a look at both of these.

Server-based services

Google Web Fonts provides a growing range of fonts available through a link. To use Google’s service, find a font you want to use, select it and view it. You will need to choose the styles and character sets that you want to use (choose only the styles and character sets that you need as additional styles add to loading times).

Select the entire <link> code and copy it to your clipboard.

In the <head> section of your web page, paste the <link> code directly after the opening <head> tag. This is the link to the font provided on Google’s servers.

Next, go to your CSS file and create a font-family:

From the Google font page, copy the code within the CSS panel.

Paste it into your CSS file and build a suitable font style, as required. For example,

h2 {
font-family: 'Bowlby One', arial, sans-serif;
font-size: 2.4em;
color: #900;
margin-top: 3.6em;
line-height: 1.8em;
text-transform: uppercase;
}

Your page text should now render using the replaced font.

Choosing and downloading web fonts to your server

There are many font services available, I am going to use Font Squirrel for this how-to guide because they have a range of commercial-use free fonts available.

When you have chosen your fonts, click on the ‘@font-face kit’ tab on the font details page. Choose a subset to reduce the number of glyphs downloaded and therefore the loading time for your page.

Then choose the font formats. There are four formats available and you need to select all four of them. They are:

TTF (True Type font), which can be rendered by most browsers;

EOT (Embedded Open Type), which is suitable for Internet Explorer;

WOFF (Web Open Font Format), which is the emerging standard for the web;

SVG (Scalable Vector Graphic), which is suitable for iPhones and iPads.

Then press the Download button and you will get a zip file, in which you will find a sample HTML page, a sample CSS file, a copy of the licence and the four font files. From the zip, take the four font files and the licence agreement and put them in a new directory on your server.

Then you need to edit your CSS file. Near the top of the file, you should include the following:

@font-face {
font-family: ‘ChunkFiveRegular’;
src: url('[dir]/Chunkfive-webfont.eot');
src: url('[dir]/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
url('[dir]/Chunkfive-webfont.woff') format('woff'),
url('[dir]/Chunkfive-webfont.ttf') format('truetype'),
url('[dir]/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
font-weight: normal;
font-style: normal;
}

If you wanted to use the new font to style your H2 tags, you would write this code in your stylesheet:

h2 {
Font-family: ‘ChunkFiveRegular’, arial, sans-serif;
}

You can view a sample page, using both these methods to render web fonts. This sample page will open in a new browser window.

Categories

How to use custom fonts with cufon

Using font replacement on the web

Using font replacement on the web

Are you bored of using the same old ‘web-safe’ fonts on your sites? Developers have been looking for ways to solve the old problem of having just a few fonts available across platforms for some time. The most recent methods of font replacement, such as SWIFr, used flash technology to transform text into a replacement font and to display it on screen as an image. Now, there are a variety of such font replacement methods available, including Cufón to display text in any font you choose; it’s fast, reliable and simple to use.

Cufón uses JavaScript to draw text as you go with the HTML 5 <canvas> element. Despite being an HTML 5 element, support for the tag is widespread and is even available in Internet Explorer 6.

There are two key things to be aware of:

  • Text drawn using Cufón cannot be selected in the browser – it is a vector image transformed by JSON;
  • You must have a license to publish the font on the web and embed it in your site.

Background

Simo Kinnunen from Finland developed Cufón as a web font replacement solution. What Cufón does is transform the font into a scalable vector graphic, convert it into Vector Markup Language (VML), convert the VML into JavaScript Object Notation (JSON) and then embed the JSON into the web page using JavaScript functions and an HTML tag.

The downside is that the text is rendered as a drawing. It may sound complicated but really, it is fairly easy to implement and it is fast and efficient.

Pros and cons

There are pros and cons with all the various methods of font replacement available. Let’s take a brief look at the main ones:

SWIFr

This renders the text as a flash image. There is usually a slight lag between the rendering of the page and the implementation of the font replacement. This can cause a flicker of the original text before it is transformed within SWIFr. The use of SWIFr does not allow the formatting of the text within the page and it relies on technologies that are not core to the browser.

Cufón

This renders the text as a vector image, using JSON. Like SWIFr, there can be a lag between rendering the page and the implementation of the font replacement that can cause flickering between the original and the rendered font. Again, Cufón uses technology (in this case, JavaScript) to render the effect, which may be turned off by the user in the browser. Cufón is more controllable within the page than SWIFr and is slightly more reliable. It does not require the installation of several different font formats, but it does require a licence to be held for any fonts that are used and published on a web site.

@font-face

@font-face has been around for a while but it is really starting to come into its own with the advent of HTML 5 and updated browsers that can handle it properly. @font-face is a CSS property, which means that it is fully integrated with the browser and does not rely on any technology to be turned on. It is therefore much faster to render within the browser than the other two solutions. However, it does require various formats of the font to be available, either on the web site or from a font repository, and these have to be downloaded with the page for the font to be utilised on the page. This is a method that is really starting to make headway and is likely to take over from the other font replacement methods that are available in the future. We’ll be looking at this method further in future posts.

Useable fonts

Almost any font can be used with Cufón, whether you have TrueType Fonts (TTF), OpenType Fonts(OTF), Pointer Font Binaries (PFB) or PostScript Fonts (PSF), they can all be used. The only restriction is the licence you hold for that font. Commercial fonts often require you to have a second, more expensive licence to allow you to embed the font into a web site. You must check your licence to ensure that you abide by the licence agreement and not infringe the rights of the font developer.

How do you use Cufón?

    1. Go to cufon.shoqolate.com and download the cufon-yui.js file to your site folder. This is the JavaScript rendering engine that will create the redrawn font.
    2. Set up your web site using normal HTML and CSS and find a font that you can use in accordance with your licence.
    3. Next, go to cufon.shoqolate.com/generate,
    4. Select the relevant font(s) (NOTE: it is advisable to make a copy of the font in a separate folder before undertaking this process to avoid any mishaps to your existing font files),
    5. Choose a name for the font family,
    6. Click to agree that the EULA (end-user licence agreement) allows you to embed the font in your web site
    7. Select all the character sets (glyphs) that you want to use (the fewer selected the smaller the file size)
    8. rovide the domain names for the domains where the font will be used (this stops linking from elsewhere and other security issues),
    9. Select the EM size, optimisation paths and kerning tables for your font — this is a trade off between features and file size, so you need to choose what you are willing to sacrifice for file size here. Bear in mind that for small font sizes it is recommended to turn off path optimisation.
    10. Click on the ‘Let’s Do This’ button and download the file to your web site directory (put it with the cufon-yui.js file).
    11. Now you need to move to your web pages and open them in a text editor. In the HTML page, you need to place Cufón after any calls to stylesheets. You need to call teh rendering engine first, followed by the font file. The scripts are as follows:
      <script type="text/javascript" src="[directory]/cufon-yui.js"></script>
      <script type="text/javascript" src="[directory]/[font-family].font.js"></script>

Now, let’s replace some text elements in the HTML page:

  1. Add the following code below the two script codes you just inserted:
 <script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h2');
Cufon.replace('h3');
</script>

Add some effects

You have now changed the H1, H2 and H3 tags to your chosen font. But the script also allows you to render other effects on your text, such as a

Drop shadow:

Cufon.replace('h1', {textShadow: '1px 1px rgba( 0, 0, 0, 0.2)'});

Gradient:

Cufon.replace('h2', {color: '-linear-gradient(white,#990000)'});
Cufon.replace('h3', {color: '-linear-gradient(#fff, 0.4=#999, 0.5=#ccc, #ccc)'});
// shades into different colours at the specified points - 40%, 50%, to the end of the H3.

Final words

There is no reason why you can’t use this method on any text element in your HTML page. You can also extend Cufón by using a selector engine, such as Google’s.

As with SWIFr and other replacement engines, there is a delay between the page loading and the rendering taking place. To prevent this, simply call cufon.now() before any scripts running prior to the closing </body> tag.

Find out more at: wiki.github.com/sorccu/cufon.