CSS3 has come up with some really amazing new features to enhance the presentation of a web-page. I have used the new border-radius, box-shadow, text-shadow properties multiple times in my stylesheet. Besides these, there is something else, even more attractive and a real celebration in CSS3. This is the @font-face rule of CSS. The @font-face rule allows us to define custom fonts. Earlier developers were allowed to use only those fonts, which were installed on the user's machine. But with the @font-face rule, the developers can have their own fonts at the web server, if the user hasn't got that font installed then the font gets downloaded on his machine from the server.
It was first defined in the CSS2 specification, but was removed from CSS2.1. Currently, it’s a draft recommendation for CSS3.
In the simplest usage scenario, @font-face allows us to specify a font-family name, and the URI to a source file for the font, which can be downloaded by the user agent if needed. We can then use the font-family name in other font-family declarations where required.
@font-face only requires a few lines of CSS and is therefore very easy to use without any third party tools.
It was first defined in the CSS2 specification, but was removed from CSS2.1. Currently, it’s a draft recommendation for CSS3.
In the simplest usage scenario, @font-face allows us to specify a font-family name, and the URI to a source file for the font, which can be downloaded by the user agent if needed. We can then use the font-family name in other font-family declarations where required.
@font-face only requires a few lines of CSS and is therefore very easy to use without any third party tools.
Syntax
Basic implementations for defining the @font-face rule:
W3C Working Draft 11 December 2012
Mozilla Blog
@font-face {
[font-family: <family-name>;]
[src: [ <uri> [format(<string>#)] | <font-face-name> ]#;]
[unicode-range: <urange>#;]
[font-variant: <font-variant>;]
[font-feature-settings: normal|<feature-tag-value>#;]
[font-stretch: <font-stretch>;]
[font-weight: <weight>];
[font-style: <style>];
}
[font-family: <family-name>;]
[src: [ <uri> [format(<string>#)] | <font-face-name> ]#;]
[unicode-range: <urange>#;]
[font-variant: <font-variant>;]
[font-feature-settings: normal|<feature-tag-value>#;]
[font-stretch: <font-stretch>;]
[font-weight: <weight>];
[font-style: <style>];
}
Basic implementations for defining the @font-face rule:
@font-face {
font-family: DeliciousRoman;
src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
font-weight:400;
}
font-family: DeliciousRoman;
src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
font-weight:400;
}
font-family is what we want to call the font,
src is where it can be found
font-weight (not needed for normal, but required by everything else, bold, thin etc).
Then we can just use it like any other font in any other style rule.src is where it can be found
font-weight (not needed for normal, but required by everything else, bold, thin etc).
p {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}
Explore more about this link on:font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}
W3C Working Draft 11 December 2012
Mozilla Blog