Google Font API - äntligen mera varierad typografi på webben

Tråden skapades och har fått 32 svar. Det senaste inlägget skrevs .

Den gamla lätt insomnade grafiska formgivaren inom mig blir eld och lågor över Googles Font API som river murarna när det gäller att få in andra typsnitt på webben.

Tekniken är inte uppfunnen av Google och de är inte först, men de har gjort hästjobbet att få det att fungera i de flesta webbläsare och samtidigt tillhandahåller de ett gäng typsnitt som man kan börja använda på ett ytterst enkelt sätt.

Läs mer: Google Font API - Google Code

Förövrigt så har Google presenterat en fullkomlig vårflod av intressanta nyheter nu inatt svensk tid på deras konferens Google I/O, allt från videostandarden WebM till YouTubes nya HTML5-spelare. Good times!

Mycket bra initiativ. Hoppas att det slår igenom på bredare front. Typografi på webben är ju ett så sorgligt kapitel över lag och ett testamente över standardiseringsorganens och branschens misslyckande. Kanske, kanske, blir det så småningom en lösning på frågan.

  • Medlem
  • Göteborg
  • 2010-05-20 22:36

Wow, wow, wow! Tack för tipset Adrian. Det här verkar ju vara hur smidigt som helst!

  • Medlem
  • Stockholm
  • 2010-10-01 11:47

Är det bara jag som har problem med åäö när jag använder Google Font API? I firefox renderar den fint men safari funkar det inte... kan man definiera språket på något vänster?

Ursprungligen av widing:

Är det bara jag som har problem med åäö när jag använder Google Font API? I firefox renderar den fint men safari funkar det inte... kan man definiera språket på något vänster?

Jag har inte problem, vad har du för teckenkodning? UTF-8? Jag använder det själv här och där fungerar ÅÄÖ i Safari så vitt jag kan se.

Ursprungligen av Adrian B:

Jag har inte problem, vad har du för teckenkodning? UTF-8? Jag använder det själv här och där fungerar ÅÄÖ i Safari så vitt jag kan se.

Både min iPhone och min iPad visar felaktig formatering (å, ä och ö) på din sida, Adrian.

Säger det mest som en "heads up"...

Ursprungligen av AndreeMarkefors:

Både min iPhone och min iPad visar felaktig formatering (å, ä och ö) på din sida, Adrian.

Säger det mest som en "heads up"...

Dra på trissor! Det hade jag faktiskt missat. Enligt Googles egen FAQ ska Google Font API inte stödjas överhuvudtaget på iPhone och iPad:

The Google Font API is not currently supported on iPhone, iPad, iPod, or Android.

Istället ska man se nästa typsnitt i ordning enligt CSS:en:

What do unsupported browsers see?
If someone using an unsupported browser visits a page that uses the Font API, then the text is displayed using the next available font in your CSS font stack.

Vilket i mitt fall alltså hade varit Arial, men det är ju uppenbart att MobileSafari faktiskt renderar typsnittet, dock hamnar prickarna och ringarna fel.

Får gräva lite i det där, tack för tipset.

Ursprungligen av Adrian B:

Dra på trissor! Det hade jag faktiskt missat. Enligt Googles egen FAQ ska Google Font API inte stödjas överhuvudtaget på iPhone och iPad:

The Google Font API is not currently supported on iPhone, iPad, iPod, or Android.

Det där förstår jag inget alls av...

Mina webbsidor visas med Googles typsnitt i min iphone utan problem. Och varför skulle den inte göra det? Det är Safari där med.

Däremot så funkar det inte med Opera Mini i iPhone men det ger jag blanka den i ärligt talat.

När det gäller iPhone och typsnitt så har jag förresten läst för ett tag sedan att de inbyggda typsnitten är betydligt färre än i vanliga Mac OS X. Detta för att spara RAM-minne tror jag det var. Det finns t ex inget Helvetica i telefonen bara Arial. Trebuchet MS finns i IPhone så den har jag haft som grundstil på en del sajten.

Ursprungligen av Anders Täpp:

Det där förstår jag inget alls av...

Mina webbsidor visas med Googles typsnitt i min iphone utan problem.

Näe, besöker man listan på typsnitt i iPhone så ser man ju tydligt att de renderas rätt, så deras FAQ är direkt felaktig där.

