How can I use custom fonts on my website? A helpful resources

How can I use custom fonts on my website? What is Cufon and @font-face? Which should I use? These are often asked question and in this tutorial I’ll answer them and show you how to get custom fonts working in all major browsers.

Cufon or @font-face? Typography on the web

As you may already know, if you wanted to display a custom font with anti-aliasing, you had to design the words in Photoshop and insert them as images into your website. Another option was to use Javascript or Flash. These days the latest and best solutions are Cufón javascript and @font-face CSS declaration.

Cufón

Cufon is an implementation of javascript, SVG, and Canvas that places your font after the browser has loaded your website with an amazing amount of speed and efficiency.

You can set it up in a few minutes, let’s see how. Visit Cufón website and download Cufón’s javascript file.


In Security you can set a specific domain to increase security. This way you can protect your font from evil ninjas out there. You can leave the final two sections at their default values. Accept the terms, click on Let’s Do This button and save the generated script.

Now create an HTML document and import these two javascript files:


<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Merge_400.font.js"></script>

Add some H1 and H2 headings to the HTML and initialize Cufón:


<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h2');
</script>

In replace function we can define which elements we’d like to replace with Cufón. If you want to replace specific elements by ID or class, simply import jQuery library BEFORE Cufón and you can start using its selector engine:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Merge_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('#header h1');
Cufon.replace('.content h2');
</script>

That’s it! You can use any font you wish just make sure you have the proper privileges to use it.

Pros

  • * Fast
  • * Simple to install and use
  • * It works on every major browser on the market

Cons

  • * If javascript is disabled, default fonts will be used.
  • * Text isn’t selectable.
  • * You can’t define hover state

@font-face

@font-face CSS declaration also lets you use custom fonts in your web pages. Unfortunately older browsers support it differently.

The first step is get a free font because of licensing concerns, you cannot simply embed any font on your website. There are a lot of sites that lists free fonts that you can use with @font-face. My favorite is fontex.org.

Once you have your font, you need to create at least three font files in order to get support cross browser. Fortunately there’s an online tool which generates them for you and also includes sample pages! The @font-face Generator!

Finally create an HTML document, add some headings and paragraph and add the following CSS code:


@font-face {
font-family: 'MergeRegular';
src: url('merge-webfont.eot');
src: local('˘'), url('merge-webfont.woff') format('woff'), url('merge-webfont.ttf') format('truetype'), url('merge-webfont.svg#webfontC1PyeCOP') format('svg');
font-weight: normal;
font-style: normal;
}

h1, h2, p {
font-family: 'Merge', tahoma, verdana;
}

The code links to all of the different font formats that we have created, and will make the font work cross browser. When setting an element’s font fafmily, always provide a fallback web-safe font for people using really old browsers, otherwise they will end up with their browser’s default font.

Pros

  • * It works without Javascript
  • * Text is selectable

Cons

  • * Font rendering quality differs from browser to browsers
  • * While the font is downloading, the user see the default font during 1 or 2 seconds
  • * If the font is provided by your client, He may be concerned by the fact that the font will be downlodable from the website
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: