Webfonts ondersteuninig

[Loller1]

Hallo,

Ik heb een tijd naar een antwoord zitten zoeken maar ik vond geen eenzijdige conclusie. Mijn vraag is als volgt: Ik gebruik Font Awesome (versie 4.3) in mijn software project. Font Awesome komt echter met 6 verschillende formaten: otf, eot, svg, ttf, woff en woff2. Dat is allemaal leuk en aardig, maar met 701 KB aan data, maakt dat voor een kleine 40% van de totale bestandsgrootte van mijn project. Ik zou graag willen weten welke jullie veronderstellen onnodig te zijn als mijn webapplicatie ondersteuning moet bieden voor Internet Explorer 9, 10 en 11, de laatste versie van Firefox, de laatste versie van Chrome en Safar 7 en 8 op Windows 7, 8, 8.1 en 10, Mac OS X 10.9 en 10.10, iOS 7 en 8, Windows Phone 8.1 en Android 4.4. Dus, welke formaten kunnen verwijderd worden zonder ondersteuning voor alle bovenstaande platformen te breken?

Note: het is niet de bedoeling om CDNs te gebruiken, dus dat is geen oplossing.

Alvast bedankt.

[ Voor 4% gewijzigd door Loller1 op 07-02-2015 09:40 ]

[Zoefff]

Om die browsers goed te kunnen ondersteunen heb je OTF, EOT, SVG, TTF, WOFF en WOFF2 nodig.

[Zoefff]

Zonder gekheid, als je al die verschillende browsers wilt ondersteunen zit je al snel vast aan deze set aan fonts. Het is natuurlijk niet zo dat alles ook gedownload wordt; de browser download als het goed is alleen het formaat dat hij nodig heeft. Je project wordt er dus wel groter van, maar het gaat wat mij betreft uiteindelijk om wat de eindgebruiker moet downloaden. En dat blijft beperkt

[TI_Observer]

En waarom gebruik je geen cdns? Dat is altijd beter, behalve als je offline wilt programmeren.

[RaZ]

40% van het dataverkeer? Nou, echt niet hoor Bij de eerste pageview van de gebruiker op het moment dat je die webfont gebruikt, ja, dan wel. Maar daarna heeft de browser het font in de cache zitten, en wordt het eigenlijk niet meer gedownload..

Het is dus niet zo dat elke pageview 700k aan fontdata met zich meebrengt..

[Loller1]

sheez88 schreef op zaterdag 07 februari 2015 @ 10:22:
En waarom gebruik je geen cdns? Dat is altijd beter, behalve als je offline wilt programmeren.

Omdat we momenteel in een preview-fase zitten en hebben besloten om hier geen gebruik van te maken tot we stable bereiken.

RaZ schreef op zaterdag 07 februari 2015 @ 10:30:
40% van het dataverkeer? Nou, echt niet hoor Bij de eerste pageview van de gebruiker op het moment dat je die webfont gebruikt, ja, dan wel. Maar daarna heeft de browser het font in de cache zitten, en wordt het eigenlijk niet meer gedownload..

Het is dus niet zo dat elke pageview 700k aan fontdata met zich meebrengt..

Niet 40% van het dataverkeer, maar 40% van de grootte van het pakket. En ons doel is om dat ook zo klein mogelijk te houden. Lichtgewicht op ieder vlak. Het gebruik van CDNs komt later.

[n8n]

Je hebt ook sites waar je subsets kan maken van iconfonts, icomoon is een goeie

[Zoefff]

Lichtgewicht is een goed streven, maar je moet het jezelf ook niet te lastig maken. Brede browser ondersteuning betekent nou eenmaal dat je fonts in meerdere formaten moet aanbieden. Als je er dieper in wilt duiken is er voldoende informatie over de verschillende formaten te vinden. De bulletproof font face implementation geeft (ondanks dat dit uit 2009 stamt) een goede uitleg. Een ander nuttig artikel met veel nuttige links is using font face op css-tricks.com.

Wat je sowieso nog kan doen om de bestandsgrootte omlaag te krijgen is zelf een eigen font genereren waar alleen de iconen in zitten die je gebruikt. Een goede generator waar o.a. de icons van Font Awesome in zitten is fontello.

