Wednesday, May 23, 2012

How @font-face Works

The great news about CSS3 support of the @font-face selector, is that - unlike work-a-round techniques - it's easy to use. Yay! Fonts without hoops!
Just upload the font file you want to use to your server - making sure that you're not violating any copyright rules
In example here I am using font name Ubuntu. you can download this font from here
 - then embed it, using the following CSS:
Code:
 <html>
    <head>
        <title>
            Test font embeded
        </title>
    <style type="text/css">
            @font-face {
              font-family: yourFontName ;
              src: url( /ubuntu_title/Ubuntu-Title.ttf ) format("truetype");
            }
    
            /* Then use it like you would any other font */
            .yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif;
            }
    </style>
    </head>
    <body>
        <h1 class="yourFontName">ubuntu title</h1>
    </body>
</html>

The CSS code above defines a font called "yourFontName". You may use the actual font name - or - for testing purposes a unique, made-up name. Whichever you use, all you need to do is reference it again in the CSS, wherever you want to use it.
That's it! Note: the CSS3 specification provides for several font formats: "truetype" (ttf), "opentype" (ttf,otf), "truetype-aat (ttf), "embedded-opentype" (eot) and "scalable-vector-graphic" (svg,svgz).

The result:
more references here


No comments:

Post a Comment