CreatiFace.com

Optimize Web Fonts to Increase Performance

@font-face is one method of website text replacement, in addition to several other popular methods such as Cufon, Google Font and Typekit.

Thus we will not rely anymore on the boring default web font like Arial, or using images to replace non-standard fonts to be included on our website. Using @font-face is also quite easy and inexpensive compared to other options, you can simply use CSS to include the fonts, like this:

Web Fonts: @font-face
@font-face {
  font-family: "Example Font";
  src: url("http://www.example.com/fonts/example");
}

And as the @font-face has actually been included in CSS2 specification, you can assure that the fonts you included will be supported in old browsers.

Browser support
IE5.5+ FF3.5+ SA3.1+ OP10+ CH2
Partial Full Partial Full None

Source: SitePoint

Unfortunately there is one constraint that we will encounter when using @font-face, that is the web loading time. Well, if your site has very low traffic this will not be a big deal, but when your website has a very high traffic this can lead to unnecessary bandwidth consumption.

Case Study

In this example, I have created an HTML document and use two custom fonts, JuneBug for the Logo and the other, Socialico for social media icons.

Logo & Socialico

Now let’s see the web page load time through Firebug NET panel.

Web Font: First Load Time

As you can see above, the page has total page size of 48.1Kb with 3.61s load time. This figure is quite large for a web page that consists of only a few letters. So, let’s do some optimization.

View Demo

Custom Subsetting

We will optimize the font by removing some unnecessary characters, and we will do so by using @font-face generator from Font Squirrel.

First, upload the fonts and select the Expert option. Then, in the Subsetting row, select Custom Subsetting.

Web Fonts: Custom Subsetting

For the first font — JuneBug — I only use it to write LOGO. so that we will only need the L, G, O letter and a dot.

Web Font: Single Characters

While for the Socialico font, we only use it to show Facebook, Twitter and Dribbble icon which correspond to the following f, l, and b letter.

Web Font: Single Characters 2

Download the fonts, apply them and let’s see how it turns out.

Web Font: Second Load Time

Now, the web page has only 5.9Kb total page size with 1.9s on load times. That way we have managed to save the page size and bandwidth of more than 50%.

View Demo

Final Thought

By optimizing some elements on our website — not limited to the fonts, we can save our hosting spaces and bandwidth consumption, which means we can also save a few dollars to meet those needs, especially for you who are just going online.

I hope this tip can be useful for you and If you have any comment or want to add something I may have missed, feel free comment it below.

Thanks for reading the tip.

Leave a Reply

We welcome for every constructive commment and respond. However, all comments will be moderated prior to publishing and rel=nofollow is in use. So, please do not use spammy ketword name

(required)

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">