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)
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!
Ben benieuwd! Binnenkort maar eens in de praktijk brengen!
[Reactie gewijzigd door Catch22 op donderdag 20 mei 2010 16:50]
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.
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.
maar het ziet er beter uit dan met Cufon - ook selectable plus css3 mogelijkheden, erg nice.
@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).
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.
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.
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.
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 Rick2910 op vrijdag 21 mei 2010 10:46]
iPhone schijnt ook al te kunnen, zie http://snook.ca/archives/...g-a-font-embedding-master.
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.
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.
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.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.
De <h1> als plaatje renderen is een heeeeeeel slecht idee, dat weet je hopelijk toch wel?Wij gebruiken overigens een soortgelijke techniek, alleen dan php-only. Gewoon met functies als h1();.
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.De <h1> als plaatje renderen is een heeeeeeel slecht idee, dat weet je hopelijk toch wel?
Maar een betere oplossing is dat de OS fabrikanten standaarden afspreken mbt het renderen van fonts, zodat ze op elk systeem hetzelfde eruit zien.
Je kunt er alsnog een echte <h1> tag van kunnen maken, die tekst verbergt en er een achtergrond plaatje neerzet.De <h1> als plaatje renderen is een heeeeeeel slecht idee, dat weet je hopelijk toch wel?
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.
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.
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.
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?).
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...
aaah, ik word hier zo blij van. Nog minder geklooi om een apart lettertype op je site te krijgen. Puik werk Google!
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.
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.
Helaas is de rendering van lettertypes in Windows waardeloos waardoor je als ontwerper niets hebt aan @font-face. Cufon levert wel bruikbare resultaten op.
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.
Daarvoor kun je dus de WebFont Loader gebruiken. Daarmee kun je je eigen fonts vanaf je eigen server laden.
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)
Dan heb je ook je eigen font en ben je niet afhankelijk van een extra partij (in dit geval Google)
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.
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.
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!
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!
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 
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
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
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+
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.
3.4? Veel success 
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?
Goed initiatief van Google, hoewel ik bij sommige fonts wel mijn vraagtekens heb want die zijn vaak in kleiner formaat zeer slecht leesbaar.
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?
Als ik de fontloader zo bekijk:
src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"
lijkt deze dus extern te worden opgehaald?
Brengt dit een enorme load op hun servers als dit op grote schaal wordt toegepast?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.
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.
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.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
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 donderdag 20 mei 2010 17:05]
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).
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 
Nee, want Google Maps werkt ook op die manier.Een externe javascript laden, wordt dat niet door veel browsers/anti-spyware geblokkeerd?
Alleen externe afbeeldingen kunnen door een browser geblokkeerd worden, en dat staat standaard niet aan..
Ik geloof dat ze er best interessante bezoekersstatistieken uit kunnen filterenBrengt dit een enorme load op hun servers als dit op grote schaal wordt toegepast?
[Reactie gewijzigd door YaPP op vrijdag 21 mei 2010 10:25]
Prima ontwikkeling, dit geeft de mogelijkheid aan browser plugins om dit te blokkeren zodat websites die onleesbaar zijn tenminste in een gewoon font getoond kunnen worden. Met flash of jpg oplossingen kan dat niet.
Zo slecht was Comic Sans toch niet?
comic sans doet pijn aan mijn ogen
http://wiki.bsmfh.eu/index.php/Comic_Sans
http://wiki.bsmfh.eu/index.php/Comic_Sans
met flash kan dit wel
Hoezo zou dit niet kunnen? Zover ik weet kan dit met beide oplossingen?
Ik mis wel een beetje de anti-aliasing en hinting...
Valt toch wel mee, zie: http://code.google.com/webfonts/preview Prima AA hoor (in ieder geval in FF op Vista)
Prima AA hoor (in ieder geval in FF op Vista)Ik zit in FF op Vista, maar er is totaal geen anti aliasing te zien. FF 3.6.3
Zelfde hier FF 3.6.3 op Vista, gewoon lelijk. Met wat betere rendering kan het interessant worden.
Op dit item kan niet meer gereageerd worden.
Onderwerpen
Populair: Tablets Samsung Websites en communities Mobiele telefoons Google Sony Microsoft Games Politiek en recht Consoles
© 1998 - 2013 Tweakers.net B.V. Contact Over Tweakers Jouw privacy Algemene voorwaarden Cookies
Tweakers wordt uitgegeven door De Persgroep en wordt gehost door True
