Google wil gebruik webfonts vereenvoudigen met api

Google heeft een bibliotheek met vrij te gebruiken lettertypen geopend. Met de Google Font Directory en de Google Font API wil de zoekgigant het gebruik van fonts gemakkelijker maken. Vrijwel alle browsers zouden ondersteund worden.

Volgens Google werken de achttien beschikbare fonts, die via css van de Google-servers kunnen worden opgeroepen, in vrijwel alle browsers, waaronder het gedateerde IE6. Ook kan css3 op de lettertypen worden gebruikt, waardoor effecten als schaduwen en rotaties mogelijk zijn. Met behulp van de WebFont Loader, geschreven in javascript, kunnen ook lettertypen uit meer dan één bron worden geladen, terwijl met de Font Previewer de benodigde css-code kan worden gegenereerd.

In de beschikbare lijst van fonts zijn, naast een aantal lettertypen uit het publieke domein, ook Droid Sans en Droid Serif opgenomen, fonts die in Android worden gebruikt. De lettertypen zijn ook voor commercieel gebruik vrij toepasbaar en zijn bovendien indexbaar door zoekmachines en toegankelijk voor screenreaders die door mensen met een visuele handicap worden gebruikt. De lijst met beschikbare fonts wordt in de toekomst verder vergroot, terwijl de lettertypen ook zijn te downloaden.

Reacties (59)

[Yoram]

aaah, ik word hier zo blij van. Nog minder geklooi om een apart lettertype op je site te krijgen. Puik werk Google!

[Flowmo]

Geklooi is helemaal niet nodig. @font-face werkt in alle browsers, zelfs IE6.

Zie deze tool bijvoorbeeld om fonts om te zetten naar webfonts, inclusief EOT voor IE6+: http://www.fontsquirrel.com/fontface/generator

Gebruik in je CSS dan gewoon een generieke @font-face regel, waarmee je dan je EOT en WOFF (of iets anders cross-browser) in een font-family instelt en je hebt gewoon een volledig werkende website, met een ander font, zonder tussenkomst van JS en/of flash.

[Femme]

Helaas is de rendering van lettertypes in Windows waardeloos waardoor je als ontwerper niets hebt aan @font-face. Cufon levert wel bruikbare resultaten op.

[SinergyX]

Een externe javascript laden, wordt dat niet door veel browsers/anti-spyware geblokkeerd?

Als ik de fontloader zo bekijk:
src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"
lijkt deze dus extern te worden opgehaald?

Google’s serving infrastructure takes care of converting the font into a format compatible with any modern browser (including Internet Explorer 6 and up), sends just the styles and weights you select, and the font files and CSS are tuned and optimized for web serving.

Brengt dit een enorme load op hun servers als dit op grote schaal wordt toegepast?

[ReVas]

Het idee achter deze CDN's (Content Delivery Network) is dat de kans groot is dat de browser het bestand al gecached heeft.

Het scheelt je eigen webserver uiteraard ook bandbreedte.

Zo zie je ook dat bijvoorbeeld jquery, een veel gebruikte javascript library, op verschillende CDN's van oa Google en Microsoft wordt aangeboden.

Daarnaast kan het zo zijn dat de CDN een snellere/betere verbinding heeft tov van de browser. Google heeft denk ik in bijna elk land wel een server/dc.

Zie ook http://en.wikipedia.org/wiki/Content_delivery_network

[Reactie gewijzigd door ReVas op 23 juli 2024 10:48]

[Wim Leers]

Jouw beschrijving van een CDN is op veel vlakken compleet fout. Voor een accuratere beschrijving: de Wikipedia link die je postte, of de beschrijving uit mijn bachelor thesis (wel in het Engels).

[Plague]

Google heeft redelijk wat capaciteit Je moest eens weten hoeveel API's Google al serveert. Denk alleen al aan bijv. de Analytics module: die staat op miljoenen websites met miljarden bezoekers. Een groot gedeelte wordt gewoon gecached, het overige heeft Google geen problemen met het serveren daarvan.

