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.
Download Library
Download / Convert Fonts
Great post! I’ll subscribe right now wth my feedreader software!
Nice one.
I saw few fonts there, Can I create or convert my own font?
Thanks
You sure can. They have a tool that converts the fonts for you.
First off, thanks for posting this, it’s exactly what I needed. This has been a great help. The small issue I am having now is setting up <a href rel="nofollow"> styles that work in IE7. I need a simple hover to be underline, but I have tried several variations on what you have done here, with no luck in IE (but FF and Safari work fine). Any suggestions?
@Ryan
oops. I meant a href… and didn’t mean to put it in as code. Sorry.
@Ryan
Ya there is a bit of an issue there. The library is fairly new so they don’t have everything within it yet. Their next release they’re going to add :hover which will help. Just looking at the code though, it looks like they didn’t handle underlined in the vml portion of their code (lines 595 – 617) Unfortunately I don’t think it’s a quick fix, you’ll have to dive into the typeface.js file.
i’ve made it exactly as it’s written… sorry, but it didn’t worked. it’s time to go back to bitmaps and flash
I just copied and pasted the sample code you displayed on this page as a trouble shooting measure because I couldn’t get it to work on my own and it still doesn’t work. Any thoughts?
I submitted a comment, posted it, and now it is no longer there. Did I ask the wrong type of question and it was removed? I’m trying to get this to work followed all the steps and no luck. Can anyone help with this?