[n8n]

Volgens mij bereik je al browsers trouwens al met ttf en otf

Zie caniuse: http://caniuse.com/#search=Ttf

Edit: sterker nog, je hebt alleen woff nodig: http://caniuse.com/#search=woff

[ Voor 55% gewijzigd door n8n op 07-02-2015 15:04 ]

[Juup]

Kijk eens in Firebug of Chrome Developer tools welke font bestanden er ECHT gedownload worden per browser.

[Bosmonster]

n8n schreef op zaterdag 07 februari 2015 @ 15:00:
Volgens mij bereik je al browsers trouwens al met ttf en otf

Zie caniuse: http://caniuse.com/#search=Ttf

Edit: sterker nog, je hebt alleen woff nodig: http://caniuse.com/#search=woff

OTF en TTF wil je niet gebruiken juist, dat zijn desktop fonts.

Woff is de standaard voor webfonts. Woff2 is de nieuwe versie daarvan (niet noodzakelijk).

Voor IE wil je ook EOT.

Feitelijk heb je alleen EOT en WOFF nodig als absoluut minimum.

[Spinal]

Bosmonster schreef op maandag 09 februari 2015 @ 11:55:Woff is de standaard voor webfonts. Woff2 is de nieuwe versie daarvan (niet noodzakelijk).

Niet noodzakelijk, maar als je een zo klein mogelijk pakket wil sturen naar je gebruikers, dan is WOFF2 wel prettig kan al gauw 20% schelen ten opzichte van WOFF!

[n8n]

Bosmonster schreef op maandag 09 februari 2015 @ 11:55:
[...]


OTF en TTF wil je niet gebruiken juist, dat zijn desktop fonts.

Woff is de standaard voor webfonts. Woff2 is de nieuwe versie daarvan (niet noodzakelijk).

Voor IE wil je ook EOT.

Feitelijk heb je alleen EOT en WOFF nodig als absoluut minimum.

woff werkt volgens caniuse al vanaf ie9, dan kan je eot ook de deur wijzen. Als de projectmap zo klein mogelijk moet zijn, zoals aangegeven zou alleen woff voldoende zijn. Als woff2 er bij past zou ik dat zeker niet laten. Verder werken desktop fonts prima, ze zijn hooguit obsolete door de brede ondersteuning van woff, wat de industriestandaard genoemd mag worden.

Sidenote, svg is eol, chrome heeft ondersteuning al verwijdert. Svg heeft ook geen ondersteunin voor open type dus was altijd al het debiele broertje voor alles behalve icon fonts, die hebben dat niet nodig. Svg rendert in de regel wel net wat scherper, in dat opzicht wel jammer.

[The Milkman]

sheez88 schreef op zaterdag 07 februari 2015 @ 10:22:
En waarom gebruik je geen cdns? Dat is altijd beter, behalve als je offline wilt programmeren.

"Altijd" is ook wat overdreven

[MoietyMe]

n8n schreef op maandag 09 februari 2015 @ 14:58:
[...]
Verder werken desktop fonts prima, ze zijn hooguit obsolete door de brede ondersteuning van woff, wat de industriestandaard genoemd mag worden.

Desktop fonts bevatten over het algemeen—in verband met print—meer informatie over glyphs en dergelijke dan web varianten. Hoe dat tegenwoordig zit met retina devices e.d. weet ik niet precies.

[n8n]

Good Fella schreef op maandag 09 februari 2015 @ 17:27:
[...]

Desktop fonts bevatten over het algemeen—in verband met print—meer informatie over glyphs en dergelijke dan web varianten. Hoe dat tegenwoordig zit met retina devices e.d. weet ik niet precies.

Heeft met retina niets te maken maar steeds meer van de open type functies komen beschikbaar in css. Optische kerning en basic ligitaure werken al een tijdje met prefixes op vrijwel elke browser, nu zijn ze bezig met small-caps, lining numerals etcetera. Best mooi spul en vooralsnog vrijwel niet te doen behalve door meerdere versies van een font met verschillende subsets te maken, beetje zoals in het pre-ttf/otf tijdperk op de desktopomgeving.

