There are many ways to find the perfect typeface for your site design: buying a font from a professional subscription service such as Typekit, Fonts.com or Webtype; finding a free font online, or making your own from scratch. In this article, I’ll focus on the latter two options.

While free fonts are common, it’s rare that they will be provided in all the formats that you need to embed it successfully across multiple browsers and platforms. To achieve this you must use a conversion tool: we’re going to use FontSquirrel in this lesson, but there are alternatives that I’ll discuss at the end of this article.

Before proceeding, ensure that you have the legal right to embed the font. Your rights to the typeface will be made clear in the licensing agreement that came with the typeface. If you’re not completely certain, don’t presume you have the right to convert the font. For this example, we’re going to use the Calluna Sans typeface by Jos Buivenga (exljbris.com), of which the Regular version is free. Reading the EULA for the font makes it clear that the only credit Jos requires for his excellent work is the one I’ve just provided.

I’ve downloaded the OTF (“desktop”) version of the font from FontSpring for free. In the case of Calluna Sans the company also provides a prepackaged webfont collection, but we’re going to go through the complete process of making the webfonts for ourselves, with some bonus tweaks and features.

For the conversion, we’re going to turn to FontSquirrel’s @font-face kit generator. FontSquirrel asks us to add the font file we wish to convert (the CallunaSansRegular.otf file we downloaded earlier), the processing we wish (Basic, Optimal or Expert – the center option is fine) and if the font we’re uploading is legally eligible for embedding. With those three steps completed, the service prompts us to download the completed kit.

In return, FontSquirrel provides us with a .zip file with the following content:

• A demo page showing the converted font successfully embedded in an HTML document, including samples and instructions.
• The font we uploaded, converted into several formats (.eot, .svg, .ttf and .woff) for embedding on different systems
• A generator file to recreate the settings we just used.
• A specimen files folder, containing resources for the demo page.
• A stylesheet.css file with @font-face CSS code we will use to embed the font in our pages.

There are three very important points to understand before you proceed:

1. Just like images and other resources used on your site, embedded fonts must be transferred the local folder that contains our site. Ultimately, those same fonts must be uploaded to the web hosting server to be used by your live web pages.
2. In the generated CSS FontSquirrel has assumed that the fonts will be located directly beside your HTML pages. In most cases, that is incorrect – instead, the fonts will be located in a folder inside your site.
3. While the provided stylesheet is good, there are two significant improvements that we can make that will improve quality of the rendered font on many systems.

Step 1

Move the fonts to their new location. Usually that will be in a fonts folder, located inside the assets folder of your site. Transfer the converted fonts, along with the original OTF file, to that location. You may also wish to change the filenames, removing the regular–webfont suffix from each.

Step 2

We need to alter the CSS that FontSquirrel has provided us to reflect the new position of the fonts, and make two additions. Open the stylesheet.css file provided by FontSquirrel, copy the code, and paste it into the top of your site’s own stylesheet.

The original code looks like this:

@font-face {
	font-family: 'calluna_sansregular';
	src: url('callunasansregular-webfont.eot');
	src: url('callunasansregular-webfont.eot?#iefix') format('embedded-opentype'),
	url('callunasansregular-webfont.woff') format('woff'),
	url('callunasansregular-webfont.ttf') format('truetype'),
	url('callunasansregular-webfont.svg#calluna_sansregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

We’re going to change the font-family name to make it easier to reference, fix the filenames and locations, remove font formats that are no longer required in modern browsers, and provide a few new lines of code to improve rendering. The CSS changes to:

@font-face {
	font-family: 'Calluna Sans';
	src: local('Calluna Sans');
	src: url('callunasans.woff') format('woff'),
	font-weight: normal;
	font-style: normal;
}
body {
	font-family: 'Calluna Sans', sans-serif;
}

In the CSS we’ve added a local option so that if the font is installed on the user’s system, they use that copy, rather than downloading ours, speeding up page rendering time. The result is a high-quality embedded font that will appear on all browsers and platforms.

Other Resources

FontSquirrel may be the most popular and handy conversion service, but it’s not the only one: other options include FontPrep for Mac, and css3FontConverter, a command-line tool for all platforms.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.