[teek2]

Het is een beperkt aantal fonts, als je ze eenmaal hebt gedownload heb je ze voor een tijdje, daarbij is het vast niet vergeleken met youtube

[YaPP]

Een externe javascript laden, wordt dat niet door veel browsers/anti-spyware geblokkeerd?

Nee, want Google Maps werkt ook op die manier.

Alleen externe afbeeldingen kunnen door een browser geblokkeerd worden, en dat staat standaard niet aan..

Brengt dit een enorme load op hun servers als dit op grote schaal wordt toegepast?

Ik geloof dat ze er best interessante bezoekersstatistieken uit kunnen filteren

[Reactie gewijzigd door YaPP op 23 juli 2024 10:48]

[Plague]

Leuke eerste ontwikkeling, maar nog niet echt bruikbaar: je zit toch weer vast aan bepaalde fonts. Je wilt juist geen gezeur met een standaard fontset, maar geheel je eigen fonts gebruiken. Denk hierbij aan het bedrijfsfont of wat dan ook. Imo is dit niet meer dan een uitbereiding op de standaard fontset, maar nog lang geen alternatief voor oplossingen als sIFR of TFF. Helaas.

[Mottebelke]

Daarvoor kun je dus de WebFont Loader gebruiken. Daarmee kun je je eigen fonts vanaf je eigen server laden.

[rvdven]

Dan kun je toch net zo goed @font-face gebruiken?
Dan heb je ook je eigen font en ben je niet afhankelijk van een extra partij (in dit geval Google)

[Bosmonster]

Maar waarom zou je zo moeilijk doen met zo'n script, als je gewoon een @font-face definitie kunt gebruiken?

Het lastigste is nog de fonts omzetten naar het EOT format, maar daar heb je tools voor.

Nadeel blijft dat de kwaliteit van de rendering te wensen over laat en je vervanging blijft zien in sommige browsers (zoals Firefox). Dan springt je pagina nadat het font ingeladen is ineens naar het juiste font.

Nee, echt goede oplossingen zijn er gewoon nog niet.

[418O2]

Ik had dit al gezien, is echt een hele fijne ontwikkeling voor een probleem dat een hoop workarounds kent welke allen elk hun nadelen hebben. sIFR (veel gebruikt) heeft bijv flash nodig en andere oplossingen zijn vaak iets trager.

Ben benieuwd! Binnenkort maar eens in de praktijk brengen!

[Reactie gewijzigd door 418O2 op 23 juli 2024 10:48]

[Peedy]

sIFR is inderdaad echt een slechte techniek maar Cufon is daarentegen een fantastische techniek om je eigen fonts te gebruiken (je kan de benodigde JS files via hun site gewoon genereren). Typefacejs doet ook leuk mee, maar wordt niet ondersteund door Opera.

[Realityweb]

Cufon is ook een omweg met veel JS.
Met @font-face kun je gewoon fonts inladen met pure CSS.
En dan heb je ook nog een handige generator.
Hier een voorbeeld hoe het eruit ziet in de verschillende browsers.

Maar ik kan dit initiatief van Google natuurlijk alleen maar aanmoedigen

[Verwijderd]

hier ontkom je toch ook niet aan .js van google ?

maar het ziet er beter uit dan met Cufon - ook selectable plus css3 mogelijkheden, erg nice.

[Korben]

maar het ziet er beter uit dan met Cufon

Sorry, maar koop eens een bril. Dit (Cufon) ziet er echt wel veel beter uit dan dit (webfont). Screenshots komen uit Chrome 5, btw.

[TDeK]

Dus dit is ook slecht volgens jou? Snap niet waarom die randen van jouw screenshot zo aliased zijn, dat is niet mijn ervaring met @font-face. Nog een bijkomend voordeel van @font-face: tekst is gewoon te selecteren, geen afhankelijkheid van Flash (sIFR) of Javascript (Cufòn) en het is (dus) sneller. Wel jammer dat de iPhone niks met @font-face doet.

