Frage

In my CSS style sheet, the first entry is

@font-face {
    font-family: "Font";
    src: url(link) format("truetype");
}
p.customfont { 
    font-family: "Font", Verdana, Tahoma;
}

This is not a font commonly installed on computers. Chrome loads this font and uses it in the correct places, but IE 9 will not. Now as a lot of people still use IE, this got me worried. I tried on a lot of other computers, and chrome works fine on all, but IE also fails on all.

How can I fix this?

EDIT: For future reference - http://everythingfonts.com/font-face converts the ttf for you to all the formats needed, and creates the css - so a lot of time saved

War es hilfreich?

Lösung

Generally you should use eot, woff, ttf and svg to support all browsers.

Example:

@font-face {
font-family: 'font';
src: url('../fonts/font.eot'); /* IE9 Compat Modes */
src: url('../fonts/font.eot') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/font.woff') format('woff'), /* Modern Browsers */
     url('../fonts/font.ttf') format('truetype'), /* Safari, Android, iOS */
     url('../fonts/font.svg#PlanerRegular') format('svg'); /* Legacy iOS */
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top