Web Fonts with font-face

I switched this site off of TypeKit @font-face alternatives. TypeKit increased the page load-time by a noticeable amount and since I moved to a static blog system, I’m trying my hardest to keep the site lean.

Here’s a brief tutorial on using custom fonts without JS or services like TypeKit. There is also an excellent tutorial at NiceWebType.com

@font-face fonts can be loaded by CSS declarations. There are many different fonts available around the web and there is a service to convert any font to an @font-face format.

I downloaded several fonts from Font Squirrel. There is a large collection to choose from but I chose Gandhi Serif for the body text and Colaborate for the headers and sidebar. Both fonts were available with several variations such as thin and heavy and both were free.

Gandhi Serif

Colaborate Thin Regular

Next, I loaded the fonts into a font directory in my site’s path under “/theme/font/”

To load the font, I added the following CSS declaration for each font variation I wanted access to:

:::css
@font-face {
    font-family: 'ColaborateThinRegular';
    src: url('/theme/font/ColabThi-webfont.eot');
    src: url('/theme/font/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
         url('/theme/font/ColabThi-webfont.woff') format('woff'),
         url('/theme/font/ColabThi-webfont.ttf') format('truetype'),
         url('/theme/font/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

The CSS loads the various files that are required for rendering the files in each of the different browser formats.

Styling the body text is just as simple. Just load the font as any other standard font:

:::css
body {
    font-family: GandhiSerifRegular, Garamond, Georgia, serif;
    font-size: 100%;
}

I haven’t noticed any impact on page loading and a negligible increase in page size. Overall, I like this solution better than TypeKit.