Back in the good old days, when we walked five miles to school in the blisterin’ heat and the freezin’ rain, we didn’t have web fonts, and we liked it! We made our web pages with Front Page in Comic Sans the way God intended.

Then them big-city hipsters came along with their crazy ideas about typography and consistency, and now we have to worry about this:

IE IE Chrome Chrome Firefox Firefox Safari Safari Opera Opera
TTF / OTF 9.0 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 36.0 35.0 26.0
SVG 4.0 3.2 9.0
EOT 6.0

As an old-timer who’s already been to this rodeo, I’ll reckon it up for ’ya. You’ll need to juggle three different kinds. Once you know these three, the rest of ’em ain’t even worth considerin’.

These formats are the ones most of us already have on our computers. They’re well-supported as web fonts, but they’re big, and they’ll slow down your page load. You can still use them as web fonts, but it would be best to convert them to WOFF or WOFF2 first.

This web-optimized format is smaller, loads faster, and is almost as widely supported as TrueType and OpenType.

In an Ubuntu-based or Debian-based Linux, you can use the woff-tools package to turn TrueType and OpenType fonts into WOFF files — no new-fangled font service required!

# INSTALLS sfnt2woff AND woff2sfnt
sudo apt-get install woff-tools

Once installed, you can use the sfnt2woff and woff2sfnt tools to convert to and from WOFF:

# CONVERTS TTF OR OTF FONT INTO A WOFF FONT
sfnt2woff ./filename.ttf

# CONVERTS WOFF FILE BACK INTO OPENTYPE FONT
woff2sfnt ./filename.woff > ./filename.otf

This is an extra-compressed version of WOFF, though not as well supported yet. It’s a good idea to include both WOFF and WOFF2 files in your stylesheets. That way newer browsers can use the super-optimized WOFF2 format, and older browsers can fall back to the older WOFF format.

To convert to and from WOFF2, you’ll need to fetch and build Google’s woff2 tools from GitHub. Here’s how to do that on an Ubuntu-based or Debian-based Linux:

# INSTALL BUILD TOOLS
sudo apt-get update
sudo apt-get install build-essential

# GET LATEST WOFF2 CODE
git clone --recursive https://github.com/google/woff2.git
cd woff2
make clean all

# INSTALL PROGRAMS FOR SYSTEM-WIDE USE
sudo cp woff2_compress /usr/bin/
sudo cp woff2_decompress /usr/bin/

Once installed, you can use the woff2_compress and woff2_decompress tools to convert to and from WOFF2:

# CONVERT ttf/otf/woff TO woff2 AND BACK
woff2_compress myfont.ttf
woff2_decompress myfont.woff2

Now that you’ve got your fonts all processed, it’s time to put ’em to work!

site.css

@font-face {
   font-family: 'Charter Regular';
   font-style:  normal;
   font-weight: normal;

   src: local('Charter Regular'),
        url('charter.woff2') format('woff2'),
        url('charter.woff') format('woff');
}

The local() attribute tells the browser the local name of the font, so the browser can skip downloading fonts that are already on the user’s computer.

Several different formats of the same font can be specified under the src attribute as a fall-back for differently abled browsers.

If you ever run into one of them pesky TrueType fonts that just won’t WOFF no matter how hard you try, mosey on down to tom7’s website and take a gander at his embed tool. You’ll be glad you did.


← Older   Newer →

Leave a Reply


<a href="" title="">, <abbr title="">, <acronym title="">, <b>, <blockquote cite="">, <cite>, <code>, <del datetime="">, <em>, <i>, <q cite="">, <s>, <strike>, <strong>