Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Internet Explorer 11 and supported web fonts

I'm using a TTF and OTF web font to catch all major browsers(FireFox, Chrome and IE11) on most devices. It all looks fine, before relocation to the production server and then IE doesn't want to show my icons.

I guess, the brains in Redmond have some kind of feature to stop this working over the Internet, so it works from localhost only.

What's the deal here? What kind of font type do I need to use for IE?

like image 525
Luke Puplett Avatar asked May 30 '14 12:05

Luke Puplett


People also ask

How do I change the font in Internet Explorer 11?

Open Internet Explorer, select the Tools button and select Internet options. Select the General tab, and then, under Appearance, select Fonts. Select the fonts you want to use, select OK, and then select OK again.

What font does ie use?

For IE >=9 & all other browsers, use woff fonts, as it has the widest support and the best compression, since it was designed specifically for the web.

Do browsers support all fonts?

All major browsers support WOFF/WOFF2 (Web Open Font Format versions 1 and 2). Even older browsers such as IE9 (released in 2011) support the WOFF format. WOFF2 supports the entirety of the TrueType and OpenType specifications, including variable fonts, chromatic fonts, and font collections.

Does TTF work on all browsers?

TrueType Font (TTF) TTF has long been the most common format for fonts on Mac and Windows operating systems. All major browsers have supported it.


1 Answers

This is the standard way of loading with @font-face, hacky fixes and all -

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

hey please check the Compatibility tables for support of EOT, check these links -

Link 1

Link 2

like image 198
Rohit Suthar Avatar answered Sep 22 '22 13:09

Rohit Suthar