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:
Nice post.keep up the good work..
ReplyDeleteinquitech.com
Dafont.com is a site where you can download a ton of free fonts. You can search for a specific typeface, or search by the type of lettering you want, whether it’s serif or sans serif, hand lettered or grunge style. You can also put in your own phrase to see how it looks in a particular font. A lot of these fonts are very decorative and many are handdrawn, so it’s not always the best place to search for body text fonts. Each selection also tells you whether your download is free for personal or commercial use. The download is easy – you get a zip file with the font file inside. Unzip, install, and you’re ready to go.
ReplyDeleteDafont.com is a site where you can download a ton of free fonts. You can search for a specific typeface, or search by the type of lettering you want, whether it’s serif or sans serif, hand lettered or grunge style. You can also put in your own phrase to see how it looks in a particular font. A lot of these fonts are very decorative and many are handdrawn, so it’s not always the best place to search for body text fonts. Each selection also tells you whether your download is free for personal or commercial use. The download is easy – you get a zip file with the font file inside. Unzip, install, and you’re ready to go.
ReplyDelete