Aanvullend: http://opentype.info/blog...y-with-opentype-features/ (uitleg) en http://www.elliotjaystock...cap-on-opentype-features/ (status quo)

Voor de initiële vraag, woff moet voldoende zijn, kleine kans dat ook eot erbij moet. Met oog op de toekomst kan je vast woff2 toevoegen. Woff kent alle open type data van otf/ttf, het is basically een zip van zo'n bestand specifiek voor het web.

[ Voor 21% gewijzigd door n8n op 09-02-2015 21:34 ]

[R4gnax]

Bosmonster schreef op maandag 09 februari 2015 @ 11:55:
[...]

OTF en TTF wil je niet gebruiken juist, dat zijn desktop fonts.

Woff is de standaard voor webfonts. Woff2 is de nieuwe versie daarvan (niet noodzakelijk).

Voor IE wil je ook EOT.

Feitelijk heb je alleen EOT en WOFF nodig als absoluut minimum.

OTF/TTF heb je nodig voor Android builds ouder dan 4.4, waar ondersteuning voor WOFF nog ontbreekt. In sommige gevallen (vendor-specific ROMs, neem ik aan) is support voor WOFF gebackport, maar daar kun je totaal niet vanuit gaan.

[JaPPa03]

Kun je de font niet inzetten via Google Fonts?

[HollowGamer]

JaPPa03 schreef op woensdag 11 februari 2015 @ 13:38:
Kun je de font niet inzetten via Google Fonts?

Allemaal leuk die services, vind je het niet erg om je (site) data aan hun door te spelen? Of dacht je dat Google Fonts track vrij was?

Verder kan je het ook allemaal prima zelf hosten. Vergeet ook niet op de fonts een cache (header) te zetten!

[JaPPa03]

HollowGamer schreef op zaterdag 14 februari 2015 @ 00:17:
[...]

Allemaal leuk die services, vind je het niet erg om je (site) data aan hun door te spelen? Of dacht je dat Google Fonts track vrij was?

Verder kan je het ook allemaal prima zelf hosten. Vergeet ook niet op de fonts een cache (header) te zetten!

En zonder Google Fonts heb ik geen last van tracking? ...En laden via Google Fonts is beter geoptimaliseerd dan eigen host.

[HollowGamer]

JaPPa03 schreef op dinsdag 24 februari 2015 @ 20:17:
[...]


En zonder Google Fonts heb ik geen last van tracking? ...En laden via Google Fonts is beter geoptimaliseerd dan eigen host.

Als je (intranet) website niet is uitrust met Google Ads, like-buttons, etc. heb je volgens mij geen last van tracking. Of je zou al last moeten hebben van een add-on en/of spyware/adware.

Dat laatste punt: kan je dit in cijfers/benchmark aantonen? Volgens mij moet er altijd nog een extra verbinding worden gelegd (namelijk naar Google-servers), zeker als je dit naar HTTPS moet omleiden wegens een secure verbinding op je eigen site.

[JaPPa03]

HollowGamer schreef op dinsdag 24 februari 2015 @ 21:09:
[...]

Als je (intranet) website niet is uitrust met Google Ads, like-buttons, etc. heb je volgens mij geen last van tracking. Of je zou al last moeten hebben van een add-on en/of spyware/adware.

Dat laatste punt: kan je dit in cijfers/benchmark aantonen? Volgens mij moet er altijd nog een extra verbinding worden gelegd (namelijk naar Google-servers), zeker als je dit naar HTTPS moet omleiden wegens een secure verbinding op je eigen site.

Prestatieverschil is gebaseerd op eigen bevindingen. En zeker met webfont loader en Google Fonts is het enorm snel.

En dat eerste punt, wanneer je Google Analytics of welk dan ook, ook die data is niet alleen voor jezelf. Komt nog bij dat je je kunt vragen of dat erg is.

[ Voor 10% gewijzigd door JaPPa03 op 24-02-2015 21:26 ]

[Ramon]

JaPPa03 schreef op dinsdag 24 februari 2015 @ 21:25:
[...]


Prestatieverschil is gebaseerd op eigen bevindingen. En zeker met webfont loader en Google Fonts is het enorm snel.

Maar komt dat door "optimalisatie" of doordat Google Fonts gecached worden?