Men kanske är det något som de jobbat på sedan Font API släpptes? För om man googlar och läser rapporteringen från i maj så verkar det genomgående handla om att det *inte* fungerar i MobileSafari. Så jag antar att det faktiskt inte gjorde det då.

Ursprungligen av Anders Täpp:

Och varför skulle den inte göra det? Det är Safari där med.

Fast det är inte exakt samma Safari. En del av uppgifterna från maj verkar göra gällande att Font API inte stödjer SVG och det är något som krävs på iPhone:

Google webfonts does not support SVG.. ie: no custom fonts for the iPad and iPhone.

Det kanske är något som ändrats sedan dess? Eller så har det inget alls att göra med saken, detta var bara något jag hittade.

Ursprungligen av Anders Täpp:

När det gäller iPhone och typsnitt så har jag förresten läst för ett tag sedan att de inbyggda typsnitten är betydligt färre än i vanliga Mac OS X.

Det stämmer bra.

Ursprungligen av Anders Täpp:

Det finns t ex inget Helvetica i telefonen bara Arial.

Fel. Hela gränssnittet i iPhone är uppbyggt med Helvetica - till mångas förtjusning - så är det något typsnitt som finns på iPhone så är det Helvetica.

Även Arial finns med dock. Från Darin Fireball i juli 2007:

It’s true that in most of the apps on the iPhone there aren’t any font choices — everything, both the application UI elements and your data, is rendered, beautifully, in Helvetica.

But then there’s MobileSafari, which renders whatever font is specified by a page’s CSS style sheet. MobileSafari is limited, however, by the fonts installed on the iPhone. Here’s the list:

  • American Typewriter

  • American Typewriter Condensed

  • Arial

  • Arial Rounded MT Bold

  • Courier New

  • Georgia

  • Helvetica

  • Marker Felt

  • Times New Roman

  • Trebuchet MS

  • Verdana

  • Zapfino

Här är en bifogad fil som visar att Volkorn (typsnittet jag använder) fungerar i MobileSafari men att prickarna och ringen på å, ä och ö renderas fel. Men bara på gemena bokstäver. Versalerna Å, Ä och Ö renderas rätt!

Ursprungligen av Adrian B:

Här är en bifogad fil som visar att Volkorn (typsnittet jag använder) fungerar i MobileSafari men att prickarna och ringen på å, ä och ö renderas fel. Men bara på gemena bokstäver. Versalerna Å, Ä och Ö renderas rätt!

Om man tittar på Yanine så är det inget fel på prickarna.

Inget systemfel utan ett typsnittsfel då kanske ?

Ursprungligen av Anders Täpp:

Om man tittar på Yanine så är det inget fel på prickarna.

Inget systemfel utan ett typsnittsfel då kanske ?

Ja, jag har kollat runt lite och det verkar vara olika från typsnitt till typsnitt. Nedan skärmbilder från Lobster som fixar allting korrekt samt Droid Serif som fixar å men inte ä och ö.

Jag har kört Googles fonter på några sajter under sommaren för att skaffa mig kunskap. Jag har absolut inga problem i någon webbläsare. Sitter som den berömda smäcken.

Så jag applåderar initiativet jag med, men när den första glädjen lagt sig så var det ändå inte mycket användbart just nu i deras typsnittskatalog kan jag tycka.

Vanliga brödtextfonter är jag skeptisk till att använda på det här sättet och det känns som tonvikten ligger på just sådana stilar. Det där är freeware-typsnitt som de plockat med just för att det är gratis. Apple och Microsoft har ägnat decennier åt att skapa läsbara typsnitt för bildskärm. En viss skillnad i läsbarhet antagligen. För kortare texter i lite större grad är det väl ingen fara att testa runt lite.

Men jag vill ha meeer ..

Ursprungligen av Anders Täpp:

Så jag applåderar initiativet jag med, men när den första glädjen lagt sig så var det ändå inte mycket användbart just nu i deras typsnittskatalog kan jag tycka.

Ja, jag känner precis samma sak.

Jag dreglar förstås över alla de fina Adobe-typsnitten som nu finns hos Typekit, men då måste man ju ha en sajt med en viss budget för att det ska vara motiverat.

  • Medlem
  • Göteborg
  • 2010-10-02 13:51

