One of the challenges that web developers face is providing a consistent experience across not only a variety of web browsers but operating systems, as well. This experience not only translates to the layout of a website, but the typography, too.
There are some fonts that are shared between operating systems (such as Arial, Times New Roman, and others), but there are other web-friendly fonts that aren’t shared among platforms. On top of that, alternative operating systems such as Linux, do not share common fonts but are becoming relatively common means of accessing sites and services on the web.
So how are we supposed to provide a common experience that translates well across all platforms? Enter typeface.js. It’s a free JavaScript utility that utilizes built-in browser technology that allows you to provide the same typography across all platforms.
Ready for a little lesson in code? More after the jump.
Let’s Get Started
First, you wanna grab a copy of typeface.js from the website. You can download it directly or by visiting the project’s website.
Place the file in whatever directory you normally use for your JavaScript files. For example, I normally keep all of my scripts located in a /javascript/
directory.
Secondly, you’re going to need a special JavaScript source file for the specific font that you want to use on your site. The typeface.js site offers a couple of fonts free for download.
They also have provided a tool that makes it easy to convert fonts that you have on your system; however, please note that fonts are subject to licensing – check with the license for the particular font before you begin using it in your project.
Once you’ve got your source files downloaded, you want to include the file in the <head>
elements of your markup. Make sure that you properly reference the file based on its location in your project’s directory.
At this point, you’re ready to style the text using your preferred font. To do this, all you need to do is apply the proper typeface-js class name and font-family attribute to the style of the element.
For purposes of example, we’ll be doing this inline; however, it’s a good practice to keep styles in a CSS file and leave the HTML in an HTML file.
You can download a working demo of the above examples – including on that separates the markup and the styles – by clicking here.
Heads Up…
- Typeface is compatible with versions of Firefox 1.5+, Safari 2+, IE6+, and at least Chrome 4.
- Note that because of the way the text is rendered on the screen, you do lose the ability to copy and paste text in the typical fashion. This has to do with the HTML canvas element which is beyond the scope of this article.
- Remember that it violates the terms of many popular fonts to convert them for use with typeface.js. Please check with the licensing rules for your fonts before using them in your poject.
- The typeface.js project site is regularly updated to feature relevant information regarding the current status of the project.
The web is an interesting platform in that you’ve got a variety of browsers and operating systems that can make it increasingly challenging to develop consistent experiences across the web.
Do tutorial posts on utilities like this prove useful for you and your organization? What other tools have you found that help standardize your web-based projects?
Jim Gray says
this went way over my head and experience…but tools are always needed…
Tom says
Yeah, I figured it may prove useful to some of the developers out there that may not be familiar with the library.
dannyjbixby says
Hey a nerdy coding post. Yep, it’s by Tom. 😉
Probably not too useful for many on account of that anti-copy/paste action going there. But still, interesting tool.
Tom says
You know how I roll ;).
I wouldn’t have gone with the embedded images, but we don’t have a code-prettifier (real word, I promise) plug-in installed right now. That’s why I linked to a demo to download. I figured it’d be the next best thing.
RwRhone says
I found this very useful. I used it on menus for a site that I wanted grunge fonts. What I did was go to the free font sites like dafont.com then you are clear of copywrite issues.
Peace
Tom says
Awesome!
..and thanks for the reference to the font site. I know that’ll be useful for those of us that wanna leverage this on a budget ;).
benrwoodard says
I have a client that had an H1 tag on the header of the page in a specific font. He noticed that it rendered differently in my browser and was very unhappy with what he had done. He wasn’t paying me to change the site just do some SEO work on it. This code should take care of that problem and keep him from having to make an image, right? Here’s the link if anyone wants to check it out. (let me clarify, it’s not my design, I just did some SEO 🙂 ) http://www.divinecrosses.com (it’s the ‘Divine Crosses’ header)
All that to say, I don’t understand all the ramifications of this tool but if I understand the general point, it will be useful in some cases and I like to be at least aware of this information. Even if I’m not using it on a daily basis.
Tom says
You’re right – this won’t have any impact in terms of SEO because the text is still contained within an H1 tag (which is all the same to crawlers) and typeface.js will take care of the cross-platform font issue.
Jared Erickson says
great post Tom! how would you compare this with something like Cufon? and I don’t think the copy and paste problem is a issue.. as long as you aren’t using it for the body text haha
Tom says
To be honest, I’ve not done much with Cufon. From what I can tell, they are largely similar and seem to leverage the same client-side technology to achieve the end results. I dig the documentation and github resources for Cufon.
Sometimes I render the entire body text using Comic Sans. I reserve this for people I don’t like, though ;).
Kyle Reed says
ummmmm, what was that again…
ya I will just leave this up to you john and dewde
Tom says
Where’s my coffee?
Gabe Hoffman says
So this inspired me to look around this idea, cause I noticed that Engadget had me install Calibri not too long ago, but I know that is a Microsoft font, and that I don’t actually have it on my computer, but that I do see their site in that font, and I was trying to figure out what happened. Well, take a look at this
http://www.ascenderfonts.com/webfonts/catalog/
For like as little as $15 a year you too could have such fashionable stylings and font control on your site. Anyone know more about this?
Tom says
I’m personally not familiar with that site, but it looks pretty sweet.
One thing to consider: since you have to pay for a subscription, there may be some licensing issues that would prevent you from deploying a font for use on your site. Then again, maybe not..
Nick Shoemaker says
I like that 8BIT isn’t afraid to post stuff like this- encouraging those who don’t know to educate themselves.
Sweet action!
Tom says
Word! Maybe we’ll get some more stuff like this queued up in the pipeline..
Stephen Bateman says
Hey man thanks for that,
Does it slow down the page much?
I’ve tried flash text generators, but wasn’t impressed by their speed, particularly on my country-fried shared hosting service.
Tom says
Nope. Most users won’t notice a thing. It’s significantly lighter than anything flash can offer.
dewde says
And Tom was worried about the chirping crickets. See! Christians like code, too.
peace | dewde
Tom says
Holy Coders, Batman.
Scott Magdalein says
Looks useful. Thanks for sharing, Tom.
Tom says
Sure thing!
Chelsea says
Nice!
I think I’ll use this for a construction website I’m working on.
Very helpful!
Thank you Tom =)
Tom says
Sure thing, Chelsea!