CSS @font-face Rule
Reference on CSS @font-face, and examples of how its used to embed fonts.
The @font-face rule allows designers to embed fonts into their CSS, this can be used to implement custom fonts on web pages.
Like other external objects, font files will be cached independently of the CSS itself. In other words, font files are cached the same way other web resources are cached.
Font files must be placed on the same domain, as the page which is using them. So be careful that you don't link to the www subdomain, if your server doesn't use the www part.
The supported format depends on the browser, so you should test in all relevant browsers before you go live with a font. The WOFF format is supported in most major browsers.
Using the font-face rule
To use the font-face rule, simply place the font file somewhere on your server, and type in its path like below.
@font-face {
font-family: MyFontName;
src: url("/fonts/MyFontName.woff");
font-weight: bold;
font-style: italic;
}
After having embedded the font, you can assign the font to any element, using below syntax.
p {font-family: 'MyFontName', "Comic Sans MS", Arial;}
Where the other fonts declared, will work as alternative choices in case your font for some reason couldn't be loaded, or in case the browser doesn't support embedded fonts.
The font-family property in this case, contains a remote name for your font.
The src part links to the downloadable font, using an Absolute or Relative Path.
Using a local version and skip download
Its also possible to recommend a local version to the browser, which will be used instead, given it is installed on the users system. This can save bandwidth for optimization purposes.
@font-face {
src: local("Sans-serif"),
local("Sans-serif"),
url("Serif.ttf");
font-weight: bold;
}