@font-face vs Internet Explorer

Szóval ahhoz, hogy minden böngészővel kompatibilis stílus lapot(CSS) készítsünk tudni kell hogy az IE csak .EOT típusú betűt tudja használni @font-face esetén. Elvileg már rendelkezünk azzal a betűtípussal amit szeretnénk használni ami .TTF kiterjesztésű, ezt át kell konvertálnunk, amit meg tehetünk egy online konverterrel (link) vagy letöltünk egy ingyenes programot a WEFT-et (link). A konvertálást követően így tudjuk alkalmazni:


@font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
}

Még néhány fontos tudnivaló:

- első legyen az IE-s src:, nem ismeri a “local” vagy a “format” megoldást így nem fog működni mert nem ismeri fel

- az eot csak IE-vel működik így szükség van a .TTF-re is hogy a Gecko/Webkit motor is használja

- a WEFT néhány TTF esetén nem tud konvertálni, oka ismeretlen

- tesztelés során vigyázunk mert a “local” pl. Firefox esetén a saját gépünkről veszi fontot és nem a szerverről (nevezzük át ideglenesen )

- ha megtartjuk az eredeti nevét a betűtípusnak és látogatónak telepítve van akkor nem kell letöltenie  a böngészőnek

- és figyeljünk a szintaktikai hibákra mert egy / jel elég ahhoz, hogy ne működjön