Embed Fonts in Your Webpages with the "AT" Font Face Rule

By: Daniel Imbellino
Updated: Feb 28, 2013

The idea of embedding fonts in webpage’s is nothing new. In fact, it was originally implemented in a proprietary manner for Microsoft’s Internet Explorer back in the late 90’s. Today all major browsers support the ability to embed fonts in a standardized way using the “@font-face” rule as defined by the CSS3 specifications.

Embedding fonts in CSS is simple. First you need to create a directory on your web server that will house your fonts. You will then point to that directory when declaring your font, n which you will then be able to use the fonts anywhere you specify the use of a CSS selector, ID, etc, within your pages. Give your directory an easy to remember name.

It’s best to define your embedded fonts at the top of your CSS declaration, and you can embed as many fonts as you wish within a given document. Fonts can be declared directly in the head section of your document within your CSS, or within and external CSS file you point too.

To declare an embedded font you should first name each font with a name you can later call that font with. You will then use the “src” property to point to your font directory and to your given font, and last specify the font format this font applies to like so:

<style type=”text/css”>

@font-face {font-family: robotica; src: url(“embedded-fonts/Robotica.ttf”); format: (“true type”); }

</style>

What we just did was use the “font-family” property to declare a name we will later call using a descriptive name that we specified. You can assign a font any name you like as long as you call it with that name when referring to it. You can also call the same font as many times as you want within your CSS. We then used the “src” property to point to the location of our font that we want to embed in our webpage, in this case our font is “Robotica.ttf” which is housed in our “embedded-fonts” directory. And last we declared the format type for the font we are declaring within the document, in this case it’s a “true type” font.

You can see this font in action within the heading of this page! Now that we’ve declared our font, we can simply use the “font-family” property to call it just like we would any other system standardized font, like so:

<style type=”text/css”>

@font-face {font-family: robotica; src: url(“embedded-fonts/Robotica.ttf”); format(“truetype”); }

#page-heading {font-size: 140%; font-family: robotica; text-align: center; color: red; }

</style>

Font names that are separated by white space should be enclosed in quotes, like so:

#page-heading-two {font-size: 125%; font-family: “robotica italic small”; text-align: justify; color: blue; }

To support your fonts across multiple browsers you will need to include the "WOFF" (Web Open Font Format), "EOT" (Embedded Open Type), and TTF (True Type) fonts in your "@font-face" declarations. You can use this declaration to provide support for all major browsers, including older browsers such as internet explorer 7 and 8:

@font-face {font-family: virgo;
src: url('embedded-fonts/virgo.ttf'); format: ('truetype');
src: url('embedded-fonts/virgo.eot'); format: ('opentype');
src: url('embedded-fonts/virgo.eot'); format: ('embedded-opentype');
src: url('embedded-fonts/virgo.woff'); format: ('woff'); }

Also, you may have noticed we declared the same font twice, once as "opentype" and once as "embedded-opentype", the later is used to support older versions of internet explorer. Font Squrriel offers a font kit generator to convert a single font into several formats at Font Squirrels Font Generator . It's best to test your embedded fonts in all major browsers so that you can make sure your site appears the same to all users. There's no point in embedding fonts that won't function in certain browsers.

As stated, you can declare as many fonts as you wish, and you call those fonts as many times as you like as well. Remember to declare the font format as well whenever possible. If your font is “opentype”, then specify this. “Truetype” and “opentype” formats now have broad support across all major browsers starting Internet Explorer 9+. You can even use Mozillas “Web Open Font Format” fonts with the “.woffp” file extension.

Another thing to consider when embedding fonts is whether or not the fonts you embed have an open license or not. There are plenty of license free fonts available on the web today, so stick with those, and you won’t be facing scrutiny or any legal troubles. If a site declares their fonts to be license free, document this yourself. Any legal action taken against you will never hold up in court if the owner provided the font as a free license.

More Recent Stories
Back To Home