about font embedding

fontface

As I recently announced, I’ve been accepted as a HeARTs Speak member as an Aspiring artist who volunteers time to local shelters and rescue organizations to promote adoption and education for animal welfare.

In addition to become a member, I’ve also been helping out with the new HeARTs Speak website since I also work in web development. One of the fun things about this project has been working with embedded webfonts that do not require the use of a hosted webfont service. Here’s a quick howto for using embedded webfonts.

Download Font Files

First, you’ve got to get your hands on the font files. otf and ttf format are the most popular, but read more about browser support for various font files here. Once you have these fonts, you should upload them to your server to be publicly accessible. In WordPress this might be in your theme directory, or in a ~/public_html/fonts/ directory, but this location is highly dependent on what type of application you are running.

Using @font-face

Next, you’ll need to embed the fonts in one of the CSS files. In it’s most simple form, this might look like this:

@font-face {
  font-family: HelveticaNeue-Light;
  src: url(/fonts/HelveticaNeue-Light.otf);
}

This bit of code would be added to a CSS stylesheet that is included throughout your website. The src attribute must point to the publicly accessible URL font file. With this simple @font-face definition, you may add “font-family: HelveticaNeue-Light;” to other CSS selectors to apply the font.

Bold and Italic

If you are using several embedded font files with different weights and styles, you’ll want to embed additional fonts with defined font-family and font-style attributes, such as the in the code shown below.

@font-face {
    font-family: "DejaVu Sans";
    src: url(/fonts/DejaVuSans.ttf);
}
@font-face {
    font-family: "DejaVu Sans";
    src: url(/fonts/DejaVuSans-Bold.ttf);
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url(/fonts/DejaVuSans-Italic.ttf);
    font-style: italic;
}

With the above embedded font-face values, you’ll be able to use font-face family “DejaVu Sans” throughout your site but also include bold and italic styling.

Conclusion

If you are familiar with editing CSS, it should be pretty easy to update to include web font files. If you don’t feel comfortable editing CSS, read more about popular web font services here.

You Might Also Like