Microsoft schaart zich achter Web Open Font Format

Microsoft heeft het Web Open Font Format omarmd. De woff-standaard, die ter goedkeuring aan het W3C is voorgelegd, moet het voor webontwikkelaars eenvoudiger maken om verschillende lettertypen op webpagina's te gebruiken.

Onder andere de browserbouwers Mozilla en Opera spraken al eerder hun steun voor het Web Open Font Format uit, maar ook verschillende font foundries zoals Adobe, House Industries, ITC Fonts, Linotype en Monotype namen de standaard in gebruik. Nu Microsoft zijn steun voor de open standaard heeft uitgesproken, heeft woff een goede kans om uit te groeien tot het standaardformaat voor het embedden van lettertypen in webpagina's.

De woff-standaard moet het mogelijk maken om elk denkbaar lettertype in een webpagina te verwerken. Een webontwikkelaar die fonts in alle browsers min of meer gelijk wil laten ogen, heeft tot nog toe de keuze uit slechts een handvol fonts dat op de meeste systemen aanwezig is, of hij moet zijn toevlucht nemen tot afbeeldingen. Woff moet aan deze praktijk een einde maken: de standaard biedt compressie van fontbestanden, het tonen van de licentievoorwaarden en het beschikbaar stellen van slechts een deel van een complete fontserie, zogenaamde subsets.

Onduidelijk is nog of Microsoft de open fontstandaard al in Internet Explorer 9 zal verwerken, maar begin dit jaar omarmde de softwaregigant de svg-standaard voor vectorgraphics en onlangs dook deze al op in een previewversie van de nieuwe browser. Ook is nog onduidelijk of de WebKit-browsers Chrome en Safari de standaard zullen ondersteunen.

Reacties (46)

Een webontwikkelaar die fonts in alle browsers min of meer gelijk wil laten ogen, heeft tot nog toe de keuze uit slechts een handvol fonts dat op de meeste systemen aanwezig is, of hij moet zijn toevlucht nemen tot afbeeldingen.

Of sIFR natuurlijk, allleen heb je dan als nadeel dat de gebruiker Flash nodig heeft om het font te kunnen zien.

Goede ontwikkeling in ieder geval . Als het goedgekeurd wordt, hoe gaat het dan worden doorgevoerd? Zal het huidige font css-attribuut worden aangepast om hiermee overweg te kunnen? Dat je dan dus gewoon de bestandslocatie van het lettertype opgeeft, zoiets:
font-family: "Font.ext", Arial, sans-serif;?

[Reactie gewijzigd door jacobras op 22 april 2010 17:38]

@font-face wordt gebruikt. Dat ziet er volgens een voorbeeld zo uit:

@font-face {
font-family: GentiumTest;
src: url(fonts/GenR102.woff) format("woff"),
url(fonts/GenR102.ttf) format("truetype");
}

body {
font-family: GentiumTest, Times, Times New Roman, serif;
}

bron: http://hacks.mozilla.org/2009/10/woff/

Of Cufón, waarbij je geen plugins zoals Flash nodig hebt.

Heeft nog steeds bijna alle nadelen van sIFR, zoals gebruik van javascript (en in dit geval vml, svg, html5 canvas), trager ladende pagina's, gebruikt meer resources, enzovoort. En dat alles voor het tonen van wat tekst op een web-pagina.

Net als sIFR zijn dit doorgeslagen technieken die zelf een groter probleem vormen dan het "probleem" dat ze proberen op te lossen (namelijk het kleine aantal web-safe fonts). Gelukkig zullen dit soort onhandige technieken binnen enkele jaren voorgoed tot het verleden behoren. @font-face kan nu al worden gebruikt voor de wat modernere browsers, en verder wacht ik liever nog een tijdje af tot het allemaal wat eleganter wordt opgelost. Zoals met deze nieuwe standaard dus.

[Reactie gewijzigd door geert1 op 22 april 2010 20:18]

Goede zaak dit, langzamerhand komen er steeds meer openstandaarden op de markt

Wat voor webdevelopmers waaronder ik zelf, erg handig is.
Hoop zelf dat MS dit in IE9 al gaat integreren.
En uiteraard dat Safari en Chrome niet koppig gaan doen en deze standaard ook gaan ondersteunen.

Ben benieuwd of we straks games met high graphics ook met een openstandaard in de browser kunnen laten draaien.
Wat google volgensmij tijdje terug ook niet zien.

[Reactie gewijzigd door mmjjb op 22 april 2010 17:35]

Dat zeker. Scheelt in ieder geval weer wat gedoe met Cufon (of iets vergelijkbaars) als je een custom font wil.

