Centrální hostování písem napříč subdoménami

Samostatné předplatné Typekitu bude brzy zaříznuto, také přes něj řešíte webfonty na všech spravovaných webech? Příště budeme chytřejší. Možnost takto razantní změny jsem dosud nebral v potaz, i když je to jedna z hlavních nevýhod modelu postaveného na předplatném…

We no longer offer standalone Typekit subscription plans. (…) We’ll be in touch over email with details about how the subscription retirement affects your account moving forward.

Hledání náhradní služby jsem vzdal hned z kraje, ostatně myšlenka zaříznutí poslední závislosti na cizím serveru mi v hlavě už nějakou dobu ležela. A tak mi Adobe dopřálo poslední potřebné popostrčení, abych zjistil, jak se to má s hostováním písem „u sebe“. Přeskočíme-li otázku licencí, které se liší písmo od písma, visí ve vzduchu akorát otazník v podobě technické implementace. Po letmém průzkumu se ovšem ukázalo, že je to poměrně snadné.

Když si to nezkomplikujete jako já.

Uspořádání

Abych nemusel držet kopii písem v několika adresářích – a nedělal si tak větší prostor pro chyby v případě změn – rozhodl jsem se pro vytvoření soukromé písmocentrály na dedikované subdoméně:

ales_net
- blog
- font
- manual
- projekty
- www

Nezbytné soubory

Na ALES.NET momentálně z „vlastních“ písem používám pouze Franklin Gothic. Ostatní písma volím z těch obecně rozšířených.

V případě Franklin Gothic potřebuji čtyři řezy, pro popis řešení si však vystačíme s jedním. Složka font pro řez Regular obsahuje:

franklingothic-regular.css
franklingothic-regular.woff
franklingothic-regular.woff2

CSS soubor je v podstatě outsourcovaná příprava určená k nalinkování z konkrétní stránky. Vypreparováním do vlastního souboru je zajištěno, že se případné změny propíší na všechna potřebná místa (proto musí být fonty nalinkovány absolutní adresou) a zároveň se hlavní kód vizuálně neplevelí.

Uvnitř je specifikace vlastnosti @font-face:

/* Franklin Gothic Regular */
@font-face {
  /* jméno jako reference pro servírované písmo */
  font-family: 'Franklin Gothic FS';
  /* "local" zkusí, zda písmo uživatel již nemá, teprve potom se začne stahovat */
  src: local('Franklin Gothic FS Book'), local('FranklinGothic URW Book'),
    url('https://font.ales.net/franklingothic-regular.woff2') format('woff2'), url('https://font.ales.net/franklingothic-regular.woff')
      format('woff');
  /* jak se chová prohlížeč během stahování */
  font-display: fallback;
  /* jaký řez to vlastně je */
  font-weight: normal;
  font-style: normal;
}

Ve WOFF souborech je již ukryté samotné písmo. Dvojkový formát se stahuje primárně – kvůli lepší kompresi. S podporou však stále mírně pokulhává za záložním.

Pro ještě lepší optimalizaci jsou oba soubory prohnané generátorem webfontů od Font Squirrel, kterým lze osekat nepotřebné znaky.

Použití v kaskádových stylech

Čistá CSS funkce @import by soubor franklingothic-regular.css tahala až na serveru. V LESS souboru však stačí s drobnou úpravou zavolat potřebný řez pomocí @import (less) url("../font/franklingothic-regular.css"); a při exportu se informace natvrdo vloží do výsledného CSS. Díky spojení s LESSem odpadne několik zbytečných dotazů na server a lze využít výhod automatické minifikace s autoprefixem. Důležité je jen to, aby byla definice @font-face na začátku ostylování.

Poslední chyták

Ejhle, ono to nefunguje, i když je vše správně nalinkováno a zapsáno. Písmo se nestáhne a prohlížeč použije další v pořadí. Problém lze najít v konzoli prohlížeče (přístupná ESC z DevTools): „Access to Font at ‚https://font.ales.net/franklingothic-regular.woff2‘ from origin ‚https://blog.ales.net‘ has been blocked by CORS policy: No ‚Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‚https://blog.ales.net‘ is therefore not allowed access.“

Ukázalo se, že je potřeba přidat pár řádků do .htaccess ve složce font. Ukonejší se tím ochrana zabudovaná v prohlížečích, která brání načítání souborů mezi (sub)doménami:

SetEnvIf Origin "http(s)?://(.+\.)?(ales\.net)$" ORIGIN_DOMAIN=$0
<IfModule mod_headers.c>
<FilesMatch "\.(woff|woff2)$">
Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN
</FilesMatch>
</IfModule>

Když už jsme v tom, můžeme soubor doplnit o nastavení cache:

<filesMatch ".(woff|woff2)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

Nyní by mělo vše fungovat. Pro debugování jsou ideální DevTools Firefoxu se skvělou nadstavbou. Přehledně z ní zjistíte, jestli se font opravdu načítá primárně z uživatelova počítače, stejně jako zda při jeho absenci probíhá hladce komunikace se serverem.