Probleem met webfonts in Internet Explorer 9

[anoniem]

Ik heb een probleem met Internet Explorer 9 en webfonts. De symptoomomschrijving is simpel: ze doen het niet. IE9 valt terug op de tweede keuze in het font-family attribuut. Ik krijg mijn webfonts werkend in Internet Explorer 7 en 8. In FireFox, Chrome, Opera, Konqueror, maar niet in IE9. Mijn eerste reactie was: "Ah, een IE9 issue, daar staat het halve web vast over volgeschreven" Maar dat is slechts ten dele waar. Veel font problemen met IE9, maar nauwelijks het mijne. Fonts worden niet helemaal juist gerenderd, bepaalde stijlen laten het afweten, maar het simpelweg negeren van het gespecificeerde font kom ik nauwelijks tegen. De enkele keer dat ik het wel tegen kwam was dat het een bepaald font betrof dat problemen met IE9 bleek te hebben en een ander font werkte uitstekend (ik heb er een stuk of zeven op verschillende manieren geprobeert, maar bij werkt er geen een) Bij een andere bleek het een Google Webfonts bug (Ik heb diverse manieren geprobeert, waaronder Google webfonts, maar ook gewoon meegestuurde fonts inmporteren werkt niet) en een derde beweerde dat IE9 geen .eot ondersteund maar .woff moet hebben. (Volgens mij moet IE9 .eot wel degelijk ondersteunen, maar ook met .woff lukt het niet.) Ik ben met Google webfonts bezig geweest, met de Squirrel webkit en ik heb zelf dingen geplaatst en geimporteerd, maar geen enkele keren ook maar close geweest. Het rare is dat de fonts op de Google webfonts pagina's wel goed renderen, dus blijkbaar kan het wel. Neem ik echter de Google code 1-op-1 over zoals opgegeven, dan werkt het niet. Maar goed, van alles geprobeert dus. Ook zorgvuldig de Google webfont codes en de Squirrel webkit codes exact 1-op-1 gekopieerd, maar geen enkel effect. Het betreft overigens een (bewust) onaagepaste IE versie. Ik gebruik hem alleen om te testen, en om die reden laat ik hem zoveel mogelijk default en onaangepast. Na twee dagen tevergeefs te hebben geprobeert om test-shadow op een of andere manier enigzins fatsoenlijk in IE9 aan de praat te krijgen, en nu dit weer, overvalt me een ernstig gevoel van Deja Vu. Ik heb het idee dat ik 10 jaar terug in de tijd ben gegooid en dat alleen al de IE aanpassingen de helft van de bouwtijd van een complete website vergen. En ik was nog wel zo lovend over IE8. Dat is toch ook een veel toegepaste manier van martelen? Desorienteren? Eerst de situatie heel slecht voordoen, dan verbetering laten zien en hoop geven, en dan weer terug laten vallen in diepe ellende. Daar zou Amnesty International eens tegen op moeten treden meneer Balmer!

[anoniem]

Wat ik me meen te herinneren van de enige keer dat ik me met webfonts heb bezig gehouden, is dat sommige browsers alleen webfonts accepteren die binnen hetzelfde domein staan. Kan dat het probleem misschien zijn, dat je een webfont van Google probeert in te laden?

[anoniem]

Zoiets kwam ik inderdaad ook tegen, maar de fonts van Font Squirrel stonden gewoon in dezelfde map. Ik heb nog gekeken of lokaal op de harde schijf, of online op de webserver een verschil maakte, maar ook dat maakte geen enkel verschil.

[anoniem]

Ik had laatst ook dat een custom font niet werkte. Heb toen de ttf eerst online [url=http://www.freefontconverter.com/]gecoverteerd naar ttf[/url] en daarna [url=http://www.kirsle.net/wizards/ttf2eot.cgi]naar eot[/url]. (IE9 lust wel zeker .eot).

[anoniem]

Ik ga er van uit dat je de juiste code hebt overgenomen van Font Squirrel, maar voor de zekerheid toch maar even: [code:1:2b36851492] @font-face { font-family: 'FontName'; font-style: normal; font-weight: normal; src: url('../fonts/fontname.eot'); src: url('../fonts/fontname.eot?#iefix') format('embedded-opentype'), url('../fonts/fontname.woff') format('woff'), url('../fonts/fontname.ttf') format('truetype'), url('../fonts/fontname.svg#FontName') format('svg'); } [/code:1:2b36851492] Pad en naam zijn uiteraard (mogelijk) anders bij jou. Deze code deed het prima bij mij in IE9. Niet zo goed in IE7/8, soms wel, soms niet, maar dat kon verholpen worden door een extra style sheet voor die twee waarin de declaraties (@ font-face en het betreffende element) herhaald werden. Gewoon een gut feeling die goed uitpakte. Je kunt nog proberen om de eerste src-regel onderaan te zetten. Als ik het goed begrepen heb zijn de fixes voor IE6-8. Anders zou ik het eerlijk gezegd niet weten. Heb je het ook op andere machines met IE9 geprobeerd? En hoe doet IE10 het?