Waarom geen gebruik maken van @font-face i.p.v. dat cufon of sIFR?

Ik doe b.v. voor elke style (italic / bold / italic-bold / normal):

@font-face {
font-family: eenofanderefont;
font-style: italic;
src: url("../fonts/eenofanderefont-Italic.otf") format("truetype"), url("../fonts/eenofanderefont-Italic.ttf") format("truetype");
}

// via conditional comments IE only served stylesheet
@font-face {
font-family: eenofanderefont;
font-style: italic;
font-weight: normal;
src: url(../fonts/eenofanderefont-Italic.eot);
}

Enige wat een beetje geklooi is om die eot te genereren (moet je niet via dat gare ding van Microsoft uit het jaar nul doen maar via een TTF to EOT converter).

Maar wel cool dat Microsoft eindelijk iets anders gaat ondersteunen dan het eigen eot formaat, kun je met WOFF eigenlijk ook gewoon italic / normal / bold en italic bold samenvoegen in 1 file? want dat is namelijk best anoying met b.v. die TTF's of OTF's

Edit:
@GoddXX2

Bedankt voor de link, maar wat ik bedoelde is dat ik nu in de stylesheet moet linken naar die 4 font bestanden wat weer 4 requests is, wat imo beter zou zijn als het gewoon 1 bestand is die de 4 stylen (normal / bold / bold italic / italic) bevat.

[Reactie gewijzigd door dotnetpower op 23 april 2010 19:37]

Wat dacht je van http://www.fontsquirrel.com/? In één keer een heel pakketje dat je foutloos kan gebruiken op alle browsers (behalve FF3.0). Elke browser download het font dat de browser ondersteunt en dus geen extra dataverkeer voor een gebruiker.

Aan fontsquirrel heb je natuurlijk geen drol als je bezig bent voor een bedrijf dat op haar website de huisstijl font wil hebben, want dat zijn vrijwel altijd commerciele fonts.

Voor hobby Bob misschien grappig, maar dan houdt het ook op.

Daarom is dit WOFF gebeuren natuurlijk veel interessanter.

@font-face werkt nu ook niet bepaald geweldig (vaak slechte anti-aliasing bij font-sizes onder de 16px en sowieso grote verschillen in rendering in de diverse browsers). Moet je de boel eerst weer online testen op http://webfontspecimen.com/ etc.

Daar komt nog bij de @font-face bij commerciele fonts gewoon illegaal is, omdat je de complete fontset online zet, en dat mag niet

[Reactie gewijzigd door SecondReality op 23 april 2010 09:48]

Daar komt nog bij de @font-face bij commerciele fonts gewoon illegaal is, omdat je de complete fontset online zet, en dat mag niet

In feite gebeurt dat ook bij Cufòn, aangezien je daar de glyph vectors ook open en bloot in Javascript hebt staan. Het blijft een moeilijk issue met rechten.

"alle browsers (behalve FF3.0)"

Ik zag dat er Cufon tussen zat, en dat werkt toch gewoon op FF3.0? Dat werkt immers zelfs op IE6.

Mjah intussen is 3.5 alweer oude soep en heeft iedereen 3.6. Missende support van Chrome 3, IE3, FF3 en Opera 9 boeien niet zo.

Lol zo wordt je nooit een grote partij! Jaah ons systeem is goed maar het werkt niet op een groot deel van de systemen die niet elke keer worden geupdate

Ik draai Firefox naast IE in mijn zakelijke omgeving. Ik ga niet na elke update gelijk updaten, ik test het eerst grondig op mijn eigen systemen, daarna gaan de laptop users en dan pas de citrix users (ligt aan de drukte ed maar dat kan wel een half jaar duren)

Chrome 3 heeft, dacht ik, al ondersteuning voor svg fonts.

sIFR = Flash = evil*

* denk aan iPhone

Het is apple die adobe niet toestaat flash voor de iphone uit te brengen waardoor die sites niet werken. Als je dus iemand evil wil noemen is dat dus Apple

Inderdaad, dit gebruik ik altijd. Werkt er goed.

Daar heb je gelijk in, echter zal het toch wel een paar jaar duren voor dit echt gemeengoed is. Stel dat het in IE9 geïntegreerd wordt, hoe lang zal het duren tot IE9 de status heeft die IE6 (of inmiddels wel 7) nu heeft? Want die browsers mag een webdeveloper normaal gesproken nog steeds niet vergeten.

