Font-face werkt niet goed in Firefox en Internet Explorer

[Verwijderd]

Hallo Tweakers,

Op de onlangs gelanceerde website www.landstradegroot.nl doet zich een probleem voor met @font-face. Ik laad daar twee varianten van het Klavika font in; Light en Bold.

De bestanden voor de @font-face heb ik aangemaakt op http://www.fontsquirrel.com/fontface/generator. Nu is het vreemde dat het de lettertypes correct gerenderd worden in Google Chrome maar niet in Internet Explorer en FireFox. Nog vreemder is dat dit niet op iedere computer gebeurd.

Ik heb de font-family name al hernoemd om te voorkomen dat de font-face in de war komt met het font dat standaard op Windows geïnstalleerd is.

Is er iemand bekend met dit probleem? Zoja, is hier een fix / work-around voor?

[Gusev]

www.landstadegroot.nl werkt hier niet.

Maar ik heb ook aardig lopen k*tten met @font-face. Is een alternatief wellicht een mogelijkheid voor jou?

M.a.w. een JavaScript toepassing zoals Cufon ?

[Barryvdh]

Even gekeken naar http://www.landstradegroot.nl/ (denk dat je dat bedoeld), met Firebug en de IE developer tools, en hij kan http://landstradegroot.nl...ikalight-osf-webfont.woff en http://landstradegroot.nl...vikaboldbold-webfont.woff niet vinden. (Klopt ook, want die bestaan niet, net zoals je loading.gif)
(Overigens weet ik niet of dat het oplost hoor, maar goed is het sowieso niet)

[ Voor 26% gewijzigd door Barryvdh op 24-04-2012 16:32 ]

[tafkaw]

Ik doe het als volgt:

code:

@font-face {  
    font-family: "lettertype";  
    src: url(GOTHIC.eot);
}

@font-face{
    font-family:"lettertype2";
    src: url(GOTHIC.ttf);
}

Dan aanroepen met:

code:

font-family: "lettertype", "lettertype2;

[Barryvdh]

Zie ook http://paulirish.com/2009...ce-implementation-syntax/ voor meer over verschillende @font-face implementaties, maar die manier van 2 lettertypes laden wordt afgeraden, omdat je dan beiden lettertypes zou laden.
Daar wordt dus de methode aangeraden die ook door Font Squirrel gebruikt wordt. Dat zou gewoon moeten werken (moet je wel zorgen dat je alle bestanden goed linkt natuurlijk)

[Bosmonster]

Paul Irish loopt wel een klein beetje achter (of de font-face techniek gaat wat harder dan hij bij kan houden).

In principe heb je vandaag de dag niet meer nodig dan EOT en WOFF (dit is ook wat je bij 9/10 leveranciers aangeleverd krijgt). Ook is de smiley-syntax outdated. Local wil je niet gebruiken (buggy as hell), en bij voorkeur wil je wel de font-weight/font-style definieren.

Cascading Stylesheet:

@font-face {
    font-family: 'Sun';
    src: url('fonts/sun-regular.eot');
    src: url('fonts/sun-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/sun-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sun';
    src: url('fonts/sun-bold.eot');
    src: url('fonts/sun-bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/sun-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* etc */

Voorbeeld van implementatie tegenwoordig, die prima werkt op praktisch alle browsers.

Verder vraag ik me af waarom je het font zelf omgezet hebt, aangezien het geen gratis font is Als je hem aanschaft voor web krijg je alles kant-en-klaar aangeleverd

[ Voor 7% gewijzigd door Bosmonster op 25-04-2012 12:01 ]

[Barryvdh]

Nouja, ik doelde dus ook op de Fontspring @Font-Face Syntax die hij beschrijft, die hetzelfde is, alleen zijn dus tegenwoordig niet alle formaten meer nodig.
De manier waarop je zo normal en bold als hetzelfde lettertype beschrijft, is wel een goede aanvulling inderdaad.

[Verwijderd]

Gr0wLiThE schreef op dinsdag 24 april 2012 @ 22:42:

Dan aanroepen met:

code:

font-family: "lettertype", "lettertype2;

Even opletten TS dat je het haakje niet vergeet. ;-)