[JaPPa03]

Ramon schreef op dinsdag 24 februari 2015 @ 21:26:
[...]

Maar komt dat door "optimalisatie" of doordat Google Fonts gecached worden?

Cache stond uit tijdens mijn ervaringen. Maar voel je vrij om je eigen bevindingen te posten :-)

[sig69]

Ben ik de enige die zich afvraagt waarom het project zo klein moet zijn? Een project van 1700-1800 kilobyte is nou niet bepaald enorm te noemen.

[HollowGamer]

JaPPa03 schreef op dinsdag 24 februari 2015 @ 21:25:
[...]


Prestatieverschil is gebaseerd op eigen bevindingen. En zeker met webfont loader en Google Fonts is het enorm snel.

En dat eerste punt, wanneer je Google Analytics of welk dan ook, ook die data is niet alleen voor jezelf. Komt nog bij dat je je kunt vragen of dat erg is.

Het eerste punt is dan toch een beetje los zand. Je kunt namelijk meten met de developer tools die tegenwoordig in elke browser is ingebouwd. Zo kost het laden van een intranet-site webfont (op Linux) volgens Chrome ongeveer 2ms (weet even niet meer formaat & font-naam).

Dit kun je dus ook uitlezen als de Google webfont-service wordt gebruikt.
Tevens brengt elke extra connectie (font/cache ophalen/connectie leggen..) een bepaalde overhead met zich mee.

Uit het tweede punt kom ik niet echt uit. Wat bedoel je nou precies? Dat het niet erg is dat er aan tracking wordt gedaan? Ik vind dit bijvoorbeeld wel een belangrijk punt, zeker als je een project echt voor jezelf wilt houden (lees intern).

[André]

Die 2 ms lijkt me aan de krappe kant, ik heb professioneel getest voor enkele grote nederlandse sites met custom fonts. En dan niet n=1 metingen met downloadtijden in de console, maar duizenden meting met het navigation timing object. En de resultaten liegen er niet om: er worden een aantal extra connecties opgezet (.eof, .woff, enz), vaak ook driedubbel voor italic en bold varianten, dus minimaal 6 connecties. Maar daarna begint het echte werk: alle elementen op de site moeten opnieuw uitgerekend worden omdat blokken met tekst opeens andere formaten krijgen. Hierdoor krijg je te maken met diverse reflows wat op pagina's met grote diepe DOM structuren veel impact kan hebben. En helemaal met de 'trage' rekenkracht van mobiel en tablets kan dit flink vertragen.

Persoonlijk zou ik voor een font kiezen welke op de meeste systemen standaard aanwezig is.

[ Voor 7% gewijzigd door André op 24-02-2015 22:16 ]

[HollowGamer]

André schreef op dinsdag 24 februari 2015 @ 22:14:
Die 2 ms lijkt me aan de krappe kant, ik heb professioneel getest voor enkele grote nederlandse sites met custom fonts. En dan niet n=1 metingen met downloadtijden in de console, maar duizenden meting met het navigation timing object. En de resultaten liegen er niet om: er worden een aantal extra connecties opgezet (.eof, .woff, enz), vaak ook driedubbel voor italic en bold varianten, dus minimaal 6 connecties. Maar daarna begint het echte werk: alle elementen op de site moeten opnieuw uitgerekend worden omdat blokken met tekst opeens andere formaten krijgen. Hierdoor krijg je te maken met diverse reflows wat op pagina's met grote diepe DOM structuren veel impact kan hebben. En helemaal met de 'trage' rekenkracht van mobiel en tablets kan dit flink vertragen.

Persoonlijk zou ik voor een font kiezen welke op de meeste systemen standaard aanwezig is.

Nou ja, je kunt er een caching header opzetten. Dan wordt deze namelijk gecached en duurt alleen de eerste keer ophalen iets langzamer.

Ik zou liever een algemene oplossing willen zien: Fonts die kunnen worden toegevoegd aan het systeem/browser. Maar dit opent helaas weer de weg naar malware (zie ActiveX).

[Ramon]

