Using web fonts on publishing platforms

We often get requests from customers wanting to know how to integrate web fonts into a blog, content management system or other type of online publishing platform. Here’s our guide.

It’s a common request on our helpdesk: “How can I use a web font on my WordPress/Blogger/TypePad blog?” And, unfortunately, there's no straightforward answer.

To start with, we need to break these online publishing platforms down into two broad types:

Content Management Systems (CMS), that require the user to download and install software on their own server, such as WordPress, Movable Type, Drupal, Joomla or Typo3;

and Online Publishing Platforms that are provided as a service, often for free or with incremental upgrade options. Blogger, Tumblr, Typepad, WordPress.com (not to be confused with WordPress.org which is in the first category) or Flavors.me are some examples.

This article will deal with the first type, Content Management Systems; we’ll address the very different challenges of working with hosted publishing platforms in a later article.

Using web fonts in a CMS, the essentials:

The basic, minimum requirements for using web fonts in a self hosted Content Management System are as follows:

  • A CSS editor built into the admin interface.
  • FTP access to your server’s root directory for uploading your web font files.
  • Some knowledge of CSS typography properties and associated HTML tags.

A built-in CSS editor

There are hundreds of free and commercial content management systems out there, and many more theme developers and providers. However, not all products allow CSS editing. If custom typography is important to you (and of course it is) you should make certain that the product you are selecting offers a CSS editor as part of their feature set. If editing the CSS isn’t possible, then you are in roughly the same position as a user of a hosted service.

Each of the available systems and themes will handle CSS editing in a slightly different way, making it difficult to offer specific advice about using built in CSS editors. The best to place to go will be the developer’s own site or their user forums.

It's important to only edit the CSS through the system's admin interface. Making any changes to the system or theme files on which the website runs can cause issues. The most widely used, non-proprietary systems like WordPress, Drupal and Joomla, as well as the free and commercial themes used to style them, will be regularly maintained and upgraded by their developers. Those upgrades routinely overwrite the core system files while leaving user generated data (blog posts, theme settings, media resources) untouched. This means that any changes the user makes to the underlying code will be reversed with the next round of upgrades.

Editing the CSS through the admin interface will save those changes alongside the other user managed theme settings and will be left intact when the system or theme is upgraded.

FTP Access

Normally, the web font resource files are stored in a directory next to the CSS file that contains the @font-face declaration (for a short, clear path to the files). For same the reason that we won’t edit the system or theme files, it’s probably best not to save your web font files anywhere other than your site’s root directory. This, at least, will mean specifying a relatively short path in the @font-face declaration, more of which next.

Editing the CSS

Open the CSS file that came with your web font kit download in any plain text editor (like TextPad on a PC or TextEdit on the Mac) and copy and paste the full code (including the license information please) to your site’s CSS editor.

The first things to change are the src:url () pointers in each @font-face declaration. Our kit assumes that you’ll be putting the web font files in a directory called Webfonts, next to the CSS file containing the @font-face declaration. As mentioned earlier, this is probably not the case. If you have placed your fonts in your site’s root directory, then you will need to specify the full path to the files, rather than an abbreviated, relative path. Your @font-face declaration should look like this:

@font-face {
font-family: "My_Webfont";;
src: url (http://www.mysite.com/webfonts/1A56EC_0_0.eot);
src: url (http://www.mysite.com/webfonts/1A56EC_0_0.woff);
src: url (http://www.mysite.com/webfonts/1A56EC_0_0.ttf);
src: url (http://www.mysite.com/webfonts/1A56EC_0_0.svg);
}

Each web font format (.eot, .ttf, .woff, .svg) will need a full source URL to be specified in each @font-face declaration, and each font will need its own @font-face declaration.

You can test your resource links by simply pasting the path into your browser's address field. If the path is correct, you will be prompted to download the font files to your hard disc.

Again, the sheer multitude of available content management systems and accompanying themes makes it difficult to provide specific instructions for editing the CSS. Some might offer a font selection tool for each HTML tag in the theme, for <body>, <p>, <h1,h2,h3,h4> and so on. Whether these might allow users to specify a wildcard name, "My_Webfont" , is impossible to say. The most reliable method is simply to ignore those options in the interface and write these CSS declarations yourself, in the system’s CSS editor.

body {font-family: "My_Webfont";} */will change all text throughout your site to your new web font./*

p {font-family: "My_Webfont";} */will change all paragraph text to your web font./*

h1, h2, h3, h4, h5 {font-family: "My_Webfont";} */will just change the headers./*

Targeting a specific element within the layout, such as the site name or page headers, might take a bit of trial and error. The other relevant HTML tags are <li> and <ul> for numbered and bulleted lists respectively, but as it’s unlikely that you will want to target these layout elements to the exclusion of the others (they will inherit the style assigned to <p> tags unless instructed otherwise) it will be safest to assign the web fonts to the body, paragraph or header tags, as required.

Summary and general advice

If you want to use just one font family throughout your site, then pick a typeface with regular, bold, italic and bold italic weights and turn on style-linking in the webfont kitbuilder. All you need to change in the CSS (once you’ve pasted in the @font-face declarations from the kit download) is the font-family property in the body style to your new web font.

In general:

  • Keep your typography simple, and don’t try to be too ambitious and use multiple fonts or create complex CSS classes.
  • Use only one or two fonts.
  • Changing headers will have a bigger impact than changing the paragraph font, and will be less risky when it comes to decent rendering and legibility issues.

Good luck! And remember, we’re always keen to see what our customers are making with our fonts. Use our submission form and send us your work.