[CSS] Fontkit, letters vallen weg

[ViNyL]

Ik gebruik voor een pagina een fontkit van font-squirrel. Het font wat ik gebruik is Droid Sans.

Het font roep ik zo aan:

code:

@font-face {
    font-family: 'DroidSansRegular';
    src: url('[[root_url]]/uploads/site/fonts/DroidSans-webfont.eot');
    src: url('[[root_url]]/uploads/site/fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('[[root_url]]/uploads/site/fonts/DroidSans-webfont.woff') format('woff'),
         url('[[root_url]]/uploads/site/fonts/DroidSans-webfont.ttf') format('truetype'),
         url('[[root_url]]/uploads/site/fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

En vervolgens bijvoorbeeld:

code:

#content p {
font:14px 'DroidSansRegular', Geneva, Verdana, sans-serif;
}

Op de website van Font Squirrel wordt dit font getoond op 14px en ziet dat er prima uit. Als ik dit zelfde doe op een pagina van valt de letter "g" een beetje weg.
Door de line-height aan te passen ben ik er al achter dat dit niets uitkomt. Als ik het font op 13 of 15px toon is het probleem verdwenen.

Het ziet er zo uit:



Ik heb alle bovenliggende divs etc in mijn stylesheet nagekeken maar het heeft ook niets met overerven te maken.

Iemand een idee waar dit probleem door komt?

[RobIII]

Heb je geen testcase online staan? Want anders blijft het koffiedik kijken natuurlijk. Verder kom je met een Firebug/IE F12 Dev.tools/Chrome Dev.tools/Safari Dev.tools/Opera Dragonfly waarschijnlijk ook al een heel eind als je even het betreffende element inspecteert en de styles nader bekijkt.

[Voor 77% gewijzigd door RobIII op 06-07-2011 14:54]

[ViNyL]

RobIII schreef op woensdag 06 juli 2011 @ 14:53:
Heb je geen testcase online staan? Want anders blijft het koffiedik kijken natuurlijk.

Nee zal ik wel even doen. Staat bij een klant intern.

Hier even een klein voorbeeld:

http://wijmakenwebsites.nl/fontkit/

Ik heb even wat rond gezocht nadat ik de engels term voor mijn probleem wist: descenders

Het blijkt dat het om een flaw in het Droid Sans font gaat:
http://code.google.com/p/...ectory/issues/detail?id=8

Aangezien het probleem met het font al gefixt is en ik deze fontkit van Font Squirrel heb vermoed ik dat ze daar het oude font nog beschikbaar stellen.

[Voor 50% gewijzigd door ViNyL op 06-07-2011 15:35]

[MueR]

Ofwel je hebt het opgelost, of het is een browser-specifiek probleem. In FF5 heb ik er namelijk geen last van.

[ViNyL]

MueR schreef op woensdag 06 juli 2011 @ 15:45:
Ofwel je hebt het opgelost, of het is een browser-specifiek probleem. In FF5 heb ik er namelijk geen last van.

Ja dat kan inderdaad ook nog. Kan helaas niet alle browsers proberen hier maar er zit inderdaad verschil in.

[Acid_Burn]

Hier in FF5 zie ik het probleem wel.

[RobIII]

Acid_Burn schreef op woensdag 06 juli 2011 @ 15:57:
Hier in FF5 zie ik het probleem wel.

Ik ook; maar ik heb sowieso vage problemen met fonts en FX.

[MueR]

Dan is het misschien eerder een driver probleem, waardoor de font rendering een beetje oeps gaat.

[Paradox]

Bij mij ligt het eraan of ik inzoom of niet.. Standaard zie ik een halve G, zoom ik 1 slag in of uit zie ik ze goed. (chrome op Win7)

[FailFr8er]

Paradox schreef op woensdag 06 juli 2011 @ 16:41:
Bij mij ligt het eraan of ik inzoom of niet.. Standaard zie ik een halve G, zoom ik 1 slag in of uit zie ik ze goed. (chrome op Win7)

Same here, FF5 op een Windows XP bak.

[Brad Pitt]

Met Opera inderdaad ook een wegvallende "g". Na inzoomen trouwens niet, dan is 'ie gewoon goed.

[Voor 36% gewijzigd door Brad Pitt op 06-07-2011 16:46]

[418O2]

Hou je toch...

Custom fonts via fontsquirrel op een klein formaat is niet zo'n groot succes. Waarom gebruik je trouwens Droid Sans via FontSquirrel als je ook Google Webfonts kan gebruiken?

Webfonts op een erg klein formaat moet je echt met Google Webfonts, Typekit oid doen. Soms wil het wel via FontSquirrel, maar echt perfect is het niet voor broodteksten.

[Voor 31% gewijzigd door 418O2 op 06-07-2011 16:46]

[Ook al Bezet]

het rare is dat ze bij mij bij het inzoomen, in Opera 11.5, om en om wegvallen. Eerst valt bij de bovenste een deel van de g's weg, als ik een stap inzoom bij de onderste, nog een stapje en de bovenste zijn weer de klos, en zo voorts. Al zijn er ook een paar stapjes waar het bij allebij goed of fout gaat.

Dit op een scherm met een resolutie van 1366x768, mocht dat uitmaken.

418O2 schreef op woensdag 06 juli 2011 @ 16:45:
Waarom gebruik je trouwens Droid Sans via FontSquirrel als je ook Google Webfonts kan gebruiken?

Zijn dat niet uiteindelijk dezelfde bestanden dan?

[Voor 39% gewijzigd door Ook al Bezet op 06-07-2011 17:06]

[MueR]

Gebruikt trouwens voor custom fonts zo veel mogelijk pt in plaats van px. Dat schaalt beter. Over het algemeen gaan browsers daar beter mee om.

[Propheticus]

FF5.0 geen enkel probleem met de G's hier. Ook bij in en uitzoomen.

[justahuman]

hier is safari ook geen elkel probleem. (safari 4)

[Acid_Burn]

Ter info: op mijn werk op XP/FF5 gaat het fout. Thuis Win7/FF5 gaat het goed...

[R4gnax]

Acid_Burn schreef op woensdag 06 juli 2011 @ 18:50:
Ter info: op mijn werk op XP/FF5 gaat het fout. Thuis Win7/FF5 gaat het goed...

Heeft waarschijnlijk van doen met een verschil in GDI (WinXP) en DirectWrite (Win7) rendering. GDI rendering een beetje deftig doen met custom fonts kan heel goed, maar dan moet je font absoluut goed geauthored zijn met degelijke hinting. (DirectWrite heeft hier niet zo'n last van, omdat het alles zelf op subpixels uit kan lijnen, waar GDI eigenlijk alleen op hele pixels uitlijnt en met wat ClearType de boel een beetje flest.)

@TS:
Probeer je webfont kit op FontSquirrel eens opnieuw op te bouwen via de font-face generator en speel daar met de PostScript Hinting en Em Square Value opties.

[ViNyL]

418O2 schreef op woensdag 06 juli 2011 @ 16:45:
Custom fonts via fontsquirrel op een klein formaat is niet zo'n groot succes. Waarom gebruik je trouwens Droid Sans via FontSquirrel als je ook Google Webfonts kan gebruiken?

FontSquirrel biedt ze voor alle versies aan. Voor zo ver ik Google Webfonts begrijp moet je een remote URL includen. Omdat ik alles liever op een plek heb staan ivm met bereikbaarheid gebruik ik FontSquirrel.

R4gnax schreef op woensdag 06 juli 2011 @ 19:03:
@TS:
Probeer je webfont kit op FontSquirrel eens opnieuw op te bouwen via de font-face generator en speel daar met de PostScript Hinting en Em Square Value opties.

Dat heb ik gedaan. Ook meest recente versie van de font omgezet omdat aangegeven wordt dat het probleem is opgelost. Helaas werkt dit alles niet.

OpenSans is een vergelijkbaar font en daar heb ik de problemen niet mee. Ik denk dat ik DroidSans dus inruil.

Thanks voor alle replies ook, ik dacht dat ik gek werd of ergens een domme fout had zitten. Heb mijn CSS wel 10 keer opnieuw doorgenomen zonder resultaat.

[Voor 42% gewijzigd door ViNyL op 06-07-2011 20:18]