You may have noticed a small grey box saying “Fonts from” in the bottom right of your browser window, which links to a page describing the fonts which are used on this site. This is part of the new Typekit service, which is able to implement a wide range of fonts into a website, giving designers more varied options when picking an appropriate font.
Traditionally, the “safe” fonts to use have been limited to a small number of common fonts which are installed on the popular operating systems, namely Mac OS and the Windows systems. Websites use the font files on the user’s machine, which lead to designers using the “font-family” attribute to display the fonts that they wish to use on the page, and due to this restriction the number of fonts were limited to these few common fonts. Recently, a technique referred to as @font-face enabled designers to upload fonts to their servers and link to them, which enabled a wider range of fonts to be used on websites. But the main problem with this solution was that not all fonts were legally allowed to be used by this technique, and also it was very easy for people to look at the source code and then download the font for themselves. This meant that even if it was legal for a paid font to be used with @font-face, it could be illegally downloaded very easily.
Typekit however is a new approach entirely which has the backing of the major font foundries and uses some JavaScript to display the fonts onto the site, meaning that fonts are not stored on the site server and can’t be illegally downloaded. This approach is more appealing to the foundries as they are able to have more control over their fonts, and the subscription plans mean that they will get a financial reward for their efforts.
Typekit is still in an invite-only beta phase and after attending FOWD Glasgow, I received an invite last week and subsequently signed up for the free subscription and so far I’m impressed. It’s so easy to use, there are a wide range of few fonts even on the free package, although this number will increase in the paid packages. In order to use the service, a user just has to login and create a “kit” before browsing the available fonts to add to that kit.
Once the desired fonts have been added, and it’s possible to add several fonts to each kit, the user is given or can select CSS classes which the fonts will be applied to before inserting these into the site code. After adding the 2 lines of javascript to the page header which applies the fonts then that’s it complete and the new fonts are added to the page. As these are alternate fonts, by still using the font-family and @font-face attribute then non-JavaScript users will still see an appropriate font and their experience will still be attractive.
The only slight notice is that on the free account it’s not possible to remove the badge that can be seen, and there can be a slight “flicker” as the original fonts are loaded and then the Typekit fonts are added in later, although it’s only a split second and certainly worth it for the benefit that it brings.
Overall my first impressions are very good and will consider upgrading to one of the paid accounts in time and once it is worthwhile for me to do so.