Novinky v Google Fonts CSS API v2

Pár týdnů zpátky došlo k modernizaci designu Google Fonts a funkčnosti hlavního webu a současně s ním i ke spuštění nového CSS API ve verzi 2, s nímž bych vás na následujících řádcích rád seznámil.

Hned na začátek si dovolím jednu radu z ranku „zjištěno za vás“. Pokud budete jako já několik dlouhých minut hledat, kde se sakra na tom novém webu zaškrtává subset (například latin extended pro českou znakovou sadu), tak vám ušetřím čas a rovnou poradím: nikde. Pojďme rovnou na všechny novinky.

Co je nového?

V prvé řadě se nám změnila základní URL adresa, kam posíláme request s našimi parametry. Nově vypadá takto:

https://fonts.googleapis.com/css2

Od původní varianty adresy se tak liší jen onou dvojkou na konci. V dalších ukázkách pak budu pro jednoduchost používat již jen část za lomítkem.

Parametr family

Konkrétní dotaz na font Roboto, který nám bez dalších nastavení vrátí řez normal (400), by mohl vypadat následovně:

/css2?family=Roboto

Základní parametr family vypadá na první pohled beze změny, opak je ale pravdou.

První odlišnosti oproti původnímu API si lze všimnout hned při dotazu na jiný než výchozí řez. Dejme tomu, že chceme tučný text (700), pak musíme naši adresu upravit takto:

/css2?family=Roboto:wght@700

Axisy a jejich hodnoty

Výraz mezi dvojtečkou a zavináčem představuje tzv. axis. Těchto axisů je několik druhů a korespondují s CSS vlastností font-variant-settings, která poskytuje kontrolu nad zobrazováním variabilních fontů.

Různé fonty podporují různé axisy, my se spokojíme pouze s wght, který říká, že nás zajímá tloušťka řezu (font-weight), a s ital, kterým pro změnu určujeme, zda chceme (hodnota 1) či nechceme (hodnota 0) kurzívu (font-style: italic). Tyto axisy nás budou pravděpodobně zajímat nejčastěji a hlavně je jejich podpora napříč jednotlivými rodinami písem nejrozšířenější.

Při definici více axisů je oddělujeme čárkami, korespondující hodnoty pak vypíšeme v adrese za zavináčem a oddělujeme je pomocí středníků. Pokud se rozhodneme, že kromě tučného fontu chceme ještě normální řez včetně kurzívy, použijeme tuto podobu adresy:

/css2?family=Roboto:ital,wght@0,400;0,700;1,400

Důležité: Jednotlivé axisy je nutné vypisovat v abecedním pořadí a jejich hodnoty (vždy po skupinkách — tzv. tuples) numericky vzestupně. Následující adresa, kde je výše zmíněné pravidlo kvůli ukázce záměrně porušené, nám tedy nebude fungovat.

/css2?family=Roboto:ital,wght@0,400;1,400;0,700

Google je naštěstí dostatečně chytrý a na chybu nás upozorní vrácením stavového kódu 400 a chybovou hláškou: Tuples must be sorted.

Více rodin písem

Jednotlivé rodiny fontů se nově definují pomocí samostatného family parametru (s ampersandem mezi nimi), ačkoli dříve stačilo oddělení pomocí svislítka („pajpy“), následovně:

/css2?family=Roboto&family=Open+Sans

Parametry display a text

Co naopak zůstalo beze změny jsou parametry text a display, takže tato část je pouze pro zopakování.

Pomocí parametru display určujeme, co se bude dít, když font není k dispozici (zpravidla se ještě načítá). Hodnoty jsou totožné s hodnotami CSS vlastnosti font-display. Google Fonts ve svém GUI defaultně navrhují hodnotu swap (prohlížeč velmi krátkou dobu čeká na stažení fontu, jestliže se to nestihne, zobrazí nejprve náhradní písmo a námi zvolený font až následně po stažení):

/css2?family=Roboto&display=swap

Pomocí parametru text můžeme dosáhnout datové úspory tím, že Google Fonts řekneme, že si přejeme, aby nám do fontu zahrnul pouze konkrétní znaky. Například jestliže víme, že nás zajímají jenom malá písmena anglické abecedy, potom můžeme použít tuto adresu:

/css2?family=Roboto&text=abcdefghijklmnopqrstuvwxyz

Tím se dostáváme k další důležité změně oproti původnímu API, která se týká subsetů.

Subsety

Doposud jsme se blíže vůbec nepodívali, co na námi sestavené URL adrese Google Fonts zobrazí. Zkusíme to s naším oblíbeným Robotem. Směle do toho.

https://fonts.googleapis.com/css2?family=Roboto

V tomto kroku bude záležet na tom, jaký prohlížeč používáme. Modernější prohlížeče jako je třeba Chrome by nám měli zobrazit něco podobného tomuto:

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* + dalších 5 definic @font-face */

Pozorný čtenář si teď bude říkat: počkat, počkat, já mám ale přece web v češtině a nechci, aby mi prohlížeč stahoval cyrilici, vietnamskou abecedu a další znaky, které vůbec nepotřebuji — co mám dělat, aby mi Google Fonts poslaly jenom latinku?

