This is an old post. It may contain broken links and outdated information.
Octopress comes with awesome support for Google Web Fonts, which lets you quickly and easily add fonts to your web site from Google’s large library, but Google Web Fonts have their drawbacks. Using one Google Web Font will have little impact on your site’s load time, but every additional font you add to your web page increases the page’s load time, as clients must use additional HTTP requests to pull the web fonts from Google’s servers while at the same time loading your page and its contents. Plus, sometimes you want to use a (free and legal) font that’s not in Google’s library.
There’s a workaround—a CSS method named
@font-face (more info), which allows you to host your own fonts on your web server and serve them to clients along with your page. At first glance, this doesn’t seem too terribly different from simply including fonts from a web source like Google, but hosting your own fonts via
@font-face on a web server with keepalive is much quicker than pulling them from a separate server, as far fewer HTTP sessions have to be used to load the page and its contents. Fewer sessions means faster page loading!
While Octopress comes with a ready-made method of adding Google Web Fonts, it’s not set up out of the box to use
@font-face-served fonts. However, it’s pretty easy to change the configuration!