Google Webfont rendering in Windows

[Ronnyrr]

Beste Tweakers,

De laatste tijd maak ik veel gebruik van Google Webfonts, waarmee ik ook steeds vaker tegen het probleem aanloop dat deze fonts heel slecht gerenderd worden in Windows.

Heb veel oplossingen geprobeerd te zoeken, maar niks lijkt te werken.

Als eerste las ik veel over de ClearType instellingen, dat deze niet goed zouden staan.
Nou lijkt het mij al frapant dat je aan elke gebruiker van je website zou moeten doorgeven dat hij zijn instellingen moet gaan veranderen. Bleek het na deze instellingen veranderd te hebben ook nog eens niet te werken.

Dan kwam ik nog een aantal "oplossingen" tegen, zoals het toevoegen van een text shadow en -webkit-font-smoothing: antialiased; ook dit lijkt niet te werken bij mij.

Dan kwam ik nog een topic op StackOverflow tegen waarbij mensen aanraadde een programmatje te gebruiken dat het probleem zou moeten oplossen, zie: http://stackoverflow.com/...e-google-fonts-work-in-ie.
Echter lijkt ook dit niet te werken, waarna ik ten einde raad ben en het hier maar ga vragen.

Iemand enig idee wat hiervoor een oplossing is of wat hieraan gedaan kan worden?
Zelf ben ik een OSX gebruiker en kom het probleem dus eigenlijk nooit tegen. Alleen bij mijn klanten is het overgrootte deel nog een Windows gebruiker en de bezoekers van de websites vaak ook.

Iemand die mij verder kan helpen hiermee?
Alvast bedankt!

[jordy-maes]

Ik kan je enkel meedelen dat ik nog nooit 'slecht gerenderde' webfonts heb gezien.
Niet in ff, chrome, internet 9 weet niet over welke browser het gaat maar.

Heb je dit probleem ook op andere toestellen?

[_Thanatos_]

Ligt aan het font. Kennelijk zijn de fonts niet of niet goed "hinted". Dat zijn instellingen die de auteur moet doen in zijn font om ervoor te zorgen dat de randen van letters op pixels uitlijnen, even kort door de bocht. Dit kun je overslaan, en dan worden de letters geschaald alsof het normale vectorplaatjes zijn.

Helaas is hinting niet iets dat "even een instelling" is. Het kost vele uren werk om goed te krijgen, dus lang niet ieder font zal dit hebben. Het heeft dus waarschijnlijk weinig met Google Webfonts te maken, hoewel zonder dat heb je er meer controle over (ik raadt Google Webfonts sowieso af, ivm privacy, snelheid, offline development, en geen controle hebben).

Daarbij moet je er rekening mee houden fonts "nou eenmaal" nooit overal hetzelfde renderen. Zelfs op één OS in één browser kunnen er verschillen zijn, bijvoorbeeld tekst op de body versus tekst op een composite layer. IE9 en hoger gebruiken DirectWrite. Firefox doet het weer net anders, en andere browsen weer GDI rendering. Verschil met ClearType/smoothing/no-smoothing, verschil tussen Windows, OSX, Linux, Android, iOS en de rest, en god weet wat allemaal nog meer.

[majic]

Chome rendert fonts zelden anti-aliassed. Firefox en IE doen het beter, en bijv. Safari op OS-X is meestal het fraaiste. Waarom Chrome z'n eigen webfonts niet goed laat zien is me een raadsel (én een doorn in het oog).

Je kunt voor Chrome wel bijv. SVG fonts gebruiken, dan ziet de rendering er tiptop uit. Maar dan loop je weer tegen andere problemen aan.

[Low-Tech]

Google webfonts in samenwerking met een webkitbrowser onder windows geeft bij sommige fonts een slecht resultaat, vooral bij iets grotere koppen. De makkelijkste oplossing is in je css een stroke toe te voegen aan de koppen, soms is het vergroten/verkleinen van de font-size ook genoeg. Gevolg is wel onnodige stroke voor de Mac, aangezien het daar zonder stroke er prima uitziet.

[Ronnyrr]

Het ging in dit geval om het Quicksand font van Google.

Heb dit getest onder Windows 7 in een oudere versie van Chrome (weet niet precies welke) en IE8. Heb geen andere toestellen tot mijn beschikking met Windows en heb dit dus ook niet op andere Windows toestellen kunnen testen.

_Thanatos_ schreef op woensdag 21 augustus 2013 @ 19:44:
ik raadt Google Webfonts sowieso af, ivm privacy, snelheid, offline development, en geen controle hebben.

Zou je dit kunnen uitleggen? Hoor verder eigenlijk nooit iemand negatief over Google Webfonts, op de rendering van sommige fonts na dan.

Low-Tech schreef op woensdag 21 augustus 2013 @ 21:28:
De makkelijkste oplossing is in je css een stroke toe te voegen aan de koppen.

Had dit ook geprobeerd omdat ik dit in een topic was tegengekomen. Echter bleek ook dit niet te werken.

Kortom is er dus eigenlijk vrij weinig aan te doen en is misschien wel de beste oplossing om gewoon een ander font te kiezen?!

[ Voor 6% gewijzigd door Ronnyrr op 21-08-2013 22:24 ]

[Bosmonster]

Ik heb het betreffende font hier getest met Windows 7 onder IE9 en er is niks aan de hand. OS is een standaard VM waar niet met de instellingen gerommeld is.