I serien "Är det bara jag som":
Är det bara jag som får beskåda cyrilliska tecken när man tittar på:
Font Preview - Google Font Directory ?
Hittar inte hur man switchar till Latin subset.

  • Medlem
  • Norrköping
  • 2010-10-02 16:10
Ursprungligen av pichia:

I serien "Är det bara jag som":
Är det bara jag som får beskåda cyrilliska tecken när man tittar på:
Font Preview - Google Font Directory ?
Hittar inte hur man switchar till Latin subset.

Läser du beskrivningen så ser du att det inte finns något "Latin subset".

  • Medlem
  • Göteborg
  • 2010-10-08 16:46
Ursprungligen av Gunnar B:

Läser du beskrivningen så ser du att det inte finns något "Latin subset".

Hur kommer det då sig att man här: PT SansFont Family – Google Font Directory kan beskåda en Lorem Ipsum uppsättning för typsnittet?

Jag började använda Google fonts i juni skulle jag tro att det var. Jag kan inte svära på när jag kollade med telefonen första gången men jag har aldrig sett något problem i den. Skumt.

Det där med inget Helvetica läste jag för inte så länge sedan. Jag tror t o m att det var Daring Fireball som ojade sig över hur mycket sämre det var med Arial istället. Men jag har tydligen missförblandat ihop något annat ...

Ursprungligen av Anders Täpp:

Jag började använda Google fonts i juni skulle jag tro att det var. Jag kan inte svära på när jag kollade med telefonen första gången men jag har aldrig sett något problem i den. Skumt.

En ny teori: iOS 4 kanske fick stöd för webfonts? I maj var det fortfarande iPhone OS 3 som gällde.

Ursprungligen av Anders Täpp:

Det där med inget Helvetica läste jag för inte så länge sedan. Jag tror t o m att det var Daring Fireball som ojade sig över hur mycket sämre det var med Arial istället. Men jag har tydligen missförblandat ihop något annat ...

Du kanske syftar på detta:

It’s a subtle change, but Apple has changed the system font for the iPhone 4, from Helvetica to Helvetica Neue. The change is specific to the iPhone 4 hardware (or more specifically, the Retina Display), not iOS 4. On older iPhone hardware, iOS 4 still uses Helvetica as the system font.

If you think it’s hard to tell Helvetica apart from Arial, this one’s going to shoot right over your head. Helvetica Neue isn’t so much a different typeface as a “reworked” version of the same face.

Eller kanske det här:

The bad news: the swell new fonts Apple has included in the iPad’s OS (like Baskerville, Futura, Gill Sans, and Hoefler Text) are not included in the iPhone OS 4.0 beta 1. And in both OSes, they’re still including the anemic Courier New but not good sturdy Courier. And don’t get me started on including Arial when Helvetica is right there.

följer utvecklingen med intresse...

Adrian, vet du om du använder decomposed eller precomposed UTF-8?

Det vore kanon om du kunde skriva om filen så att den genomgående blir precomposed och se om det löser problemet.

Ursprungligen av Richard Rönnbäck:

Adrian, vet du om du använder decomposed eller precomposed UTF-8?

Jag har hållit på med webbutveckling i rätt många år nu, men jag ska ärligt erkänna att jag inte har en aning om vad det betyder. Pratar vi om själva typsnittet? Eller HTML-sidan?

Observera att om det är typsnittet du pratar om så är det inget jag lagt upp. Hela poängen med Google Font API är att dom "hostar" alla typsnitt hos sig för att få bättre effektivitet (deras servrar är snabbare och om man besökt en annan sida som använder samma typsnitt så finns det redan cachat).

Skärmbilderna jag visar är direkt från Googles egna sidor för Font API och inget jag kan styra över, och felen finns ju även där och inte bara på min sida. Så felen ligger i typsnitten och typsnitten ligger hos Google.

Ja det tillhör det mer obskyra man kan pyssla med, men när man väl förstått det kan det hjälpa en många gånger, särskilt när det uppstår teckenkodningsproblematik cross-plattform.

UTF är ju en standard, men en rätt mångfacetterad sådan, och decomposed/precomposed har med varianter inom standarden att göra.

