Use custom fonts in Html using Css
22
June
2013

CSS Code


@font-face {
font-family: bttf_font;
src:url('fonts/bttf.ttf');
}
@font-face {
font-family: jeannie_font;
src: url('fonts/jeannie.ttf');
}
@font-face {
font-family: gilligan_font;
src: url('fonts/gilligan.ttf');
}
Then the font-family is assigned to the individual elements:
h1 {
font-family:bttf_font;
font-size:32px;
font-stretch:extra-expanded;
}
h2 {
font-family:jeannie_font;
font-size:24px;
font-stretch:extra-expanded;
}
p {
font-family: gilligan_font;
font-size:18px;
}

<h1>Internet Explorer</h1>
<p>
There is a known issue with older versions of Internet Explorer that do not render *.ttf file types, and they must be converted to an *.eot file type. In these cases, you would need to convert the *.ttf file to an *.eot file and then add that to your @font-face property. In the case of the Back to the Future font, it would appear first in the font stack:</p>


@font-face {
font-family: bttf_font;
src: url('bttf.eot');
src:url('fonts/bttf.ttf');
}
  • 1310 View
  • Pin It