Google Webfonts zijn over het algemeen redelijk geoptimaliseerd juist.

Alleen onder Windows XP (IE8) ziet het er niet uit, maar font-rendering onder XP is dan ook wel echt een drama.

_Thanatos_ schreef op woensdag 21 augustus 2013 @ 19:44:
ik raadt Google Webfonts sowieso af, ivm privacy, snelheid, offline development, en geen controle hebben.

Ik ben heel benieuwd naar je onderbouwing.

Privacy: Fonts worden aangeboden onder de SIL license. Wat is het probleem precies met privacy?
Snelheid: Er is echt niks mis met de snelheid van de Google servers
Offline development: Dit is altijd een issue als je externe webservices gebruikt natuurlijk. Maar wie ontwikkelt er nu offline? En anders kun je de fonts ook gewoon downloaden en lokaal installeren als fallback.
Geen controle: Juist bij Google Webfonts heb je redelijk veel controle, in verhouding tot concurrerende diensten (fonts.com bijvoorbeeld...).

Heb Google Webfonts meermalen gebruikt in grotere projecten, maar nog nooit tegen issues aangelopen eigenlijk.

[ Voor 76% gewijzigd door Bosmonster op 22-08-2013 09:55 ]

[TheNephilim]

Windows XP, daar ging het bij mij in Chrome regelmatig mis. Wat dan opviel, was dat Google zelf bij zijn Fonts dienst de fonts wel netjes gerendered had. Verder zien de fonts er in Windows 7 en op mobiele devices wel goed uit.

[R4gnax]

Bosmonster schreef op donderdag 22 augustus 2013 @ 09:49:
Privacy: Fonts worden aangeboden onder de SIL license. Wat is het probleem precies met privacy?

Waarschijnlijk wordt daar privacy voor de bezoekers van de website bedoeld. Een request voor een webfont met een referrer waarin de site vermeld staat is natuurlijk een extra mogelijke manier voor Google om IP-adressen te gaan koppelen aan bezoeken. (Eerlijk gezegd denk ik dat je je dan beter eerst druk mag gaan maken over andere zaken, maar goed.)

[Bosmonster]

Google zet in ieder geval geen cookies bij de request van de fonts, dus heel veel aan tracking zullen ze niet kunnen doen.

Al met al zou ik me daar inderdaad niet zo druk over maken. Anders geldt hetzelfde voor alle font-services.

[_Thanatos_]

Ronnyrr schreef op woensdag 21 augustus 2013 @ 22:24:[...]

Zou je dit kunnen uitleggen? Hoor verder eigenlijk nooit iemand negatief over Google Webfonts, op de rendering van sommige fonts na dan.

Geen probleem

Privacy: Google heeft een nieuw punt waarop ze kunnen inhaken op je website. Ze kunnen ermee zien welke sites-met-webfonts je bezoekers bezoeken. Gezien Google dit soort data 100% zeker bijhoudt, zadel je je bezoekers dus op met het, zullen we zeggen, interessante privacybeleid van Google. Kennelijk zonder dat jij als developer dat door hebt, maar ook zonder dat de bezoeker het door heeft. Google Analytics blokkeren heeft dan dus totaal geen zin meer.

Snelheid: Meestal zijn de Google servers wel snel, maar de internetverbinding is dat niet altijd. Als je bezoeker op een mobiele verbinding zit, zit er op z'n minst een verschil in latency en bandbreedte naar de server van je website en de servers van Google. Er is geen enkele reden waarom jouw server niet sneller zou kunnen reageren dan die van Google, dus het kan daardoor een zgn FOUT opleveren. Het kan ook zijn dat je een snelle verbinding hebt, maar op wat voor reden dan ook (en dat is vaak zat een terugkomend probleem geweest) de verbinding naar Google servers een paar seconde blijft hangen.

Offline development: Dat doe *jij* misschien niet. Er zijn mensen die na werktijd in de trein nog even door willen gaan. Moet ook gewoon kunnen. Maar het kan ook zijn dat je internetverbinding uitvalt. Het is natuurlijk niet acceptabel dat in zo'n geval development stil komt te liggen, omdat je niet meer betrouwbaar kunt stylen, omdat je het juist font niet binnenkrijgt.

Geen controle: Inderdaad, je hebt totaal geen controle over wat Google precies uitspuugt. Vziw krijg je zelfs browserspecifieke code, dus bijv EOT voor oldIE, SVG voor iOS, etc. Dat lijkt natuurlijk heel leuk, maar het is Google die dat bepaalt, en dat wil ik gewoon niet. Ik wil één implementatie zien voor alle browsers. Dat is makkelijk onderhoudbaar en goed leesbaar. Een ander aspect van geen controle hebben is dat Google op ieder gewenst moment de rendering van je website om zeep kan helpen, door een verkeerd font uit te spuugen of het font te verwijderen, of iets anders engs. En ja, dat is ons een keer gebeurd - dat het font ophield met bestaan (dat was wrs om licentieredenen).

Bosmonster schreef op donderdag 22 augustus 2013 @ 13:00:Al met al zou ik me daar inderdaad niet zo druk over maken. Anders geldt hetzelfde voor alle font-services.

Het grote verschil is dat Google een groot advertentiebedrijf is met veel te veel resources om dit soort datamining daadwerkelijk te doen. En cookies zijn voor Google niet absoluut noodzakelijk hoor.

[ Voor 7% gewijzigd door _Thanatos_ op 22-08-2013 13:23 ]