How do web fonts work?
Times have changed on the web. Especially when it comes to choosing what fonts to use on your website.
We are no longer restricted to boring old "system fonts" (the standard fonts that are supplied with every computer). Nor do we have to turn fonts into graphics if we want them to look pretty. Thankfully, there are now a number of technologies readily available, that allow us to use beautifully designed "web fonts" on our websites in a legal and hassle free way.
A brief run down of the latest Web Font techniques.
A. Subscribe to a Web Font provider, such as Typekit or Font Deck
- Create an account
- Pick a font from their library
- Your web designer exports the code snippet, then implements this on your site
- You pay the yearly subscription for that font. roughly £5-£15 pounds per font per year
The Web Font Provider deals with the legal side of font licensing for you, by hosting the font on your behalf.
You are not actually supplied with the font files, so you cannot try them out in Photoshop first, but the sites generally have a nifty "test drive" facility, so you can "try before you buy".
B. Find your own free (open license) web fonts, on sites such as Font Squirrel
- Pick a font from their library
- Your web designer exports the @fontface code and the font files themselves, then implements this on your site
To remain within the law you must ensure the fonts you're using have an open license, allowing them to be used anywhere on the web. These can be found on such sites as www.fontsquirrel.com which is 100% free for commercial use. Bingo! :). As you are allowed to download the actual fonts, you can try them out in Photoshop first.
C. Google fonts - Free & Open source
- Pick the font you like from their library
- Your web designer exports the code and implements on your site,
As you are allowed to download the actual fonts, you can try them out in Photoshop first.
How do I decide what method to use?
The decision usually boils down to which provider has the font you want to use.
However, as is usual on the web, things are never that simple. We've written another article that explores the difference between free and paid for fonts.
Although @fontface (the code that enables the Web Fonts) is supported by most browsers, (as long as all the required font formats are present and linked in correctly) how the font actually renders between browsers can be a bit iffy, especially the older the browser gets. There can even be a difference in legibility depending the the point size of the font! This can be due to the quality of the font and how it was created. So always make sure you test your font in as many browsers a possible before launch to ensure it it legible and looking as expected.