Daarnaast zijn er volop fonts die embedden verbieden, waardoor je soms toch weer bij een plaatje (desnoods serverside gegenereerd) uit gaat komen. Dat blijft een probleem, hoe veelbelovend deze oplossing ook lijkt/is.

Heel fijn dit inderdaad. Woff werkt super, en anders ben je maar weer aan het kloten met cufon of sifr.. Waarom moest dit toch zo lang duren?

Waarom moest dit toch zo lang duren?

Commerciele belangen doorgaans.

er steeds meer openstandaarden op de markt.

Meer standaarden is niet per definitie beter, eerder slechter. Open ook niet. Je wilt een klein aantal openbare en eenduidige standaarden die door iedereen omarmd worden.

je neemt het veel te letterlijk.
er was geen standaard voor het embedden van fonts, nu is die er wel. dus er is een standaard bijgekomen (maw er zijn nu meer standaarden), en dat is positief. als er opeens drie nieuwe standaarden voor font embedding zouden zijn zou dat natuurlijk niet goed zijn, maar daar gaat het nu niet over.

[...]

Meer standaarden is niet per definitie beter, eerder slechter. Open ook niet. Je wilt een klein aantal openbare en eenduidige standaarden die door iedereen omarmd worden.

Meerdere parallelle standaarden kunnen natuurlijk een probleem vormen. Maar, als ik mij niet vergis was er op dit gebied nog geen standaard.

Meer standaarden is niet per definitie beter, eerder slechter

Het gaat hier niet om een nieuwe standaard voor een al bestaande technologie, maar een standaard voor iets dat er nog niet is.
Ok, sIFR bestaat al maar dat zie ik toch meer als een soort hack dan een daadwerkelijke standaard.

Dat ik deze dag nog mee mag maken! IE ondersteunt met versie IE9 al dingen als snelle Javascript, SVG, rounded corners in CSS en dat soort dingen, maar alleen Open Font Format miste ik nog. Met webfonts kan je erg mooie dingen doen. En Web Open Font Format is hier een perfect formaat voor, dus ik ben erg blij dat ze dit gaat ondersteunen!

Rounded corners ook in IE 6 7 en 8 ...


http://fetchak.com/ie-css3/

eeeewww, behaviors! Javascript is bedoeld om het gedrag van een web-pagina uit te breiden met extra mogelijkheden voor wie daar behoefte aan heeft. En dus niet voor vormgeving. Dan zijn afbeeldingen nog beter.

Bovendien houden dit soort scripts oude browsers alleen maar langer in stand.

[Reactie gewijzigd door geert1 op 23 april 2010 09:22]