[Korben]

Ja, dat is ook slechter dan Cufón. Overigens kun je bij Cufón ook gewoon tekst selecteren. En nog iets; Cufón werkt op (bijna) alle browsers, in ieder geval véél meer dan @font-face.

[TDeK]

Onzin, op welke browser werkt @font-face dan niet (buiten de iPhone die ik eerder aanhaalde)? Het werkt zelfs in IE4! Cufòn is een tijdelijke oplossing (net als sIFR) en geen eindstation, al was het maar vanwege de afhankelijkheid van Javascript (snelheid en beschikbaarheid).
PS: misschien moet je eens naar de settings van je OS of browser kijken, zelfs bij vol inzoomen zie ik nog vrijwel geen aliassing.

[Reactie gewijzigd door TDeK op 23 juli 2024 10:48]

[TheLemon]

iPhone schijnt ook al te kunnen, zie http://snook.ca/archives/...g-a-font-embedding-master.

[MoietyMe]

@font-face is gewoon CSS Spec 2. En werkt tegenwoordig ook gewoon in alle browsers. Nu nog een algemeen formaat waarin we het kunnen gebruiken (WOFF bijvoorbeeld).

[poepkop]

Met @font-face kun je gewoon fonts inladen met pure CSS.
Allleen soms werk je samen met puristen (lees: reclamebureaus) die graag willen dat het font er hetzelfde uitziet op de Mac als op de PC, tja dan ontkom je niet aan dit soort trucs. Daarnaast vind ik de renders van php vele malen mooier dan wat windows er van maakt.
Wij gebruiken overigens een soortgelijke techniek, alleen dan php-only. Gewoon met functies als h1();. Het nadeel aan Flir en Cufon vind ik toch dat je de tekst nog even origineel ziet zegmaar, en ik krijg floats nooit op 1 lijn.

[TDeK]

Waarom zou je font er op Mac en Windows anders uitzien met @font-face? Je laad toch dezelfde ttf in? Bij mij zien fonts er zelfs op Linux nog hetzelfde uit.

[R4gnax]

Waarom zou je font er op Mac en Windows anders uitzien met @font-face? Je laad toch dezelfde ttf in? Bij mij zien fonts er zelfs op Linux nog hetzelfde uit.

Omdat de Mac een andere font rendering engine gebruikt dan de standaard windows font rendering. Microsoft's ClearType maakt alles er ook niet echt makkelijker op, wat dat betreft.

Wij gebruiken overigens een soortgelijke techniek, alleen dan php-only. Gewoon met functies als h1();.

De <h1> als plaatje renderen is een heeeeeeel slecht idee, dat weet je hopelijk toch wel?

[YopY]

De <h1> als plaatje renderen is een heeeeeeel slecht idee, dat weet je hopelijk toch wel?

Sja, de klant is koning. Als die wil dat een letter er altijd precies hetzelfde uitziet, en de slechtere pageranking voor lief neemt, dan heb je het maar te doen.

Maar een betere oplossing is dat de OS fabrikanten standaarden afspreken mbt het renderen van fonts, zodat ze op elk systeem hetzelfde eruit zien.

[YaPP]

De <h1> als plaatje renderen is een heeeeeeel slecht idee, dat weet je hopelijk toch wel?

Je kunt er alsnog een echte <h1> tag van kunnen maken, die tekst verbergt en er een achtergrond plaatje neerzet.

[Flowmo]

Met het risico dat je ook daarvoor wordt afgestraft omdat Google display:none en text-indent:-9999px op <h*> tags niet erg leuk vindt. Daarmee denkt het dat je keywords aan het verstoppen kan zijn.

[Verwijderd]

Allleen soms werk je samen met puristen (lees: reclamebureaus) die graag willen dat het font er hetzelfde uitziet op de Mac als op de PC

Tsja, inconsistentie is an ugly thing, en anders krijg je toch sowieso detailzagers die beginnen zagen dat het er op een systeem anders uitziet als op een ander.

