How to Use Non-System Fonts Without Images or Flash
There has always been a problem trying to display non-system fonts within a web page. The most popular solution is to use images. Then came along sIFR which uses Flash to replace the text. There is an alternative that uses JavaScript and the <canvas> tag, and here is a tutorial that shows you how to use it.
How to use non-system fonts
For this tutorial I will be using typeface.js library, but there are alternatives, on being FontJazz. Feel free to explore other options, but this is one library that I found to be really simple.
1. Get the library
First thing is first. You need the library. You can download typface.js library here.. It is just a sing JavaScript file, and is fairly light weight.
2. Download / Convert a font
Typface.js doesn’t use regular true type fonts. It uses fonts that have been converted into a JavaScript files. So you will have to convert them if you’d like to use them. So how do you do this? Fortunately typeface.js website has a converter for you to use. You can use it on their fonts page.Just a side note, be sure you know the licensing of your fonts, once you convert them, anybody will be able to grab them from your website. For simplicity I just downloaded one of the fonts that they offer on their fonts page. The download will include the ttf files and the JavaScript files. You will only need the JavaScript files for the library to work.
3. Putting it all together
Now you have everything you need to get started, and it is fairly simple to do so. First thing is you have to import your JavaScript files. You will notice that the typeface converter separated the fonts into different type decoration (bold, italic, regular). Just include the ones you will use. Just a note, headers are automatically bolded. You will have to include the bold font if you plan on using the library for any headers.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <!-- load the typeface.js library the fonts --> <script type="text/javascript" src="typeface-0.12.js"></script> <script type="text/javascript" src="helvetiker_regular.typeface.js"></script> <script type="text/javascript" src="helvetiker_bold.typeface.js"></script> </head> <body> <!-- Content --> <h1>Header</h1> <div class="regular"> Regular text here. </div> </body> </html> |
After all the required files are included, you just need to create some styles. It is as easy as using the font-family property and using the font you are using as the value.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <!-- load the typeface.js library the fonts --> <script type="text/javascript" src="typeface-0.12.js"></script> <script type="text/javascript" src="helvetiker_regular.typeface.js"></script> <script type="text/javascript" src="helvetiker_bold.typeface.js"></script> <!-- Make classes that assign the font family --> <style type="text/css" media="screen"> h1{ font-family:Helvetiker; } .regular{ font-family:Helvetiker; } </style> </head> <body> <!-- Content --> <h1>Header</h1> <div class="regular"> Regular text here. </div> </body> </html> |
Now all you have to do to get it working is give any element that should use the library a class of typeface-js.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <!-- load the typeface.js library the fonts --> <script type="text/javascript" src="typeface-0.12.js"></script> <script type="text/javascript" src="helvetiker_regular.typeface.js"></script> <script type="text/javascript" src="helvetiker_bold.typeface.js"></script> <!-- Make classes that assign the font family --> <style type="text/css" media="screen"> h1{ font-family:Helvetiker; } .regular{ font-family:Helvetiker; } </style> </head> <body> <!-- Content - add typeface-js class to use typeface.js library --> <h1 class="typeface-js">Header</h1> <div class="regular typeface-js"> Regular text here. </div> </body> </html> |
That is it. You’re done. This is much easier then messing around with sIFR, and it degrades nicely when JavaScript is shut off. It also works in all the major browsers (Firefox 1.5+, Safari 2+, and Internet Explorer 6+) . You are now on your way to building fantastic website with great fonts.