As a new blogger or internet solopreneur, you may be facing a steep learning curve. Either that or you are a genius and don’t need to read this blog but could be writing it yourself. If that is the case, please contact COLIBRI directly, because she can always use high quality guest bloggers!

Lucky COLIBRI, this week’s post about fonts is adapted from an original post titled “Moving Beyond Web Safe Fonts” by Chloë Bregman for her blog, Outside The Box.

The Reader Question

I’m trying to understand how fonts now work on the web. As I understand it, we’re no longer limited to the ‘web safe fonts’ for content? We can either use something like a) TypeKit or b) the @font-face CSS rule which downloads our own fonts from our server? If we use one of these options, all the fonts will show up exactly the same on every browser? I am thinking that if we use option b) then we have to own the licensing rights to the fonts, correct?

– From E.

The Short Answer

Yes, you can use more than the traditional web safe fonts. You have the option to serve the font off of your server or a different server. If you serve the font from your server, you need to have the web license.

The Long Answer

This whole area can be confusing. I have called several font foundries over the last 3 years to gain clarity on this topic. Here is what I understand.

When you purchase a font to install on your computer, you aren’t purchasing ownership of the font. You are purchasing a desktop license to use the font. Many licenses limit the number of computers you can install the font on – typically 2-5 workstations. Most companies do not include the web or server license with the desktop license.

You can specify any font you want in your CSS but it will only show up if the person has it on their computer/ mobile device or you use some alternate way to guarantee the font is accessible to them such as putting it on your server or serving it off of someone else’s server.

@font-face has been around for a long time but only recently is supported on all browsers. You still need a separate .etf file for Internet Explorer. I have used this and it can take a bit of playing with to get the fonts to show up correctly everywhere. Overall, it’s pretty awesome.

To use @font-face you need to license the font for web or server use. I have encountered a few font foundries that do not offer a web license so their fonts cannot be installed on a server. Some of them even restrict embedding the font in a flash site. In those cases, the font can only appear in image form. Some web licenses are available for a one time fee, while others must be licensed yearly.

You can purchase a web license from several websites such as MyFonts and Fontdeck. Be sure to read through the complete license as there are occasionally limitations. If you are purchasing the desktop and web license for a font at the same time, be sure to choose the Opentype version of the font. Opentype technologically is newer and the characters have screen and print data in the same component of the character. Most importantly, Opentype fonts have expanded character sets and have larger families that include condensed, expanded, italic and multiple weights of bold.

Choosing a free font that you find somewhere online is not a great idea. Fonts are vector files. Typically free fonts are not designed properly and are often made up of raster images of a font at one size that has been ripped off of a real font. They do not contain the data necessary to scale to different sizes and print correctly.

Be careful if you use an @font-face generator such as cufon to turn your font into web font files instead of purchasing the server sets. Sometimes the fonts do not display well because the generators flatten the font into raster images. Plus when you do this, you probably didn’t technically own the right to host the font you are using the generator for.

You can subscribe to a service such as Typekit where you typically license the font for so many sites with x number of page views a month and serve it off of their server. I find these are the fastest to implement, easy to use and a great option if you have limited coding skills.

I have used different services and @font-face. My favorite 3rd party font services are Typekit and Google Fonts because they are easy to implement, load quickly and are supported on the iPad and iPhone. These companies continue to adapt to changing platforms and will hopefully continue to extend their services to accommodate future platforms.

Resources

Chloë Bregman

Do you need digital marketing services? Please connect with us for a complimentary digital strategy session! Just click the button below to get started.