Typography matters and online typography has made a big advance over the last couple of years. There are several approaches for integrating custom fonts to standards-compliant web pages - some of them use custom scripts (Cufon, sIFR, FLIR), and others use pure-CSS solutions, like @font-face. All of these technologies have valid arguments both for and against their use, but probably the most flexible and safest, and in general the best method for using various non-system fonts on your web site is @font-face. @font-face is a CSS rule which allows you to use any font on your website instead of using a few „web-safe“ fonts that are common on all client systems.
Basic usage
When using @font-face, you need a font file in your website root folder, and a CSS rule to include it to your pages. @font-face CSS rule is very simple and elegant: it defines the font and points to a font file placed on the server in root folder of your website. After the initial declaration, custom font can be used by applying standard font-family rule.
Here is an example of a custom font-face which is used to style a paragraph section:
@font-face {
font-family: MonoxFont;
src: url('MonoxFont.otf');
}
P
{
font-family: MonoxFont, Times New Roman, serif;
}
That's the essence and the basic implementation. Now we're gonna go trough the additional options and adjustments.
Getting fonts
The easiest way to get web fonts is to pick them up from various web sites that hold vast font repositories of free or commercial fonts.
Here are a couple of sites I visit regularly:
For the purposes of this article, we will use fontsquirrel.com, a repository where you can download fonts and generate the acompanying @font-face CSS rules.
Generating everything we need
To get started, you need to get your font first. Double check that you have it in all the formats that are necessary for cross-browser functionality: as always, different browsers support custom fonts using different file types.There are a lot of different font file types, but for @font-face integration with full browser support, you need .ttf, .woff, .svg and .eot font file types.
Font file extensions per browser:
| Web browser |
Font file |
| Internet Explorer |
.eof |
| Mozilla Firefox |
.woff |
| Google Chrome |
.ttf |
| Safari |
.ttf |
| Opera |
.svg |
@font face is supported in all active versions of browsers, and also on all iOS and Android platforms.
If we use web @font-face generators to use fonts on your website, you will be supplied with all font files you need.
Lets go back to our downloaded font. To get all font files you need, simply upload your font file to one of the @font-face generators, such as FontSquirrel or CodeAndMore.
For example, Fonsquirrel lets you easily generate all font files just by selecting conversion. Pick Optimal conversion for performance and speed, but if you know what you are doing, you can choose Expert conversion and adjust its options manually.
When you are done, you will get the package for download, containing font files, css code, a specimen and some sample files. Your downloaded files look like this:
Practicly, you need only font files and css code.
CSS code that FontSquirrel generates:
@font-face
{
font-family:'MonoxFont';
src: url('MonoxFont.eot'); /* IE9 Compat Modes */
src: url('MonoxFont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
url('MonoxFont.woff') format('woff'), /* Modern Browsers */
url('MonoxFont.ttf') format('truetype'), /* Safari, Android, iOS */
url('MonoxFont.svg#MonoxFont') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
After downloading the package from the generator, just copy the css code into your css file and move the font files to your website's root folder.
If you are using MonoX, just copy font files into folder Fonts created into App_Themes /YourThemeName, and copy css code to your monox css file.
When you look at generated css code, you will notice that besides 'font-family' and 'src' you have 'font-weight' and 'font-style' definitions. These will help you define which font to use when you're changing the style and weight of element trough css 'font-weight' and 'font-style' rule. Note that this method can sometimes confuse particular browsers, so they can start using faux bold and faux italic fonts. Because of that, the method that FontSquirrel uses is probably the best one: for each font weight and style combination, you will define a different font using font-weight and font-style set to normal:
Regular font style:
@font-face
{
font-family:'MonoxFont-regular';
src: url('MonoxFont-regular.eot');
src: url('MonoxFont-regular.eot?#iefix') format('embedded-opentype'),
url('MonoxFont-regular.woff') format('woff'),
url('MonoxFont-regular.ttf') format('truetype'),
url('MonoxFont-regular.svg#MonoxFont-regular') format('svg');
font-weight: normal;
font-style: normal;
}
Italic font style:
@font-face
{
font-family:'MonoxFont-italic';
src: url('MonoxFont-italic.eot');
src: url('MonoxFont-italic.eot?#iefix') format('embedded-opentype'),
url('MonoxFont-italic.woff') format('woff'),
url('MonoxFont-italic.ttf') format('truetype'),
url('MonoxFont-italic.svg#MonoxFont-italic ') format('svg');
font-weight: normal;
font-style: normal;
}
Bold font style:
@font-face
{
font-family:'MonoxFont-bold';
src: url('MonoxFont-bold.eot');
src: url('MonoxFont-bold.eot?#iefix') format('embedded-opentype'),
url('MonoxFont-bold.woff') format('woff'),
url('MonoxFont-bold.ttf') format('truetype'),
url('MonoxFont-bold.svg#MonoxFont-bold ') format('svg');
font-weight: normal;
font-style: normal;
}
When you style a particular element you simply use different font-family rule:
.regular-text
{
font-family: MonoxFont-regular;
}
.italic-text
{
font-family: MonoxFont-italic;
}
.bold-text
{
font-family: MonoxFont-bold;
}
This way you don't use font-weight and font-style rule for elements that use your font.
Licence
Today you can find a lot of free web fonts online, and in most cases they are absolutely free to use, but in some cases they have certain restrictions. So, if you use a free font, you should definitely read the license to avoid potential copyright issues.
You must be very careful with the licensing terms.
When you pick a web font for your website, you should also consider several things.
- Size (in kB) of font files can slow down your website performance.
- If you don't need it, you can 'clear' a character set inside the font file, by deleting the unused characters.
- On the other hand, if you have international site with localization options (such as MonoX – based websites) you should consider fonts with all important international characters (mostly found in 'Pro' versions of font packages).
-
As you can see, using @font-face method is very simple and effective, and since typography is very important aspect of the modern web design, @font-face is inevitably the method of choice for every serious web designer.