Last Wednesday I gave a presentation at the Bangkok web and graphic designer meetup about typography on the web, I wanted to use my article this week to look more closely at the leading font services.
First lets backtrack to when there were only a few fonts available to use on the web, these were known as “web-safe” fonts, they were the system fonts that came free with Windows or your Mac; fonts such as Georgia, Arial, Times New Roman, Verdana and so on.
Last Wednesday I gave a presentation at the Bangkok web and graphic designer meetup about typography on the web, I wanted to use my article this week to look more closely at the leading font services.
First lets backtrack to when there were only a few fonts available to use on the web, these were known as “web-safe” fonts, they were the system fonts that came free with Windows or your Mac; fonts such as Georgia, Arial, Times New Roman, Verdana and so on.
For many years, up to about 2007, these were the only fonts that were available to use online; if you wanted to use any other fonts you’d have to set them as images, or use a Flash replacement method (such as sIFR). Recently, over the past couple of years, browser technologies have progressed to allow the web designer to control font display using the @font-face rule in CSS.
Font Squirrel www.fontsquirrel.com
Font Squirrel is a free service which will generate an “@font-face kit” from a font you upload from your computer, these kits are then ready to use on your website and come with all the different font file type so each browser is supported.
The great thing about this service is that you have full control over your files, you can host things yourself and you can make tweaks to the font files themselves to adjust the font’s rendering, such as x-height matching, applying hinting and fixing vertical metrics. Having this amount of control is useful because sometimes fonts that have been created for print design don’t always work as expected on the web.
One thing to bear in mind when using a service like Font Squirrel is that you must check your font’s license, and make sure you’re allowed to use it online. Sometimes font foundries don’t want you to use their fonts online.
TypeKit www.typekit.com
TypeKit is my personal favorite font service that’s out there at the moment; all you need to do is simply choose the fonts you’d like to use and embed a line of code to your website; choose where you want the font to appear and you have web fonts! Easy as that!
TypeKit has partnered with many of the leading type foundries such as Adobe Type, FontFont and Bitstream. This means their font libraries are very expansive. You don’t need to worry about the font licenses like you do with Font Squirrel because they handle this for you.
TypeKit does have a free plan with a small font library and can only be used on one website; then their plans with larger font libraries start from $25/year, so it’s not going to break the bank.
Google Web Fonts www.google.com/webfonts
Google Web Fonts is another free service by Google. Their system works in a similar way to TypeKit’s where you embed a line of code into your website and then you’re away with web fonts.
I have found from personal experience that occasionally their fonts have problems and errors in the characters and glyphs, and I’ve also found their OS and browser testing don’t seem as thorough as TypeKit’s. But at the end of the day it’s free, so this makes it a great option for beginners.
What’s Next?
In my next article I’ll cover the basics of setting up your HTML and CSS to using a @font-face font. See you next time!
Want to learn web design?
If you want to learn how to make your own website, you can do so at Web Courses Bangkok! Use any contact form on our site and we will get back to you.
