Load external font in webpage. Solution for Internet Explorer?

Question

In all decent webbrowsers @font-face just works for loading an external font into your webpage. However, for IE versions older than IE9 this does not work. I'd like to use the Ubuntu Font Family. Any brilliant ideas?

score 3 · Accepted Answer · answered Aug 09 '11 at 12:45

3

FontSquirrel will create the proper cross-browser CSS for you.

Example CSS:

@font-face {
    font-family: 'DroidSansRegular';
    src: url('/resources/fonts/DroidSans-webfont.eot');
    src: url('/resources/fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resources/fonts/DroidSans-webfont.woff') format('woff'),
         url('/resources/fonts/DroidSans-webfont.ttf') format('truetype'),
         url('/resources/fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

This works in IE7 and above and, of course, all other browsers.

answered Aug 09 '11 at 12:45

Evan Mulawski

54,662
15
117
144

Yeah... great CSS file... `/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 9, 2011 */`, that's everything inside the generated CSS file. – RobinJ Aug 09 '11 at 12:48
Tried it again, and this time it **did** work :D Going to test it now. – RobinJ Aug 09 '11 at 12:51
Still no Ubuntu font to be seen on the page :s – RobinJ Aug 09 '11 at 12:56
I'm talking about this page. http://www.heuvel-folie-serres.com/Veestal_v2/?pagina=home It includes the generated CSS file if the website is opened with Internet Explorer. – RobinJ Aug 09 '11 at 12:57
@RobinJ: You have 2 font-family declarations in the body CSS tag. It is working in IE9 on my PC. Try clearing your cache. – Evan Mulawski Aug 09 '11 at 13:04
... @font-face always works in IE9... The problem is IE8 and IE7. – RobinJ Aug 09 '11 at 13:16
Apparently it **did** work... Only on the Windows machine I tested it on (not mine) the font appeared so pixely that I didn't even recognise it >. – RobinJ Aug 11 '11 at 08:33

score -1 · Answer 2 · edited May 23 '17 at 11:55

You can have a look at this article:

Browser Support

Which leads me into the other major issue, browser support. Font embedding with a TrueType or OpenType font only works as of Firefox 3.5, Safari 3.1, and Opera 10. (You can enable it in your copy of Chrome 2 by using a command line switch.)

Okay, that's decent already but we can do better. We can get Internet Explorer 4+, Chrome 0.3+, Opera 9+ and even a little mobile Safari action. EOT

Internet Explorer supports a particular type of format called Embedded OpenType that provides some control over where and how the font is allowed to be embedded. You'll need to convert your TTF into an EOT format. Microsoft provides a tool called WEFT but it is ancient and I'll be damned if I can get it working. Thankfully, there is a command line tool called TTF2EOT that can convert your font.

Also: How do I load external fonts into an HTML document?

Load external font in webpage. Solution for Internet Explorer?

2 Answers2