Using custom fonts on the web has moved on – no longer do web designers and developers need to rely on the user already having a font, or use other methods such 
as the “Scalable Inline Flash Replacement” (sIFR) or “Cufón” methods of embedding custom fonts.
The @font-face method of including custom fonts within web pages has now been around for some time – since CSS 3. It is supported in Internet Explorer 9 and above, and in Firefox, Chrome, Safari, and Opera.
The font doesn’t need to be pre-installed on the user’s machine. Instead the font is uploaded to a web server along with the other web files that make up the website or the font file can be served from a central repository.
Here at Globalgraphics we have been using the @font-face method in our website development for some time and it’s a very effective method. Of course, there still needs to be a decent fallback for users who are still on a web browser such as Internet Explorer 8.
So let’s take a quick look at how the @font-face method works and this is followed by some links to free and paid-for resources so you can get your hands those all-important cool looking fonts to use on your website.
How to implement the @font-face method on your website
Here’s the basic HTML and CSS code needed to get your web page using a font:
With CSS3, websites can finally use fonts other than the pre-selected “web-safe” fonts.
The example comes from the W3Schools website, where you can see the code in action: http://www.w3schools.com/css3/css3_fonts.asp
You can also take a look at an earlier post on our blog https://www.globalgraphics.co.uk/blog/entry/what-is-font-face-font-face/
Also the Sansation font, as used in the example above, is available on the Font Squirrel website – more about Font Squirrel later on.
Free font resources
Of course now we can use the @font-face rule, this then brings on a whole set of additional questions. The first question I asked myself was what is an EOT file!
And there is the additional issue of font licensing – we cannot simply take any font and use it on a website – not least because when using the @font-face method, the font file is uploaded to the web server too and is therefore publicly available. Many font licenses don’t cover such uses, this includes the fonts that are preinstalled on your computer.
There are, however a number of websites that fill this gap. We’re going to have a look at some of the best free and paid-for font websites that make it easy to use and embed fonts. And you don’t have to worry about creating font formats such as EOT!
The beauty of the free websites is they’re free! But the paid-for sites have a much better range of fonts and they often include fonts from world-famous font-foundries or fonts that are not available on the free sites.
If you are creating commercial websites and your client wants to use a specific font, sometimes your only avenue is to use the paid-for websites.
Font Squirrel
Font Squirrel is an excellent resource for free fonts, for both commercial and personal use. And there are lots of fonts that can be used with the @font-face embedding method.
The website even has a section containing only the fonts that can be embedded on websites and where you can download a ready-to-use “@Font-Face Kit”: http://www.fontsquirrel.com/fontface
The website also contains a very handy “@Font-Face Generator” – if you have a font file (that is eligible for @font-face embedding) it will build all the necessary font files, HTML and CSS for you: http://www.fontsquirrel.com/fontface/generator
A quick note about “Sub-setting”. In order to make smaller font files, most of the @Font-Face Kits contain only the glyphs (i.e. characters) needed for English and basic punctuation. So if you need a particular language, other than English, you can select a language option when you download the kit, or you can use the @Font-Face Generator which has additional sub-setting options.
Google Web Fonts
Google Web Fonts (http://www.google.com/webfonts/) is a relative new-comer, but has all the advantages of Font Squirrel. All of it’s fonts are free to use and embed in website. It has some advantages over Font Squirrel however.
Firstly, Google Web Fonts has more options for viewing the font, so you can quickly see how it looks in sentence, paragraph and so on. It also has a useful “Add to Collection” feature.
But, secondly, and more importantly, the beauty of Google Web Fonts is that you don’t need to upload the font files to your web server. This has a number of advantages – not only will it simplify your coding, but because the font files are being served from a central repository, if a user has encountered that font elsewhere they will have already downloaded the font and therefore your website should load that little bit quicker.
Some of the paid-for font resources
The advantage of using a paid-for website is that the fonts would otherwise be unavailable for web use, or wouldn’t be available using the @font-face method.
This brings many of the fonts that were previously only available for print projects into the hands of web designers and developers. In most cases, even if these fonts were available for use on the web using methods such as sIFR, the costs are comparable when you consider that a font license would still have needed to be purchased separately for the website.
Typekit
Typekit (https://typekit.com/) began life in 2008 and was subsequently bought by Adobe in 2011. One of the original websites of it’s kind, it bought commercial fonts to webpage through a special kind of licensing agreement.
To use a font you pay on a subscription basis (though there is a number of subscription plans available based on your need – including a free subscription plan, obviously with restrictions).
There are many fonts available from leading font-foundries such as Bitstream, FontFont, and smaller ones such as P22 and Larabie.
Once you have selected a font and a subscription package, you can use the font on your website via a single line of code in a similar way to how Google Web Fonts work.
FontShop
One of my favourite websites for fonts, FontShop (http://www.fontshop.com/fonts/webfonts/) is an independent font retailer.
They sell web fonts specifically for use with @font-face with the ability to use and upload the font to your own web server along with your other web files.
Once you’ve purchased your font you can also elect to have this served via the TypeKit service – so you get the benefits of using the font on your website via a single line of code in a similar way to how Google Web Fonts work.
There are many special web versions of popular fonts such as the FF Din and FF Meta families.
Fonts.com
If you have come from a print-design background, then you’ll recognise these fonts; Futura, Helvetica, Univers. Fonts.com (http://www.fonts.com/web-fonts) bring these famous fonts to the web. As part of Monotype Imaging, it comes as no surprise that Fonts.com makes fonts such as these available.
Fonts.com uses a similar subscription model to Typekit.com and does have a free subscription option, again with restrictions. Once you have selected a font and a subscription package, you can use the font on your website via a single line of code in a similar way to how Google Web Fonts work.
In conclusion
Whether you use a free or paid-for font website, there are lots of options where you can try custom fonts on your website for free. So give it a go!
For most personal and commercial web projects, Font Squirrel and Google Web Fonts will suffice for your custom font needs. If you, or a client, has a specific need for a commercial-only font, then your needs are now well met by sites such as Typekit – and the range of fonts being made available is getting bigger and bigger. About time too!
