Before you can start using those typefaces on your site you need to declare the font file(s) in your CSS file along with the font-weight and font-style if available. Like this:
@font-face {
font-family: GraublauWeb;
src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype");
}
@font-face {
Savefont-family: GraublauWeb;
font-weight: bold;
src: url("path-to-the-font-file/GraublauWebBold.otf") format("opentype");
}
Then you can call the font via the font-familly property. Don’t forget to put some other (web-safe) fonts there as a fallback option. Like this:
h1 {
font-family: GraublauWeb, Helvetica, Verdana, Sans-Serif;
}
Also be sure to check out the ‘further resources‘ section at the bottom of this post for more infos, especially on how to get @font-face to work in IE using EOT font files.
The font used on this example can be downloaded from,
http://www.fonts.info/info/press/free-fonts-for-font-face-embedding.htm
Thanks to SpyreStudios
Comments