Web-fontit ovat yhä helpoin suorituskykyvoitto useimmilla sivustoilla

Kuvio, joka toistuu yhä

Jos auditoit tänään satunnaiset kymmenen tuotannossa olevaa verkkosivustoa, löydät useimmilta niistä suunnilleen saman fonttitilanteen:

• Etusivulla ladataan kuudesta kymmeneen fonttitiedostoa
• Kaikki ovat WOFF2-muodossa (hyvä), mutta ilman font-display-strategiaa (huono)
• Mukana on useita painoja ja tyylejä, joita ei käytetä sivulla missään
• Koko pino palvellaan kolmannen osapuolen domainista (yleensä Google Fonts), kaikkine DNS-, TLS- ja yksityisyyskustannuksineen
• Ei unicode-range-osajoukkoja, joten jokainen kävijä lataa kyrilliset ja kreikkalaiset glyyfit, vaikka sivu olisi englanniksi

Tämä ei ole vain pienten sivustojen ongelma. Moni hyvin rahoitettu markkinointisivu lataa edelleen 600 KB fontteja ennen kuin ensimmäinen kappale voidaan piirtää. Kun alat huomata kuvion, et voi olla näkemättä sitä.

Korjaus ei ole eksoottinen. Se on kourallinen hyvin tunnettuja tekniikoita, jotka ovat olleet selaimissa vuosia.

Käytä yhtä muuttuvaa fonttia kuuden staattisen sijaan

Jos lataat Inter Regular-, Inter Medium-, Inter SemiBold-, Inter Bold -fontit ja niiden kursiivit, lataat karkeasti kuusi kertaa enemmän tavuja kuin tarvitset. Yksi Interin muuttuva fontti kattaa koko painoakselin (ja joissakin koosteissa myös kallistuksen) yhdessä tiedostossa, joka on vain hieman kahta staattista painoa suurempi.

Selaintuen osalta asia on ollut selvä jo vuosia — muuttuvat fontit toimivat kaikkialla, missä sillä on merkitystä. Jäljellä oleva epäröinti on enimmäkseen staattisten fonttien aikakaudelta periytynyttä lihasmuistia.

Käytännön nyrkkisääntö: yksi muuttuva fonttitiedosto per kirjoitusjärjestelmä, per fonttiperhe. Latinalainen yhdessä tiedostossa, kyrillinen toisessa, kreikkalainen kolmannessa, ladattuna ehdollisesti unicode-range-määrityksellä. Siinä kaikki.

Aseta järkevä font-display

Oletustoiminta silloin, kun mukautettu fontti latautuu yhä, on näyttää ei mitään — näkymätöntä tekstiä — jopa kolmen sekunnin ajan. Tämä on huonoin mahdollinen oletus. Käyttäjät näkevät tyhjän sivun ja olettavat, että jokin on rikki.

Lisää tämä jokaiseen @font-face-sääntöön:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

swap näyttää varafontin heti ja vaihtaa mukautetun fontin tilalle, kun se latautuu. Käyttäjä voi lukea sivua nollamillisekunnista alkaen. Kompromissi on lyhyt asettelun siirtymä vaihdon tapahtuessa, ja sitä lievennetään seuraavalla tekniikalla.

Sovita varafontin metriikat

Tyylittelemättömän tekstin välähdys tuntuu häiritsevältä vain silloin, kun varafontilla ja mukautetulla fontilla on hyvin erilaiset metriikat. Moderni CSS korjaa tämän ominaisuuksilla size-adjust, ascent-override ja muilla vastaavilla:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Kun varafontin metriikat on säädetty, vaihto on tuskin havaittava — sanat vievät saman vaakasuuntaisen tilan ennen mukautetun fontin saapumista ja sen jälkeen.

Googlen --allow-fallback-font-metrics-työ kuuluu nyt selainten perustukeen, ja käytössä on työkaluketjuja (fontaine-kirjasto ja vastaavat), jotka laskevat oikeat arvot puolestasi sekunneissa.

Isännöi itse

Google Fonts on kätevä ja ilmainen, mutta sillä on kaksi todellista kustannusta:

1. Toinen TLS-kättely. Jopa HTTP/3:n ja yhteyksien yhdistämisen kanssa ylimääräinen origin on harvoin ilmainen.
2. Yksityisyys- ja vaatimustenmukaisuuskysymys. Useat eurooppalaiset tuomioistuimet ovat linjanneet, että Google Fonts -fonttien lataaminen osoitteesta fonts.gstatic.com merkitsee henkilötietojen (IP-osoitteen) välittämistä kolmannelle osapuolelle. Itseisännöinti poistaa kysymyksen kokonaan.

Lataus- ja isännöintiputki on:

1. Hanki WOFF2-tiedosto (muuttuva kooste, jos sellainen on olemassa)
2. Rajaa se niihin kirjoitusjärjestelmiin, joita yleisösi oikeasti käyttää
3. Palvele se samasta originista kuin sivustosi muu sisältö, pitkällä Cache-Control: max-age=31536000, immutable -otsakkeella
4. Esilataa kriittisin paino: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Siinä on koko putki. Olemassa olevalle sivustolle se vie iltapäivän, etkä lähes koskaan palaa entiseen.

Milloin mukautetut fontit kannattaa jättää kokonaan pois

Tämä kannattaa sanoa ääneen: kaikki sivustot eivät tarvitse mukautettua fonttia. Järjestelmäfonttipino on nykyään aidosti kaunis jokaisessa käyttöjärjestelmässä:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

Paino on oikea, metriikat ovat oikeat, renderöinti on viritetty laitteelle, ja verkon yli siirrettävien tavujen kustannus on tasan nolla. Työkalusivustolle, sisäiselle sovellukselle, sisältöä painottavalle portfoliolle tai mille tahansa hitailla verkoilla oleville käyttäjille suunnatulle palvelulle järjestelmäfonttipino on oikea vastaus.

<!-- tool-cta:start -->

💡 Kokeile tätä: Muunna TTF- tai OTF-tiedostosi moderniksi WOFF2-muodoksi käyttövalmiin CSS:n kanssa käyttämällä Webfont Generator, mikä on artikkelin suosittelema formaatin vaihto.

<!-- tool-cta:end -->

Rehellinen yhteenveto

Tyypillisellä pienellä sivustolla neljä askelta kattaa koko web-fonttien suorituskykytarinan:

1. Yksi muuttuva fontti per fonttiperhe per kirjoitusjärjestelmä
2. font-display: swap ja yhteensovitetut varafontin metriikat
3. Itse isännöitynä, pitkillä välimuistiotsakkeilla ja kriittisen painon preload-määrityksellä
4. Tai jätä fontit kokonaan pois ja käytä järjestelmäfonttipinoa

Tee tämä kerran, ja saat etusivulta takaisin useita satoja kilotavuja, voitat muutamia satoja millisekunteja koetussa suorituskyvyssä ja poistat samalla kolmannen osapuolen riippuvuuden. Harvoilla muutoksilla on parempi vaiva–hyöty-suhde.