Jag ska försöka förklara begripligt, men det tog lång tid innan jag fattade själv, så ha tålamod om förklaringen inte blir helt glasklar:

Ett tecken i unicode är alltid entydigt, i bemärkelsen att ett "ä" motsvarar en given code point, och vice versa, men ett tecken kan bestå av en eller flera "glyfer" (jag tror en hyfsad översättning av glyf skulle kunna vara "teckenform" eller något sånt)

Tecknet "ä" kan antingen representeras av två glyfer, dvs samma glyf som tecknet "a" använder sig av dessutom "prickarna" som är en annan glyf. När man använder den tekniken kallas det "decomposed"

Men, samma tecken, "ä" kan också representeras av en enda färdigritad glyf som då redan i grundformen innehåller både "a" och prickarna, och det kallas då "precomposed"

Skälet till varför det här kan vara viktigt är att i princip alla system som använder unicode klarar precomposed, men bara ett mindre antal klarar decomposed.

T.ex. använder Windows OS i huvudsak precomposed, medan Mac OS oftast använder decomposed.

Om ett system som endast klarar precomposed stöter på decomposed text så förstår den inte riktigt hur den ska hantera tecken och glyfer, och kan då få för sig att rita ut de olika glyferna som enskilda tecken, vilket då t.ex. innebär att prickarna hamnar efter "a" istället för ovanför dem.

Sättet som man i så fall kommer runt problemet är att konvertera all text till UTF-8 precomposed, via t.ex. iconv. Alltså din egen HTML-fil. Du kan också prova att konvertera sidan till t.ex. Latin-1, där man då kan kringgå just den här problematiken.

Senast redigerat 2010-10-03 11:53
Ursprungligen av Richard Rönnbäck:

...

Tack, Rickard. Intressant.

Senast redigerat 2010-10-03 12:24
Ursprungligen av Richard Rönnbäck:

... konvertera all text till UTF-8 precomposed, via t.ex. iconv.

Jag hängde med nästan ända till slutet...

Vad menar du med iconv. ?

Ursprungligen av Anders Täpp:

Jag hängde med nästan ända till slutet...

Vad menar du med iconv. ?

Det är till för att konvertera mellan teckenkodningar:

iconv - Wikipedia

Ursprungligen av Richard Rönnbäck:

Det är till för att konvertera mellan teckenkodningar:

iconv - Wikipedia

Här finns ett verktyg med GUI som heter Charco.
Charco - The Character Set Conversion Utility

Ursprungligen av Richard Rönnbäck:

Jag ska försöka förklara begripligt, men det tog lång tid innan jag fattade själv, så ha tålamod om förklaringen inte blir helt glasklar:

Tackar, det var en aspekt av teckenhantering som jag inte kände till förut. Jag är inte säker på att det påverkar problemet i detta sammanhang, men ändå kul att lära sig något.

Ursprungligen av Richard Rönnbäck:

Om ett system som endast klarar precomposed stöter på decomposed text så förstår den inte riktigt hur den ska hantera tecken och glyfer, och kan då få för sig att rita ut de olika glyferna som enskilda tecken, vilket då t.ex. innebär att prickarna hamnar efter "a" istället för ovanför dem.

Ok, men i detta fall varierar det lite hur prickarna hamnar, det är inte alltid helt efter, ibland är det bara förskjutet lite (som i fallet med Droid Serif) och ibland är det helt rätt (som med Lobster) så jag undrar om det inte beror på hur Google skapat typsnitten.

Ursprungligen av Richard Rönnbäck:

Sättet som man i så fall kommer runt problemet är att konvertera all text till UTF-8 precomposed, via t.ex. iconv. Alltså din egen HTML-fil. Du kan också prova att konvertera sidan till t.ex. Latin-1, där man då kan kringgå just den här problematiken.

Jag ska definitivt testa lite olika saker, har inte tid just nu men jag återkommer i ärendet. Driften att dyka djupare och försöka lösa (eller komma runt) problem är både en förbannelse och en välsignelse när man sysslar med datorer...

  • Medlem
  • Stockholm
  • 2010-10-03 18:09

Skönt att höra att det inte bara är jag som har trubbel! Ska kolla in kodningen. Märkte att det fungerade för mig om jag använde de gamla hederliga ä å osv men det är ju outhärdligt i längden.

Bevaka tråden