Blog ›
11 Sep
2012

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
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