Zonder die puristen zou het web er fugly uitzien trouwens.

[TDeK]

Het zijn vaak deezelfde puristen die zeggen dat iets er lelijk uitziet, de rest van het internet boeit het blijkbaar vrij weinig (hoe lang hebben we nu tegen die lelijke Wikipedia mono skin aangekeken? Een jaartje of 5?).

[livePulse]

Laat ik dit eens omdraaien: hoe denk jij dat het web er zonder die puristen uit zou zien? Dan zouden we allemaal naar knipperende, fel gele en rode textjes zitten te kijken, achtergrondafbeeldingen die bestaan uit van die "mooie" tiles, ronddraaiende animated gifjes... need i say more, je begrijpt wel wat ik bedoel...

[neliss]

Opzich een goede ontwikkeling, maar het is eerst zien en dan geloven.
Ze kunnen dan wel beweren dat het cross-browser is, maar ik krijg als firefox gebruiker mooi een error dat mijn browser niet wordt gesupport zo gauw ik naar de website ga..
Voorspelt weinig goeds imho

[Conjacq]

Welke versie heb je van Firefox? De volgende versies worden ondersteund:

• Google Chrome: version 4.249.4+
• Mozilla Firefox: version: 3.5+
• Apple Safari: version 3.1+
• Microsoft Internet Explorer: version 6+

Bron: http://code.google.com/apis/webfonts/faq.html

[Verwijderd]

Firefox 3.5+ inderdaad. Lager, bijvoorbeeld de in het bedrijfsleven nog veel gebruikte 3.4 en 3.2 worden dus niet gebruikt. Klant van mij met 1500 werkplekken die niets zelf mogen/kunnen updaten kunnen hier dus al geen gebruik van maken. Het idee is erg leuk, maar nog steeds geen goede oplossing.

[Gunirus]

3.4? Veel success

[johnkeates]

Dan ga je toch met je superhandige windows server aan de slag en doe je je supermakkelijke desktopmanagement truuk en dan heb je opeens 3.5 overal?

[martinusbach]

Ik mis wel een beetje de anti-aliasing en hinting...

[voodooless]

Valt toch wel mee, zie: http://code.google.com/webfonts/preview Prima AA hoor (in ieder geval in FF op Vista)

[Verwijderd]

Ik zit in FF op Vista, maar er is totaal geen anti aliasing te zien. FF 3.6.3

[LB Back]

Zelfde hier FF 3.6.3 op Vista, gewoon lelijk. Met wat betere rendering kan het interessant worden.

[ajakkes]

Toch zie ik liever dat ik het font gewoon bij mijn site kan hosten. WOFF vind ik wel een mooie ontwikkeling maar voordat dit bij 95% van de bezoekers werkt zijn we weer tien jaar verder.

[Verwijderd]

dan kan je cufon altijd nog gebruiken, plus dat je altijd een fallback houd (bij de meeste oplossingen)

[jdemaat]

Leuk initiatief.
Snap alleen niet waarom ik niet gewoon de code die bijvoorbeeld hier staat http://fonts.googleapis.com/css?family=Cantarell zou kopieren in mijn eigen html.

[johnkeates]

Om dat je dat dan met elke update moet doen, en om dat het bandbreedte kost.

[NMNN]

Een geweldige vooruitgang!
Voor mij is de tijd van JPEG en PNG om wat leukere fonts te gebruiken voorbij.
Ondanks dat het nog wat werk schijnt te zijn om de fonts daadwerkelijk te kunnen gebruiken, scheelt het waarschijnlijk aanzienlijk in de tijd die ik nodig heb om iets in elkaar te zetten. Vooral de, logischerwijs, indexering is een pre. Voorheen met "alt" de beschrijving toe moeten voegen zal nu niet meer nodig zijn!

[MittaM]

Dit is zeker een optie om nader te bekijken wanneer ik de volgende keer weer eens een exotisch lettertype moet toepassen omdat de klant die zo prachtig vind