CSS: Using custom fonts in websites

Ok, so I thought this was not possible, but in fact it is possible for you to reference a custom font file for a website using CSS… Not only does it works for all the latest browsers, but you can also get it to work with out-dated browsers as far back as IE6!!!

So I hear you begging how on earth this is possible… Turns out it is pretty easy, this easy in fact:

CSS:

@font-face {
 font-family: 'FontName';
 src: url('fontfile.eot'); /* IE9 Compat Modes */
 src: url('fontfile.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('fontfile.woff') format('woff'), /* Modern Browsers */
 url('fontfile.ttf') format('truetype'), /* Safari, Android, iOS */
 url('fontfile.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Okay so you need different files for each type of browser, but nothing in life is perfect… And there’s a website that will generate these fonts for you from your TTF font, head over to:

http://fontsquirrel.com/

Using @font-face

Okay all you have to do once you have the @font-face in your CSS is to apply the “Fallback” to your body css tag, remember to reference the actual font family name first as the user may have it already installed on their machine (miracles do happen!).

body {
 font-family: 'MyFontFamily', Fallback, sans-serif;
}

And your done!!

Found this useful? let my know your comments/suggestions below!

Author: Dean WilliamsI'm a Web Developer, Graphics Designer and Gamer, this is my personal site which provides PHP programming advice, hints and tips

Twitter Facebook Linkedin