Home > Web Design > @font-face = Nice!

@font-face = Nice!

July 18th, 2010 Posted in Web Design

I’ve been experimenting with @font-face, a CSS3 native rule, for font replacement. Years ago, I tried out sIFR (Scalable Inman Flash Replacement) on a few sites, but found it a bit too hacky, quirky, and not quite represented well across all browsers. Plus, you had to incorporate a Flash file and JavaScript to get it done. So, back to web-safe fonts I went. But the results of @font-face so far have been one smooth operator, giving you selectable and searchable type that looks the same across all major browsers.

Goodbye, Georgia…For Now.

The headlines and body font of my Philadesigns site used to be Georgia, but it is now another serif-based font called Vollktron, which is free to use commercially under the OFL (Open Font License).

Font Squirrel: Loads of Fonts and Font Format Generator

Under the OFL, there are tons of fonts to choose from, many of which can be found at Font Squirrel. Font Squirrel also has a kickass @font-face Generator that creates all of the font formats needed to support all major browsers (yes, even IE7 and IE8), allowing you to get nuts. Font Squirrel also gives you the CSS code to paste, with everything ready to download in a .zip file. Supah.

Font Formats

Depending on the browser, different font format files are needed to display the font. So, you’ll need to call a bunch of fonts in the CSS like this example with the Vollkorn Regular font:

@font-face {
	font-family: 'VollkornRegular';
	src: url('vollkorn-regular-webfont.eot');
	src: local('Vollkorn'), 
	local('Vollkorn-Regular'), 
	url('vollkorn-regular-webfont.woff') format('woff'), 
	url('vollkorn-regular-webfont.ttf') format('truetype'), 
	url('vollkorn-regular-webfont.svg#webfontGeigTbV2') format('svg');}

As stated earlier, Font Squirrel provides you with the CSS and fonts. You just need to add this to the CSS, copy over the font files (in a suitable directory), and then add the following to your whatever element tag you want to apply the font:

body {font-family: VollkornRegular, Georgia, Baskerville, Garamond, "Times New Roman";}

If the browser can’t read any of those fonts, then it will jump to Georgia. I’ve successfully tested @font-face in the following browsers:

  • IE7 (PC)
  • IE8 (PC)
  • Safari 5.0 (Mac)
  • Safari Mobile (iPhone)
  • Firefox 3.6.6 (Mac)
  • Chrome 5.0.375.99 (Mac)
  • Opera 10.60 (Mac)

Learn more about what font formats are loaded by browser type.

Updated!

Due to a lag in load time, I have removed @font-face and have reverted the body font back to Georgia.

    Leave A Comment:

    • Comments:

    ↑