Hosting them yourself is also pretty easy. I recently moved away from Google Fonts for this site using this same process.
Selecting a font
Making the font available for use
Let’s say we want to use Lato and allow for bold, italic, and italic bold. This is how we would make the font accessible from CSS using Google Fonts:
To self-host, the process is slightly different.
First, we must download the files and put them in a folder, such as
Ideally we want to have each font variant (regular, bold, italic, bold + italic) in three formats:
.woff for modern browsers,
.eot for old Internet Explorer, and
.ttf for other browsers. Font Squirrel has an online tool to convert easily between them if you’re missing any.
Now it’s just a matter of some simple CSS:
Your fonts should now be available.
Be sure to adjust the
url paths if you place your fonts in a different directory.
Applying your font
Simply apply your font in CSS as usual (this will also work with Google Fonts or Typekit):
Now you’re good to go!
If you really want to get fancy, Google Fonts has a feature called subsetting that lets you strip unused characters out from the font before transmitting it to clients, saving bandwidth.
You basically have two options if you want to do it yourself. The easy way is to use FontSquirrel’s excellent Webfont Generator, and use the subsetting options there.
The hard way is complicated and you will need to work out the exact details, but a basic setup would be:
Determine what characters you use
If you have a static website, you might be able to do this fairly easily, perhaps by finding every character displayed on any page (accounting for HTML encoding).
Set up a pipeline to subset your fonts
Use the generated files as above
Before going down this route, you probably want to measure your maximum possible speed improvement and see if it’s actually worth the trouble.