Hello everyone, this is a first post, and one of many that will come. Please be patient with the new website if it is still in turmoil with design, I’m working on it.
@font-face
If you have been using the CSS3 @font-face in your websites then this post is for you. You see, Microsoft Internet Explorer, always seems to do one thing different from Firefox and other up-to-date web browsers.
Internet Explorer does not recognize your .ttf (TrueType) or .otf (OpenType) font faces in CSS3, at least not yet. IE recognizes an .eot (Embeddable Open Type). Now I have to give them “some” credit because this feature has been around for quite awhile in IE. But given that IE has made me slam my head against my desk on so many other occasions, the credit is still revoked.
Microsoft has a utility called WEFT, it looks extremely outdated, and wants to index your fonts and scan your webpages and all sorts of other stuff…instead of let you simply choose a font and convert it to .eot
There is another utility ‘font-forge’ – I have’nt used it.
Luckily for me I was able to find an online utility which allowed me to convert .otf fonts to .ttf fonts, then from there, another utility to take the .ttf and turn it into an .eot
http://onlinefontconverter.com/ – This website conveniently allows you to convert those OpenType fonts over to TrueType fonts.
http://www.kirsle.net/wizards/ttf2eot.cgi – This online utility will allow you to take that TrueType font and convert it into an Embeddable Open Type recognizable by IE.
Let’s put these into our CSS properly
/*as you can see the .eot is specified first, this is important*
@font-face {
font-family: 'familyname';
src: url('embeddableopentype.eot');
}
@font-face {
font-family: familyname;
src: local('Family realname'),
local('family-realname'),
url("opentype.otf") format("opentype");//or of course TrueType
}
Update:
This is just an easy, quick solution, if you feel you want a more in-depth approach please check out Jonathan Snook’s excellent screencast by following this link: here
Font-face is really nice but browsers are always problem. By the way, your post is really nice and thanks about it.
Right. Cross-Browser Compatibility is always a factor. I’m glad you found this post useful.
Cars are really nice but roads are always a problem.
This didn’t work for me. It could be that the conversion from OTF to TTF then to EOT gets messed up with these converters. Of course, this works in Firefox (everything works as it should in Firefox), but not in IE7. I tried to get this working on my website, but gave up and reverted to the way I had it before. Do you have a working example? Thanks!
You have to ensure that all EOT font types are called first before anything, as well IE doesnt support any options within the src attribute like firefox and other browsers do (ex. format) make sure your specifying the true family name for the font (just check for it by double clicking a font file in windows for character viewer)
if you still have problems I can help you troubleshoot it, just shoot me a link to the site voa circuitbomb@flyninja.net
btw Adam you may want to try out the added update link in the post, that link takes you to a very excellent and more in depth way of converting the fonts, the problem is that the online converters aren’t the best way to do it, its just an fast and easy way in a lot of cases.
Hello from Russia!
Can I quote a post in your blog with the link to you?
When I convert an existing .ttf file to .eot, it works fine, however when when I convert a .otf to .ttf, and then try to convert to .eot, it doesn’t give me a valid file. The preview on the site to convert to .eot shows a default font, not my custom font. I’ve tried a couple different methods converting from .otf to .ttf, but I get the same result when converting to .eot.
Any ideas?
Absolutely
follow this link and checkout the screencast to use fontforge
way more reliable conversions
http://snook.ca/archives/html_and_css/screencast-converting-ttf2eot#c63973
Yes you may!
@admin
I followed Snook’s screencast to the letter and I still found that I got half of the fonts I tested to work properly. Not sure what it is, but I suspect there’s a glitch in the FontForge conversion. Some fonts worked, some fonts didn’t. So, I tried an old copy of TypeTool (by the FontLab people) and the conversion from OTF to TTF seemed more solid.
Also, I the folks at FontSquirrel.com now have this wizbang @font-face kit generator (http://www.fontsquirrel.com/fontface/generator).
Simply upload your source font and the generator will package up a zipfile with all the file conversions (they also generate SVG, EOT and WOFF [firefox 3.6 embedded font] files). Also in the zip file you’ll get an HTML file with an example of the font embedding along with the associate CSS file.
Nifty.
@Victor
FontSquirrel is a great resource
I haven’t tried using TypeTool, I’ll check it out Thanks!
I tried to convert an open type font to ttf using Onlinefontconverter, but the outcome was not acceptable. The font looked horrible with jagged edges. So it did’n work for me. After some googleing I found a perfect solution for my problem (I wanted to convert otf to eot). It’s here: http://www.fontsquirrel.com/fontface/generator
It worked like a charm! I did’n need to convert my otf first to ttf to convert it to eot. Font Squirrel generator converted my otf to eot right away, and the quality of the eot-file was good.
I’m sorry to say, but I think you should forget all the other solutions suggested in this post… Viva la Font Squirrel!
Just see this post and added eot to the list at: http://onlinefontconverter.com
admin… You say fontforge is more relayible. http://onlinefontconverter.com is based on fontforge
so if it render something wrong please let me know.
//Stefan
damn dude…fontsquirrel.com is the bomb. I spent a full day messing with FontForge with cygwin and gave up.
FontSquirrel did it will in 1 minute.
Love it! Now I can tell my co worker to take his Verdana back!
Shorten ver:
@font-face {
font-family: price_font;
src: url(‘font/price_font.eot’);
src: local(price_font), url(‘font/price_font.otf’) format(‘opentype’);
}
so, if its IE it will open the EOT font and ignore next command.
if its FF it will ignore first command and open OTF
Pretty useful tutorial. One more very good option is FontSquirrel’s http://www.fontsquirrel.com/fontface/generator Its pretty easy to use and works like a charm
Nice article, thanks for sharing this. IE is a real pain for the web. Last year I have fully abandon coding for IE6. I just cant believe peoples ignorance when it come to upgrading for safety!
[...]The information mentioned in the article are some of the best available [...]……
[...]below you’ll find the link to some sites that we think you should visit[...]……