Custom HTML font inside IE10?

Asked

Viewed 226 times

0

When testing on Chrome, Firefox and Safari, they all ran fluidly with the source on my site, but when I tested on IE9 it didn’t recognize the source I imported, what’s the problem?

I imported the source of a folder within the site project:

@font-face {
    font-family: 'nomeDaMinhaFonte';
    src: url("endereçoDaMinhaFonte/FRADM.TTF");
}
css3 internet-explorer

2 answers

1


Internet Explorer versions 7, 8 and 9 accept @font-face only if the font is EOT.

You can find any online converter that this problem is solved.

You can check the compatibility in Can I Use: Font Face

You can convert your fonts to EOT directly on Font Squirrel. Safari, Firefox, Chrome, and Opera accept TTF and OTF fonts.

Compatibility between source formats:

+----------------------------------------------------+
| Browser | IE8+ |   Chrome  |   Firefox |   Safari  |
|---------|------------------------------------------|
| Formato | EOT  | TTF e OTF | TTF e OTF | TTF e OTF |       
+----------------------------------------------------+

For font support in several browsers you can do so:

@font-face {
  font-family: ‘NomeDaFont';
  src: url(‘nomedafont.eot’); /* EOT para IE */
  src: url(‘nomedafont?#iefix’) format(‘embedded-opentype’),
       url(‘nomedafont.svg#Locaweb-Icons’) format(‘svg’), /* SVG */
       url(‘nomedafont.ttf’) format(‘truetype’); /* TTF para Safari, Firefox, Chrome e Opera */
       font-weight: normal;
       font-style: normal;
}

0

The Internet Explorer browser has partial font support .ttf, read more on:

For Internet Explorer you can use the format .eot which is supported from the Internet Explorer 8

You can convert the source (take care with licensing issues) and add them like this to support in multiple browsers:

@font-face {
    font-family: 'suaFonte';
    src: url('../fonts/font1.eot');
    src: url('../fonts/font1.eot?#iefix') format('embedded-opentype'),
         url('../fonts/font1.woff') format('woff'),
         url('../fonts/font1.ttf') format('truetype'),
         url('../fonts/font1.svg#font1') format('svg');
}

Browser other questions tagged css3 internet-explorer

You are not signed in. Login or sign up in order to post.