Op een nieuwe website die ik aan het bouwen ben, had Karen Folkertsma (die de vormgeving weer voor haar rekening heeft genomen) een leuk lettertype voor het menu bedacht. Dat kan tegenwoordig, dacht ik, en ging er mee aan de slag. In firefox, chrome en safari natuurlijk geen probleem. Maar toen ik in internet explorer ging kijken, zag ik daar slechts het vervangende font in het menu. Vele pagina’s en zoekpogingen verder heb ik eindelijk de oplossing.
Al snel had ik in google gevonden dat Internet Explorer alleen Embedded Open Type ondersteunt (eot) en het lettertype dat ik gebruikte is True Type Font (ttf). Via fontsquirrel kun je ttf omzetten naar eot, maar natuurlijk lag juist vandaag die website eruit. Via google wel een website gevonden waar je ttf online kon omzetten naar eot, maar dat gaf geen resultaat. Uiteindelijk een website gevonden met heel veel informatie over fontface en internet explorer. En op advies vandaar WEFT gedownload en geinstalleerd. Dat had er in eerste instantie geen zin in, maar uiteindelijk had hij netjes mijn ttf lettertypes omgezet naar eot, deze op de server gezet en ook nog eens de code gegenereerd die ik nodig had.
Omdat het samenvoeging in de stylesheet al eerder problemen gaf, heb ik besloten om een tweedeling te maken. In de stylesheet heb ik fontface aangeroepen met naamA, met daarin de instellingen voor de ttf voor alle browsers.
In de head van de website heb ik de code neergezet voor de uitzondering voor IE:
<STYLE TYPE=”text/css”>
<!–
@font-face {
font-family: NaamB1;
font-style: normal;
font-weight: normal;
src: url(http://www.taartjesenzo.ophetweb.nu/fonts/GOODDOG1.eot);
}
@font-face {
font-family: NaamB2;
font-style: normal;
font-weight: normal;
src: url(http://www.taartjesenzo.ophetweb.nu/GOODDOG0.eot);
}
–>
</STYLE>
Verder in de stylesheet naamA als standaardfont voor het menu ingesteld en via de bodyclass voor IE het font voor IE samengesteld met:
.msie #nav li a {
font-family:naamB1;
}
Er was alleen nog een probleem bij de mobiele devices. Ik zag het alternatieve font op mijn htc en ook op de iPad was niet het goede lettertype te zien. Dit was snel opgelost met een extra fonttype: scalable vector graphics (svg). Na het ttf type ook geconverteerd te hebben en het svg type ook in de css toe te voegen en online te zetten was ook op deze devices het goede font te zien. Voor het omzetten van ttf naar svg heb ik een online font converter gebruikt: www.freefontconverter.com
