Beautiful Typography for WordPress and BuddyPress Using the @Font-Face Rule

helloworldGive your BuddyPress default theme a little kick with the @font-face CSS rule. Custom fonts are the quickest way to personalize your social networking environment. Fonts allow you to insinuate tone, create a more engaging site for your users, and consistently maintain your branding without having to produce dozens of image files for headers throughout your site. You cannot overestimate the power of a well-chosen font. Let’s face it, Arial, Helvetica, and Times New Roman are played out, because for the past ten years the internet has been limited to a handful of standard fonts. Font replacement using JavaScript or Flash is one option, but it has its limitations. The great benefit of the @font-face method is that it doesn’t replace your regular fonts with images. It uses the actual font and users can still highlight and copy the text.

What is @font-face and how does it work?

@font-face is a CSS rule that allows designers to use non-standard web fonts that are not installed on their user’s machines. The fonts are stored on the server and referenced in the CSS file. This makes it possible for designers to use TrueType and OpenType on the web by linking them in a way similar to linking images. Internet Explorer relies on the proprietary Embedded Open Type (.eot) format for @font-face to work, so it’s necessary to reference both this type and the the one for other browsers. Each form of the font-family (i.e. italic, bold, etc) must be declared in your CSS using the @font-face rule.

kitsI was inspired by this video tutorial on @font-face at NetTuts and decided to give it a try with BuddyPress to see how quickly I could change the typography landscape of the default theme. Licenses will vary for fonts, so double check to make sure you’re using it appropriately and give credit where it’s due.

If you’re not a CSS master, don’t worry, this will be as easy as copy and paste. One of the best resources for @font-face kits is a service called Font Squirrel which offers hundreds of high-quality, 100% free for commercial use fonts. They make it easy to utilize the @font-face rule in your theme. Here’s a quick step-by-step:

Step 1: Select a Font Kit from Font Squirrel

For this tutorial we’ll try the font called Helsinki just for fun. Find this font or another of your choice among the kits and download it by clicking on “Get Kit.”

The kit will contain the following:

  • Original TrueType or OpenType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome
  • EOT fonts for Internet Explorer 4+
  • Demo.html and stylesheet.css so you can get going fast

Step 2: Upload the Font Files to Your Theme Directory

Step 3: Declare the Font Face

If you’re using the default BuddyPress theme, open up the bp-default/_inc/css/default.css file and paste in the font declaration from the kit. It should look something like this:

@font-face {
    font-family: 'HelsinkiRegular';
    src: url('helsinki.eot');
    src: local('Helsinki Regular'), local('Helsinki'), url('helsinki.ttf') format('truetype');

Step 4: Call the Font using the Font-Family

Here is one example for headers:

h2 {
font-family: HelsinkiRegular, arial, helvetica;

If you want to change the font in the menu, try something like this:

#nav {
font-family: HelsinkiRegular, arial, helvetica;

You can use Firebug to target the CSS selectors with your new font or use multiple fonts in combination. This a quick way to add some character and customization to your BuddyPress theme. @font-face can also be used with WordPress and WPMU without any problems. Have fun playing with fonts and let us know if you have any questions about how to implement it.


Comments (9)

  1. seriously are you looking INSIDE my brain?! This is two days in a row that you’re simply doing the same stuff as I’m doing.. I’ve been using Typekit for a while, but I want to release a Child theme and this is what I’ve ended up doing.

    Great quick tutorial!

  2. Love it!

    Thank you so much for this tutorial. I’ve been trying to use @font-face since a while ago, and never couldn’t make it work…until now =)

    Great tip on the Font Squirrel site.
    ~Happy css-coding everyone!

  3. Hello.

    I did everything exactly by the instructions. I’m building a multilingual website. English and Bulgarian. In English the new font, which is FuturaOrto, looks fine. But it’s not working in the Bulgarian version. The font is Cyrillic but not working.

    Any idea?