André schreef op dinsdag 24 februari 2015 @ 22:14:
Die 2 ms lijkt me aan de krappe kant, ik heb professioneel getest voor enkele grote nederlandse sites met custom fonts. En dan niet n=1 metingen met downloadtijden in de console, maar duizenden meting met het navigation timing object. En de resultaten liegen er niet om: er worden een aantal extra connecties opgezet (.eof, .woff, enz), vaak ook driedubbel voor italic en bold varianten, dus minimaal 6 connecties. Maar daarna begint het echte werk: alle elementen op de site moeten opnieuw uitgerekend worden omdat blokken met tekst opeens andere formaten krijgen. Hierdoor krijg je te maken met diverse reflows wat op pagina's met grote diepe DOM structuren veel impact kan hebben. En helemaal met de 'trage' rekenkracht van mobiel en tablets kan dit flink vertragen.

Persoonlijk zou ik voor een font kiezen welke op de meeste systemen standaard aanwezig is.

Uiteraard heb je gelijk in dat een native font sneller is dan een webfont, maar het gaat hier om font Awesome, dat betekent dat je moet vergelijken met een reeks images of een sprite.

Punt van het gebruiken van een CDN is dat omdat de font mogelijk al eerder is geladen op een andere site er helemaal niets meer geladen hoeft te worden, in die gevallen is dat wel degelijk sneller dan het font zelf hosten. Maar dat geldt alleen voor de first-load, nu hangt het van je doelgroep af hoe belangrijk die first-load is.

[MoietyMe]

Dit is een goed artikel over het laden van webfonts .

[JaPPa03]

sig69 schreef op dinsdag 24 februari 2015 @ 21:30:
Ben ik de enige die zich afvraagt waarom het project zo klein moet zijn? Een project van 1700-1800 kilobyte is nou niet bepaald enorm te noemen.

Mee eens. Maar zo kleine mogelijk houden van je website kan nooit kwaad. Je kunt een selectie maken van de icons die wilt hebben en daar een aparte font-set van maken. Dan is die 700kb opeens veel minder..

[MueR]

André schreef op dinsdag 24 februari 2015 @ 22:14:
Persoonlijk zou ik voor een font kiezen welke op de meeste systemen standaard aanwezig is.

Dit, of fonts gebruiken vanaf CDNs als Google Fonts, die veel gebruikt worden op andere sites, zodat de kans bestaat dat mensen deze al in de cache hebben.

[sig69]

JaPPa03 schreef op donderdag 26 februari 2015 @ 09:35:
[...]

Mee eens. Maar zo kleine mogelijk houden van je website kan nooit kwaad. Je kunt een selectie maken van de icons die wilt hebben en daar een aparte font-set van maken. Dan is die 700kb opeens veel minder..

Ja dat klopt, maar hij heeft het hier niet over z'n website maar over z'n project, dus wat op in z'n ontwikkelomgeving op schijf staat (of ik moet het verkeerd begrepen hebben)

[JaPPa03]

sig69 schreef op donderdag 26 februari 2015 @ 12:44:
[...]

Ja dat klopt, maar hij heeft het hier niet over z'n website maar over z'n project, dus wat op in z'n ontwikkelomgeving op schijf staat (of ik moet het verkeerd begrepen hebben)

Hij heeft het toch echt over een webapplicatie en over gebruik van browsers.

[sig69]

Ik snap dat het om een webapplicatie gaat, doet eigenlijk niet eens terzake. Maar de TS zegt dit:

Niet 40% van het dataverkeer, maar 40% van de grootte van het pakket. En ons doel is om dat ook zo klein mogelijk te houden.

Pakket = project = alle bestanden, dus niet wat er uiteindelijk daadwerkelijk ook gebruikt wordt.

[R4gnax]

Good Fella schreef op woensdag 25 februari 2015 @ 10:04:
Dit is een goed artikel over het laden van webfonts .

Dit is een beter artikel over het laden van web-fonts.

[MoietyMe]

R4gnax schreef op donderdag 26 februari 2015 @ 20:01:
[...]


Dit is een beter artikel over het laden van web-fonts.

Filament group is altijd goed, thanks

[R4gnax]

Good Fella schreef op vrijdag 27 februari 2015 @ 10:38:
[...]

Filament group is altijd goed, thanks

Yup. Graag gedaan.