Rounded corners zijn misschien ook wel een "extra mogelijkheid" of (toch op z'n minst niet noodzakelijk)? Zeker voor IE ;^)

Dat ziet er erg mooi uit inderdaad!

Misschien dat dit webdevelopers ook stimuleert om een net CSS-bestandje aan te maken ipv aan te klooien in de html zelf
*Bron van ergernis*

Goede ontwikkeling. Als WebKit en Opera dit ook gaan ondersteunen zitten we eindelijk op één lijn. Nu moet je toch nog altijd een .eot maken voor ie ipv iedereen gewoon een .ttf te voeren.

Waarom iedereen gare dingen gebruikt als sIFR en Cufon heb ik nooit begrepen. Tuurlijk @font-face wordt niet door alles ondersteund, maar dat is tegenwoordig ook al geen probleem meer (FF sinds 3.5 en Opera sinds 10 dacht ik, de rest deed het al).

Afgezien van de clientside performance problemen en de vaak niet echt mooie rendering is er niets mis met @font-face Voorlopig toch maar Cufon dus...

Grootste gedeelte van die problemen los je op door de stylesheet met de font definities dynamisch met javascript te injecteren. Dat maakt het niet slechter dan Cufon.

Gesproken over performance problemen: het is niet voor niets dat de makers van Cufon of sIFR aanraden om het alleen voor een klein aantal selecte banner teksten te gebruiken.

En wat betreft niet echt mooie rendering: dan heb je een niet echt goed gehint font gebruikt. Dat levert vooral problemen met ClearType, wat zwaar afhankelijk is van goede hinting.

Microsoft is goed bezig wat betreft meegaan in de grote stroom van ontwikkeling... Dit is lang anders geweest, maar sinds een aantal jaar (zon beetje begin van IE8) accepteren ze steeds meer open standaarden en werken er aan mee... Zeer positieve ontwikkeling, vraag me af in hoeverre de deal met Red Had hier van invloed op is geweest...
Zou mooi zijn als Apple op een gegeven moment zich ook iets meegaander opstelt, dan kunnen we het nog echt heel ver schoppen.

Het gekke is dat Microsoft al zolang ik me kan herinneren lid is van W3, en in de html en css werkgroepen vertegenwoordigd was. IE 5 op de Mac was zelfs lange tijd de toonaangevende browser op het gebied van standaarden ondersteuning. (die was volledig). Terwijl zijn windows broertjes een verschrikking waren op dat gebied. Dus ook al werkt Microsoft er aan mee actief (want dat deden ze altijd al), ze moeten het ook actief implementeren.

Apple is heel erg van de opensource/openstandaarden. Heel webkit is opensource, en die is aanzienlijk qua standaarden ondersteuning. Als dit een echte standaard wordt, dan zullen Apple en Google het zeker gaan implementeren in Webkit.

Wow. De foutste post sinds een tijdje

IE5/Mac was een ware verschrikking t.o.v IE5/Win. Er schortte vanalles aan, het barstte van de bugs, tekortkomingen en verschillen met de windows-versie. Destijds kon je dat heel goed zien aan de compatibility-tabellen van quirksmode (nu niet meer, en good riddens).

Apple heel erg van de open standaarden?! Op browsergebied niet eens. Ja ze gebruiken webkit, maar daar hebben ze wel eerst slaande ruzie mee gehad. Vervolgens bouwen ze een hele nieuwe closed source browser, terwijl ze evengoed een fork van Chromium hadden kunnen maken. Ok, die bestond toen misschien nog niet, maar S4 is dan ook zó anders dan S3, dat dat in dié overgang best had gekund.

Voor de rest is ALLES van Apple gebaseerd op gesloten standaarden, die allemaal krampachtig door Apple vastgehouden worden. Elke deviaat ervan wordt ongenadelijk in elkaar geschopt, als ze de kans krijgen. Ja ik weet het, de kernel van hun OSX is wel een open standaard, maar dat is geen product, dat is slechts een klein onderdeeltje. Elke open standaard die ze ondersteunen is alleen maar een gevolg van het gebruiken van bijvoorbeeld WebKit, en niet Apple's bewuste keuze.

[Reactie gewijzigd door _Thanatos_ op 23 april 2010 21:25]

In het overzicht van afbeeldingen, sIFR, etc. mis ik Typekit. Fraaie techniek en regelt ook de licenties voor gebruik van een font op het web. Ander voordeel, het werkt nu al Maar nu ga ik eerst op zoek naar een woff-demo!

Voor zover ik kan nagaan gebruikt Typekit ook @font-face en is het hele pakket dus niet echt nodig. Werkt verder wel leuk geloof ik, en het is een goede manier om fonts legaal te gebruiken. Want velen jatten gewoon een betaal-font en gebruiken die zonder licentie.

Kijk, dit zijn goede ontwikkelingen. Erg leuk ook voor de wat uitgebreidere design websites die het liefst een specifiek lettertype prefereren. Is erg goed voor de veelzijdigheid/differentiatie van websites. Zolang iedereen de standaarden maar gaat ondersteunen natuurlijk.

Wat is er dan mis met OpenType?

Ja er is iets aan de hand met hinting in OpenType, maar ik gok dat dat een windows-issue is. En een issue met de implementatie van een standaard is geen reden voor een nieuwe standaard.

Je kunt in windows nml duidelijk zien dat een TrueType het goed doet bij kleine lettergroottes (vanwege hinting evt icm ClearType). Terwijl een OpenType van hetzelfde font het juist beter doet bij grote letters, omdat die op de een of andere manier "smoother" lijken. En bij grote letters is hinting niet meer zo boeiend.

Anyway, OpenType voldoet volgens mij prima, al moet het wel goed geimplementeerd zijn/worden. Maar voor WOFF geldt dat natuurlijk net zo hard.

[Reactie gewijzigd door _Thanatos_ op 22 april 2010 19:35]

Mooi dat Microsoft eindelijk ook goed bezig is op dit gebied. Alleen jammer dat het waarschijnlijk nog 6 jaar duurt voordat iedereen Internet Explorer 9 heeft.
Waarom kunnen ze styling opties die geen invloed hebben op de lay-out en werking van oude webapplicaties niet gewoon ook in oude versies doorvoeren?

WOFF is een soort container voor compressed Open Font Formaat, Open Type en TrueType format,
Hiervoor ondersteunde IE (sinds IE4) altijd het Embedded Open Type (EOT) en dat was een soort container voor compressed Open Type format. (waarbij je een subset van het formaat geschikt voor de webpagina kon gebruiken)

Dus relatief is de stap niet zo heel groot.