When testing in Chrome, Firefox and Safari, they all ran smoothly with the font on my site, but when I tested in IE9 it did not recognize the font I imported, what's the problem?
I imported the source of a folder into the site project:
@font-face {
font-family: 'nomeDaMinhaFonte';
src: url("endereçoDaMinhaFonte/FRADM.TTF");
}
Internet Explorer versions 7, 8, and 9 accept the @ font-face only if the font is EOT.
You can find any converter online that this problem is solved.
You can check the compatibility in Can I Use: Font Face
You can convert your fonts to EOT directly from the Font Squirrel . Safari, Firefox, Chrome and Opera support fonts in TTF and OTF.
Compatibility between source formats:
+----------------------------------------------------+
| Browser | IE8+ | Chrome | Firefox | Safari |
|---------|------------------------------------------|
| Formato | EOT | TTF e OTF | TTF e OTF | TTF e OTF |
+----------------------------------------------------+
For font support in various browsers you can do this:
@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;
}
The Internet Explorer browser has partial support for the .ttf source, read more at:
For Internet Explorer you can use the .eot format that is supported since Internet Explorer 8
EOT format support for IE8 +
WOFF format partial support from IE8 and full support from IE9 +
TTF format of partial support from IE9 +
/ li>SVG Format is not supported by Internet Explorer
You can convert the source (beware of licensing issues) and add them to support 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');
}