Written by me@grafxflow

11 Sep, 2012

0

4,832

How to use CSS @font-face for all browsers

PHP and HTML and CSS

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

Topics

@font-face browser compatibility css custom fonts fonts how to ie6 tips

Share this article

Visitors also read these Articles

12 Jan, 2010

Duplicate object in C4D

25 Mar, 2010

HTML Special Characters and CSS content code

Deus Ex 1 GOG wineskin

13 Jan, 2019

Install Deus Ex GOG with Wineskin on Mac OS X

Add comment

Smart Search

Categories

3D Animation 13 CMS 34 Database 3 eCommerce 4 Flash Shockwave 2 Frontend Frameworks 3 Game Reviews 11 General Discussion 17 JavaScript Frameworks 4 Mac OS X 20 Motion Graphics and Video 34 PHP and HTML and CSS 41 PHP MVC 14 Website Server 8

Latest Articles

Darth Maul and Micro-Organisms: Inside George Lucas's Cancelled Star Wars Sequel Trilogy

Darth Maul and Micro-Organisms: Inside George Lucas's Cancelled Star Wars Sequel Trilogy

Views: 36

How to Automatically Convert DVD Subtitles to SRT on Mac

How to Automatically Convert DVD Subtitles to SRT on Mac

Views: 29

The $4 Billion Divorce: Inside the Awkward, Painful Sale of Lucasfilm to Disney

The $4 Billion Divorce: Inside the Awkward, Painful Sale of Lucasfilm to Disney

Views: 33

The Rift That Broke the Whip: Inside Lucas, Spielberg, and Harrison Ford's 'Furious Rows' Over Indiana Jones

The Rift That Broke the Whip: Inside Lucas, Spielberg, and Harrison Ford's 'Furious Rows' Over Indiana Jones

Views: 172

Breaking the Endless Loop: Why Star Wars Needs an Origin Story

Breaking the Endless Loop: Why Star Wars Needs an Origin Story

Views: 52

Popular Articles

Markdown Syntax Cheatsheet

Views: 344,818

How to install Gitlab CE and Vagrant on macOS

How to install GitLab CE with Vagrant on macOS

Views: 310,203

kernel_task is throttling the CPU

Disable macOS 11 (Big Sur) 'kernel_task' which is throttling the CPU

Views: 225,321

C4D shadow catcher

Shadow Catcher plugin in Cinema 4D - Part 1

Views: 175,825

Defective AMD GPU fix on Macbook Pro 2011

Views: 153,116

Popular Tags

after effects apple apple motion c4d cinema 4d css css3 delete deus ex dreamweaver episodes final cut fix free game review hide html install internet explorer javascript joomla jquery laravel mac os 10 mac os x macOS motion php plugin problem quick keys star wars terminal tip tips tutorial tv twitter wineskin wordpress

me@grafxflow

Founder, 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. I build lighting-fast dynamic content engines with Laravel, Winter CMS and Tailwind CSS. Thanks for stopping by!

Get in touch →