@font-face rule – CSS3 web fontsThe font-face rule allows web designers to render any font you will, regardless it is installed on the user's computer or not. The fonts are defined within CSS3, and will be downloaded to the user. Web designers must make sure that the font is licensed for web use, before it is uploaded to the server. For Internet Explorer, EOT (Embedded OpenType) files is recommended. For the rest of the browsers you can either use OTF (OpenType) or TTF (TrueType). There are also other formats available, like SVG (Scalable Vector Graphics) and WOFF (Web Open Font Format). The latter is supported in all modern browsers (Chrome 5, Firefox 3.6, Internet Explorer 9, Opera 11.1, and Safari 5.1).
Code (CSS):/*
Basic @font-face rule
*/
@font-face {
font-family: myFont;
src: url('my_font.eot');
src: url('my_font.otf')
src: url('my_font.ttf')
}
h1 {
font-family:myFont;
}
The code above will do the job in most cases, but there are also more reliable techniques. The web designer can extend the rule with an indicator of the font file type
(format). Another technique is to add
local in front of the font type. The browser will then check for a local copy of the font in case the user already has it.
Code (CSS):/*
Extended @font-face rule
*/
@font-face {
font-family: myFont;
src: local('My Font'), local('My-Font'), url('my_font.eot') format('embedded-opentype');
src: local('My Font'), local('My-Font'), url('my_font.otf') format('opentype');
src: local('My Font'), local('My-Font'), url('my_font.ttf') format('truetype');
src: local('My Font'), local('My-Font'), url('my_font.svg#myfont') format('svg');
src: local('My Font'), local('My-Font'), url('my_font.woff') format('woff');
}
h1 {
font-family:myFont;
}
Home
Pages: 
