In this tutorial you will know how to preload font using CSS @font-face rule. So, you will be able to load and use a font that is not available in client’s machine. @font-face is not really a modern CSS3 property, but it is since from CSS2. Font face mainly designed to support Web fonts. The @font-face rule is supported by Firefox, Chrome, Internet Explorer 9, Opera, and Safari. Although IE9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf (TrueType Font) and .otf (OpenType Font) fonts. But, below versions of IE9, do not support the @font-face rule. Though there is a hack available for IE6 to IE8. We will see this later in this post.
I will be using BASE 02 font in this tutorial. I’m showing you an preview of BASE 02 font as an image below
If your browser support @font-face, then you will be able to see the same text below – but this time as text.
@font-face Basic Usage
<title>Basic Usage fof CSS @font-face - Cyberster's Blog</title>
src: url("Base 02.ttf") /* TTF file for CSS3 browsers */
src: url("Base 02.eot") /* EOT file for IE */
So, as the code above – we have set a CSS rule @font-face on line 5. Now, within this rule, font-family property on line 6 is for custom name of font defined by you. It means that if you set it’s value to MyCustomFont, then you can use the font with name MyCustomFont in rest of the body of your document. On line 7, src property gets the font from a URL.
As I mentioned before, IE9 do not support .ttf type fonts – so, we used another @font-face rule, but this time with .eot type font in src property on line 12.
So, this was the basic usage of CSS @font-face rule.
@font-face Advance Usage
src: url('fonts/ahronbd.eot'); /* IE9 Compat Modes */
url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg') format('svg'); /* Legacy iOS */
Above code is similar to our previous example. But this time we have used src property two times and on second src, we put local(‘☺’) at first and then another four url values for different purposes.
If you doubt on line 4 – is it ‘0’ or ‘☺’? Yes, it is ‘☺’. A better explanation can be found here.
Line 5 is a hack to make CSS @font-face rule supported by IE6 to IE8, line 6 is for modern browsers, line 7 is for Safari Android and iOS and line 8 is for Legacy iOS.
Useful Links & Resources about CSS @font-face
- Font converter online (all formats) #1: http://convertfonts.com
- Font converter (allmost all formats) #2: http://www.font2web.com
- .ttf to .eot font converter: http://www.kirsle.net
- .ttf to .woff font converter: http://ttf2woff.com
- @font-face at w3cschool: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
- Serving Webfonts to IE9: http://www.fontspring.com/blog/fixing-ie9-font-face-problems
If you have any problem, just comment below – I’ll be back to you.