CSS3 is being slowly introduced in our beloved web design world. I say 'slowly' because in reality some of the new properties are already implemented in the latest web browser versions.
Let's see how it works!
Before CSS3, web developers couldn't add custom fonts to their web pages, unless they used some sort of tricks (like the one explained in my previous post). With CSS3, you only need to copy your fonts to the web server. Because at the moment, Internet Explorer supports only .eot font files, we will need to upload two files: the .ttf and the .eot.
The styleNow we need to use the @font-face rule. Just add the following style to the head section of your page:
Ok, let me explain it.
url('my_font.eot') format("opentype"); /* IE */
In the above snippet, we assume that the custom font file are my_font.ttf and my_font.eot. Our cutom font is called CustomFont and we set the font family for every div container to that font.
The HTMLIf you add to the body section of your page, the following HTML code:
you will see that the above txt is rendered with the new font.
<div>Hello! This is my new font!</div>
FeaturesIn order to further customize your CustomFont, we can add font descriptors inside the @font-face rule. The following list explains the various options:
|font-family||name||Required. Defines a name for the font|
|url||URL||Required. Defines the URL to the font file|
|Optional. Defines how the font should be stretched. Default is "normal"|
|Optional. Defines how the font should be styled. Default is "normal"|
|Optional. Defines the boldness of the font. Default is "normal"|
|unicode-range||unicode-range||Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF"|
Compatibility@font-face is compatible with IE, Firefox, Chrome, Opera and Safari. As said before IE needs the font file to be in .eot format.
Start playing around with these new feature. I'm actually quite enjoying it, and possibly I will talk about further CSS3 new stuff in the near future.