CODEWITHSUNDEEP
htmlcssfont-face
RobinJ
RobinJ

Reputation: 5263

Load external font in webpage. Solution for Internet Explorer?

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?

Upvotes: 0

Views: 2486

Answers (2)

Nivas
Nivas

Reputation: 18354

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?

Upvotes: -1

Evan Mulawski
Evan Mulawski

Reputation: 55344

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.

Upvotes: 3

Related Questions