Our expert this month is CHRIS STEINGART from QTWeb.ca
There are lots of great reasons these days not to be stuck with standard web fonts.
Gone are the days of being limited to only a handful of fonts as we can now embrace some really great options for generating a myriad of web fonts on your website.
In the olden days (ie. a few years ago) web developers were limited to a handful of fonts as your website needed to use a font that was installed on the computer of one of your visitors. Choosing a unique font could look great on your computer but you ran the risk of visitors only seeing it a basic serif or sans-serif font. Many designers found ways around this by creating banners that featured text loaded as images, which was a great option for sites that weren’t assembled dynamically. The other issue was that ‘tricking’ users with images instead of text also tricked you out of having elements of your page recognized by search engines.
Thankfully today there are several great options for expanding your font horizons on your site:
A simple CSS3 rule that allows you to host fonts on your server and have them rendered via your website if the visitor to your site doesn’t have the font installed on their computer. This method is supported on Safari, Chrome, Firefox and some acceptance in IE.
To use the @font-face property, simply upload an otf font file to your server and then enter the following code into your CSS specifying the location of the font family:
src: url(“path-to-the-font-file/GraublauWeb.otf”) format(“opentype”);
One drawback to using this technique is that you need to be licensed to use a specific font and larger companies could face lawsuits for using these fonts. Beyond this and a few browser compatibility issues, @ font-face is an incredibly easy way to add fonts to your website.
Google Fonts API
The newest player in the web font scene, what started as a project featuring 20 fonts now offers over 450 font families and the best part it’s free! The system basically works the same as typekit with fonts hosted on google’s server, but without the cost. To use a font, all you have to do is find the font in google’s directory and copy the embed code to place in the <head> of your website. The Google Font API means that you don’t need to use CSS3’s @ font-face method (while you do in Typekit) allowing complete cross-browser compatibility. Google Fonts is the best solution for anybody wanting to get their feet wet in the world of web fonts, there’s a large library to choose from and it’s well documented.
The changing landscape
As you can see, there are plenty of great ways to implement new fonts into your website for the beginner and master coder alike. So the only thing left is to get started and dive into the pool and start playing around with web fonts!
*Special note, while the title of this article is a crude play on words, it also happens to be the name of one of our favourite free font identification apps.
CLICK HERE to visit the QTWeb BLOG!