Building a Blog Redux - Web fonts with @font-face and CSS3 (Part 4)

Tuesday, April 24, 2012

This is the fourth post in a series of posts about how I went about building my blogging application.

  1. Building a Blog Redux - Why Torture Myself (Part 1)
  2. Building a Blog Redux - The tools for the trade (Part 2)
  3. Building a Blog Redux - Entity Framework Code First (Part 3)

In previously blog sites that I have maintained, there wasn't much thought what fonts I should be using. The fonts that I would use were either Verdana or Tahoma, because they looked nice and were easy to read. However, in today's modern web, things have changed. People and companies want fonts to distinguish their sites from the crowd. They want a font style that is pleasing to the eye, that compliments their site theme, and when necessary, is easy to read.

I wanted that same things for my site, and I also wanted to learn a little bit on how to implement a fancy font, so I went about choosing a unique nice font for my blog site too.

Here are the requirements I had for my font selection:

  • It had to be free.
  • It had to be fairly simple to implement.
  • It had to be clear and modern looking.
  • It had to also look good on my iPhone.

Its Free

Obviously, when someone makes a font family, they would like to make money off their work so when selecting fonts you have consider the licensing that goes along with them. Fortunately, there are those out their who created their fonts with the intentions of making them free to use.  There is a very large selection, and  a lot great fonts to choose from.

Here are some of the free font sites I looked at.

  • Google Web Fonts: They have a good selection of fonts, and even a way to reference their fonts remotely.
  • The League of Movable Type: They have some really nice fonts, but not a large selection.
  • Fontex: Good selection here.
  • Font Squirrel: Another site with a good selection of free fonts and the site where I ultimately chose my font.

Easy to Implement ( using @font-face)...well Sort of.

@font-face is new rule (will actually it is an old rule that was dropped in CSS 2.1 and then added back in CSS 3) that allows you to add a custom font face to any text on a page simply by adding a CSS style. Unlike other rules, there is no JavaScript needed to get the font to display.

Here's where it gets a bit hairy. Different browsers support different font types, and not all browsers support the same ones. Currently the different types are WOFF, OTF, TTF, SVG, and EOT. Thankfully, sites like Font Squirrel have a @font-face kit generator that will generate all the needed font types for you, as well as generate the styles needed to reference those font types.

You simply choose (a legally obtained) font and then upload it to their site.

Font Squirrell Font Face Kit

The site will churn for a few seconds and then you will receive a link to a font package to download. At that point, you can take the entire package, unzip it, and then place somewhere on your website. The picture below is something like the file package you will receive.

Font type files

The CSS style that is generated looks like this:

@font-face {
    font-family'CantarellRegular';
    srcurl('cantarell-regular-webfont.eot');
    srcurl('cantarell-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('cantarell-regular-webfont.woff') format('woff'),
         url('cantarell-regular-webfont.ttf') format('truetype'),
         url('cantarell-regular-webfont.svg#CantarellRegular') format('svg');
    font-weightnormal;
    font-stylenormal;

}

With the @font-face style reference in my CSS, I then use that font name like any other font on my page.

	font-family'CantarellRegular', Tahoma;

For older browsers that do not support the CSS3 @font-family rule, I am falling back to the Tahoma web font which is supported by virtually all web browsers.

Looks Nice

So what do you think? I think it looks pretty nice. Its clear, and has no jagged edges and easy to read, especially from a mobile device. It's quite handsome.

Looks good on my iPhone

I had to play around with my CSS to get the font sizes to look right, but that was more of problem with my CSS styles than with the font itself.

To be honest, I think the font looks nicer on my iPhone than it does on my laptop browser.

iphone font problems not SVG

Take Note IIS Users:

When I deployed the font packages, one of the things I noticed is that although the font was being serviced, I was getting a 404 response on my WOFF file extension. Here is what I was getting when loaded up Fiddler.

HTTP/1.1 404 Not Found

After doing some searching around, it turns out that by default IIS 6 or higher (currently I am on IIS 7.5) does not have the MIME types for the .WOFF and .SVG fonts registered so I  had to open up IIS and add those changes. Below is a screenshot of where in IIS you go to make the change.

Mime Type Console in IIS

The MIME types are:

  • .WOFF     application/x-woff
  • .SVG       image/svg+xml

Once made those entries, I did not see the 404 errors anymore.

References

Conclusion

I hope you found this post useful, and as always, you can see the code for this website on GitHub.

comments powered by Disqus