You can declare @font-face inside your CSS.
@font-face {
font-family: custom_font;
src: url('/fonts/custom_font.ttf');
}
h1 {
font-family: custom_font;
}
This works for all browsers except for Internet Explorer, because it does not support TrueType Fonts (TTF)[wiki] it uses Embedded OpenType (EOT)[wiki] fonts. To do that, you must first convert you TTF fonts into EOT.
Applications:
Free online converters:
- http://www.kirsle.net/wizards/ttf2eot.cgi
- http://ttf2eot.sebastiankippe.com/
- http://onlinefontconverter.com/
@font-face {
font-family: custom_font;
src: url('/fonts/custom_font.eot'); /* IE reads only this line */
src: local(custom_font), url('/fonts/custom_font.ttf') format('opentype');
/* since IE does not know the "local" keyword it will skip this line */
}
h1 {
font-family: custom_font;
}
Browsers supported:
- Internet Explorer (versions 4 and up)
- Mozilla Firefox (versions 3.5 and up)
- Opera (versions 10 and up), Opera Mobile (versions 9.7 and up)
- Google Chrome (versions 4 and up)
- Apple Safari or any WebKit based browsers (versions 3.1 and up)
Sources:
