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

@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.