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
Filed under: Web Designing, Web Development | Leave a comment »
Er.Krushna Chandra Muni :: Professional Web Developer | Website Design Orissa | Website Design Bhubaneswar | Website Design India | Website Design New Zealand | Website Design Auckland 