How to Preload Font using CSS @font-face – Tutorial

arp14 CSS, Tutorial Tags: , , , 2

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.

How to Preload Font using CSS @font-face - Tutirial

I will be using BASE 02 font in this tutorial. I’m showing you an preview of BASE 02 font as an image below

base 02 preview as image

If your browser support @font-face, then you will be able to see the same text below – but this time as text.

CYBERSTER’S BLOG

@font-face Basic Usage

<html>
    <head>
        <title>Basic Usage fof CSS @font-face - Cyberster's Blog</title>        
        <style type="text/css">
            @font-face {
                font-family: MyCustomFont;
                src: url("Base 02.ttf") /* TTF file for CSS3 browsers */
            }

            @font-face {
                font-family: MyCustomFont;
                src: url("Base 02.eot") /* EOT file for IE */
            }

            h1 {
                font-family: 'MyCustomFont';
                color: darkred;
            }
        </style>
    </head>
    <body>
        <h1>Cyberster's Blog'</h1>
    </body>
</html>

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

@font-face {
    font-family: 'MyWebFont';
    src: url('fonts/ahronbd.eot');  /* IE9 Compat Modes */
    src: local('☺'),
         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

If you have any problem, just comment below – I’ll be back to you.

Thank you!

2 thoughts on “How to Preload Font using CSS @font-face – Tutorial

Leave a Reply

Note: Your email address will not be published. Required fields are marked *