Description:
This page demonstrates the easiest way to do font replacement on the web. Get up and running in just a matter of a few minutes. This is a fairly brief and basic overview, but I am thinking that anyone trying to use this technique will have a basic understanding of how to manage the various files. But be sure to ask questions if anything is unclear, I promise it's not hard and anyone can do it, finally!
Until we are able to use the CSS3 @font-face property, we are stuck using 'hacks' to load styled fonts without creating background images manually. While many of these can be a major pain (cough-sifr), Cufon makes it super easy.
- Download Cufon and call it in your html file.
<script type="text/javascript" src="cufon.js"></script>
- Select the font you would like to use by browsing to it on your computer through Cufon's web interface.
- Be sure to make sure that you are allowed to freely use the font you are using and check the 'EULA' checkbox.
- Select the different glyphs you want to use. You are probably fine just using uppercase, lowercase, numerals, punctuation, and maybe wordpress punctuation if you want.
- Type in your domain so this file can only be used with your domain. This is a good security measure to prevent people from hotlinking your fonts.
- You can play with the other settings but they are usually just fine so just check the 'accept terms' checkbox and download the javascript file for your font.
- A javascript file will be downloaded with the necessary information to use this font, so be sure to call to this file in your html as well.
<script type="text/javascript" src="Apple_Casual_400.font.js"></script>
- Load the cufon script that calls a specific element.
<script type="text/javascript"> Cufon.replace('h2'); </script>
In this example, all H2s in our page will be display our stylized font (see demo below).
Demo:
This is an H1 with font replacement.
This is an H2 without font replacement.
This is a paragraph with font replacement.
Important Notes:
- This is javascript based so it will not work if the user has turned off javascript for some reason.
- You cannot add a css hover state to the focused element so this would not be a good solution for links that you want to change color on hover for instance.
- Unfortunately the text is NOT selectable (one of the pluses of sifr).
- In its out of the box form, you cannot target specific elements using selectors so you will need to load a javascript framework to handle that. I highly recommend jquery. Just load jQuery BEFORE you load cufon, and then you can target elements with css selectors.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
I have noticed that it is nice to just have cufon replace text on any element with the class of "cufon", then you can just add that class to whatever elements you would like to target for font replacement.
So in the end, your <head> should end up looking something this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="Apple_Casual_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('.cufon');
</script>
<title>Font Replacement - The Easy Way</title>
</head>
In this case, I am targeting all elements with the class of cufon and replacing its font-face with my stylized font.
