Blog

11 Sep
2012

css3 Icon Logo

How to use CSS @font-face for all browsers


I have always thought that using custom fonts via @font-face was only possible via CSS3, but actually it goes as far back as ie6 with CSS2.

How to do this:

1. To get around the compatible with different browsers it has to be in several different formats (.woff, .ttf, .svg and .eot).

  • TrueType (.ttf) Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
  • EOT (.eot) fonts for Internet Explorer 4+
  • WOFF (.woff) fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
  • SVG (.svg) fonts for iPad and iPhone

2. It must be FREE for using over the internet. Here is a list of websites which do FREE fonts.

3. Implement it via CSS using the following code.

@font-face {
    font-family: 'font_class_name';
    src: url('font_name.eot');
    src: url('font_name.eot?#iefix') format('embedded-opentype'),
         url('font_name.woff') format('woff'),
         url('font_name.ttf') format('truetype'),
         url('font_name.svg#font_class_name') format('svg');
    font-weight: normal;
    font-style: normal;
}

p {
    font-family: 'font_class_name';
    color: #FF0000;
}
Posted in: < PHP and HTML and CSS >
me@grafxflow avatar

me@grafxflow


I am a Full-stack Developer who also started delving into the world of UX/UI Design a few years back. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!

Visitors also viewed these posts


Add comment

Add comment