Easy Cross-Browser @font-face Solution

So you want to use a custom font on your website and you want it to be search-engine friendly, support multiple browsers (including IE6), and you want to use a pure CSS solution because you’re tired of the work involved with sIFR and cufón. Well, @font-face to the rescue.

Convert Your Fonts:

Different browsers require different types of fonts. For example, Internet Explorer requires .EOT and other browsers will require .SVG, .TTF, or .OTF font formats.

Chances are, you probably have the .TTF or .OTF version already installed on your machine. Not a problem, there is an awesome website that will:

  • Convert your fonts to all of the required formats
  • Allow you to make your font file web-only so that people can’t steal your font and install in on their machine
  • Strip out any un-used characters to reduce the file size of the font
  • Automatically generate the fonts and the CSS for you to use the fonts

Here’s the website that can do it all:

http://www.fontsquirrel.com/fontface/generator

How to use @font-face:

@font-face lets you associate a font-family name of your choosing with imported fonts. You can also specify multiple versions of the same font file which you will need to do in order to support the various browsers.

@font-face {
   font-family: 'FSAlbert';
   src: url('fonts/fs_albert-webfont.eot');
   src: local('*'), url('fonts/fs_albert-webfont.ttf') format('truetype'),
      url('fonts/fs_albert-webfont.svg#webfontHPkZa0j3') format('svg');
}

h1 {
   font-family: 'FSAlbert';
}

Notice that I’ve put in an asterisk in the local param. Assuming the user does not have a font installed called *, this will force the browser to use the remote font files for the designated font name.

Published byJosh McGinnis

Josh is a software engineer, leader, startup advisor for the LA Chamber of Commerce and consultant residing in the Los Angeles area. Josh is passionate about helping entrepreneurs and businesses reach their maximum potential.

No Comments

Post a Comment