Jistě si vzpomenete, že jsem hned v úvodu upozorňoval, že vlastní subset v novém API nastavit nelze. To by nám ale nemělo vadit, v CSS si totiž všimněme vlastnosti unicode-range.

Google Fonts za nás nově font automaticky rozdělí po různých znakových sadách a pomocí této vlastnosti se zajistí, že se použijí právě ty soubory, které obsahují znaky používané na našem webu. Pokud si web vystačí pouze s latinkou, dostaneme jen tu a kromě pár řádků CSS navíc se nic dalšího stahovat nebude.

To „zbytečné“ CSS navíc v sobě skrývá jednu relativně důležitou výhodu. Máme zajištěno, že pokud se nám někdy v budoucnu na webu objeví nějaký text ve znakové sadě, se kterou jsme původně nepočítali, tak se nám zobrazí korektně (za předpokladu, že ji konkrétní font zahrnuje), aniž bychom museli cokoli upravovat.

No jo, ale starší prohlížeče přece unicode-range nepodporují, ne? To je naprosto validní otázka. Co se nám tedy zobrazí na stejné adrese třeba v IE11? Můžeme to vyzkoušet:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5g.woff) format('woff');
}

Ano, hádáte správně. Všechny znakové sady, které naše písmo podporuje jsou zahrnuté v jednom souboru. Google se v novém API rozhodl v duchu graceful degradation uživatele legacy prohlížečů penalizovat a nutí je stahovat více dat. To může být pro změnu dost velká nevýhoda, jestliže víme, že značná část naší uživatelské základny přistupuje k webu právě ze starších prohlížečů.

Tady je pak na zvážení každého, zda se mu případně vyplatí používat původní verzi API, u níž se, dle mého názoru, nedá předpokládat, že by ji Google v dohledné době vypnul, neboť ji v současné chvíli jistě používají miliony webů.

Variabilní fonty

Jedné novince jsme se doposud úplně vyhnuli, jsou to variabilní fonty, jejichž podpora v prohlížečích je již velmi dobrá, a je tedy nasnadě, že je konečně umí servírovat i Google Fonts. Pro studium variabilních fontů doporučuji tento skvělý materiál Introduction to variable fonts, kde je vše podstatné vysvětleno.

My se ale rovnou vrhneme na to, jak je můžeme používat, pokud je tedy zrovna námi zvolený font ten variabilní. V době psaní článku (červen 2020) jich takových je pouze 39 z 991. Jedním z nich je třeba Roboto Slab, který se nyní rozhodneme použít v zrovna ne úplně standardním řezu 442:

/css2?family=Roboto+Slab:wght@442

Jestliže náš prohlížeč variabilní fonty podporuje, není to žádný problém a dostaneme, co jsme si přáli:

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 442;
  src: url(https://fonts.gstatic.com/s/robotoslab/v11/BngMUXZYTXPIvIBgJJSb6ufA5qWr4xCCQ_k.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* + další znakové sady */

V prohlížečích bez podpory variabilních fontů nám Google pošle nejbližší možné řezy směrem na obě strany, v našem případě 400 a 500:

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/robotoslab/v11/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISWaw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/robotoslab/v11/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjovoSWaw.woff) format('woff');
}

Jelikož u variabilního fontu nám na hodnotě weight už z principu jejich fungování nezáleží, vypisujeme tak konkrétní řez de facto jen kvůli fallbacku pro starších prohlížeče.

Pokud chceme používat více řezů, můžeme místo jednotlivého vypsání specifikovat rovnou celý rozsah pomocí dvou teček mezi jeho hranicemi:

/css2?family=Roboto+Slab:wght@300..500

Toto děláme rovněž jen kvůli fallbacku (dostaneme k dispozici řezy v definovaném rozsahu po násobcích stovek, v našem případě 300, 400 a 500). V moderním prohlížeči máme ověřeno, že se opravdu jedná o jeden a tentýž soubor, který sám o sobě obsahuje všechny řezy a šetří nám tak datový přenos.

Rozsahů můžeme teoreticky použít neomezené množství (včetně kurzívy), Google nám jen stanovuje pravidlo, že se nesmí překrývat, nebo dotýkat. Požadavek na rozsah 300 až 500 v normálním řezu a 400 až 500 v kurzívě na font Crimson Pro (Roboto Slab nemá kurzívu) může vypadat klidně takto:

/css2?family=Crimson+Pro:ital,wght@0,300..500;1,400..500

Závěr

Gratuluji, jestliže jste dočetli až sem, budete umět perfektně používat Google Fonts bez webového rozhraní. Většinu zde zmíněných věcí lze samozřejmě udělat i v něm, ale některé (například stanovení rozsahů a variabilních fontů) je nutné vyřešit ručně.

Pakliže nemáte dost, chcete se dozvědět něco o performance a naučit se, jak je možné načítání webfontů od Googlu ještě zrychlit, doporučuji skvělý článek od Harryho Robertse The Fastest Google Fonts.

A pokud to všechno znáš a bylo to pro Tebe jenom opakování, budeme rádi, když se k nám přidáš na pozici front-end kodéra a pomůžeš nám budovat samé super weby.