Mywebdunia's Blog

What is @font-face

Generally, we’ve been limited to using the fonts pre-installed on MS Windows, Mac and Linux OSs. But now CSS3 has brought an end to it. Increasing support of the CSS3 @font-face allows us to load a font onto our servers, link to and name that font in our CSS, with the font-face we can use any font that designers uses it into their designs.

How to use @font-face

The syntax for the @font-face implemenation is:

@font-face {
  font-family: Name Of The Font;
  src: source where the font is stored;	
}

Browsers that support @font-face

1. Firefox : 3.6+
2. Safari : 3.2+
3. Chrome : 10+
4. Opera : 11+
5. Internet Explorer : 9+ and partial support in 7 & 8 versions.
6. Android Browsers : 2.1+ partial support

Note: Partial support before IE9 refers to only supporting EOT fonts. Safari for iOS 4.1 and below only supports SVG fonts.

The main issue with @font-face is the ownership of the fonts. Make sure you are legally allowed to upload and share a font before using @font-face, as when you embed a font, that is what you are doing: sharing a file. Just like music, for most fonts it is illegal to upload and share without proper attribution and/or payment.