Näin isännöit fontteja paikallisesti Google Fonts -palvelun sijaan

Miksi Google Fonts kannattaa isännöidä itse?

Google Fonts teki hyvästä typografiasta helppoa. Lisää tyylitiedosto, valitse muutama vahvuus ja julkaise sivu. Vuosien ajan se oli pienille tiimeille järkevä oletus.

Kompromissi on, että jokaisen kävijän selain ottaa yhteyttä kolmannen osapuolen palveluun hakeakseen fonttien CSS:n ja fonttitiedostot. Siitä seuraa kaksi asiaa.

Ensinnäkin se lisää renderöintiin ulkoisen riippuvuuden. Jos fonttien CSS on hidas, estetty tai ei saatavilla käyttäjän alueella tai verkossa, sivusi odottaa tai palaa varafonttiin.

Toiseksi se herättää tietosuojakysymyksen. Fonttipyyntö voi paljastaa käyttäjän IP-osoitteen, user agentin, referrer policy -kontekstin ja ajoitustietoja kolmannelle osapuolelle. Google Fonts kertoo, ettei se aseta evästeitä Fonts API:n kautta, mutta “ei evästeitä” ei ole sama asia kuin “ei henkilötietoja.” GDPR:n näkökulmasta IP-osoite voi edelleen olla asiayhteydestä riippuen henkilötieto.

Fonttien itseisännöinti ei ole automaattisesti pakollista jokaiselle verkkosivustolle, eikä tämä ole oikeudellista neuvontaa. Eurooppalaisille sivustoille, julkisen sektorin sivustoille, terveydenhuoltoon, koulutukseen, rahoitusalalle tai mille tahansa tiimille, joka pyrkii vähentämään tarpeettomia kolmannen osapuolen pyyntöjä, paikallinen isännöinti on kuitenkin yleensä siistimpi ratkaisu.

Hyvin toteutettuna se on usein myös suorituskykyetu. Avainsana on “hyvin.” Kuuden fonttitiedoston kopioiminen hakemistoon /assets/fonts/ ja niiden lataaminen jokaisella sivulla voi olla huonompi ratkaisu kuin isännöidyn palvelun käyttäminen. Jos haluat laajemman suorituskykykontekstin, aiempi artikkelimme siitä, miksi verkkofontit ovat yhä useimmilla sivustoilla helpoin suorituskykyparannus, käsittelee yleisiä hukkapisteitä.

Mikä muuttuu, kun isännöit fontit itse

Kun käytät Google Fonts -palvelua tavalliseen tapaan, sivusi tekee näin:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

Selain pyytää ensin CSS:n osoitteesta fonts.googleapis.com ja lataa sitten fonttitiedostot osoitteesta fonts.gstatic.com.

Kun isännöit fontit itse, sivusi tulisi pyytää sekä CSS että fonttitiedostot omalta verkkotunnukseltasi:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Tämä poistaa kolmannen osapuolen fonttipyynnön. Samalla se tekee sinusta vastuullisen tiedostomuotojen, välimuistiotsakkeiden, varafonttien ja päivitysten valinnasta.

Tähän vastuuseen kannattaa suhtautua vakavasti. Fontit ovat kriittisellä renderöintipolulla. Huono fonttiasetus voi aiheuttaa näkymätöntä tekstiä, asettelun siirtymiä ja hidasta ensimmäistä renderöintiä.

Vaihe 1: Auditoi, mitä oikeasti käytät

Ennen kuin lataat mitään, listaa fonttiperheet, vahvuudet, tyylit ja merkistöt, joita sivustosi todella tarvitsee.

Tyypillinen markkinointisivusto saattaa tarvita:

• Regular 400 leipätekstiin
• Semibold 600 tai bold 700 otsikoihin ja painikkeisiin
• Italic 400 vain, jos suunnittelu todella käyttää kursiivia
• Vain latinalainen merkistö, ellei sivusto tue useampia kieliä

Suhtaudu epäilevästi vanhoihin design system -oletuksiin. Monet sivustot lataavat vahvuudet 300, 400, 500, 600, 700, kursiivit ja useita kirjoitusjärjestelmiä, koska joku valitsi ne kerran fonttivalitsimesta.

Avaa selaimen DevToolsissa Network-paneeli, suodata “font,” lataa sivu uudelleen ja tarkista, mitä tiedostoja pyydetään. Tarkista sitten CSS:stäsi font-weight-käyttö. Jos CSS ei koskaan käytä vahvuutta 300, älä isännöi vahvuutta 300.

Jos arvioit vaikutusta myöhemmin, Lighthouse voi auttaa, mutta älä pidä sen pisteytystä koko totuutena. Käytä sitä diagnostiikkatyökaluna, älä tuomarina. Meillä on erillinen opas siitä, miten Lighthouse-raporttia luetaan panikoimatta, ja siitä on hyötyä fonttikorjausten priorisoinnissa.

Vaihe 2: Lataa oikeat fonttitiedostot

Google Fonts tarjoaa avoimen lähdekoodin fontteja. Voit ladata ne Google Fonts -sivustolta tai kyseisen fonttiprojektin repositoriosta. Tarkista lisenssi, mutta useimmat Google Fonts -fontit jaetaan avoimilla lisensseillä, kuten SIL Open Font License tai Apache License.

Verkkokäytössä suosi WOFF2-muotoa. Modernit selaimet tukevat sitä laajasti, ja se on yleensä paljon pienempi kuin TTF tai OTF. Vuonna 2026 TTF:n tarjoaminen suoraan selaimille on harvoin perusteltua julkisilla verkkosivustoilla.

Järkevä hakemistorakenne näyttää tältä:

/public
  /fonts
    inter-latin-400.woff2
    inter-latin-600.woff2
    inter-latin-700.woff2

Käytä kuvaavia tiedostonimiä. Kuuden kuukauden päästä font.woff2 on ärsyttävä. inter-latin-600.woff2 on tylsä ja hyödyllinen.

Jos sivustosi käyttää build-järjestelmää, pidä lähdefontit selkeässä paikassa ja anna build-putken kopioida optimoidut tiedostot julkisten resurssien hakemistoon.

Vaihe 3: Rajaa fontteja tarvittaessa

Rajaaminen tarkoittaa, että poistetaan merkit, joita et tarvitse. Täysi fontti voi sisältää latinalaisia, kyrillisiä, kreikkalaisia ja vietnamilaisia merkkejä, symboleja sekä monia OpenType-ominaisuuksia. Jos englanninkielinen laskeutumissivusi tarvitsee vain latinalaisia merkkejä, rajattu versio voi olla huomattavasti pienempi.

Yleisiä lähestymistapoja on kaksi:

1. Käytä fontin tarjoajan tai repositorion valmiiksi tehtyä rajattua versiota.
2. Luo oma rajattu versio fonttityökalulla, kuten fonttoolsin pyftsubset.

Monille tiimeille valmiit latinalaiset osajoukot riittävät. Mukautettu rajaaminen on hyödyllistä, kun sivut ovat hyvin rajattuja, kuten yksittäinen kampanjasivu, jossa on rajallisesti tekstiä, tai tuotteen käyttöliittymä, jossa tarvittavat merkit ovat ennakoitavissa.

Ole varovainen monikielisten sivustojen kanssa. Puuttuvat glyyfit aiheuttavat varafonttien sekoittumista, mikä voi näyttää rikkinäiseltä ja heikentää luettavuutta. Jos tuet useita kieliä, kohdista fonttien osajoukot kielireitteihin sen sijaan, että pakottaisit yhden pienen osajoukon kaikkialle.

Vaihe 4: Kirjoita @font-face-sääntösi

Minimaalinen paikallinen asetus näyttää tältä:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Muutama yksityiskohta on tässä tärkeä.

Käytä useimmilla sisältösivustoilla font-display: swap -asetusta. Se kertoo selaimelle, että varateksti näytetään nopeasti ja verkkofontti vaihdetaan tilalle, kun se saapuu. Tämä välttää FOIT-ilmiön pahimman version: näkymättömän tekstin välähdyksen.

Määritä selkeä varafonttipino. Jos mukautettu fontti epäonnistuu, käyttäjien pitäisi silti saada luettavaa tekstiä. Varafontit eivät ole jälkiajatus; ne ovat osa suunnittelua. Jos sinun täytyy palata kokoon, rivin pituuteen ja leipätekstin valintoihin, aloita käytännön oppaasta luettavaan typografiaan modernissa verkossa.

Sovita vahvuudet oikein. Jos CSS pyytää font-weight: 500, mutta määrittelet vain 400 ja 700, selain voi synteettisesti luoda väliin jäävän vahvuuden. Se ei ole aina katastrofi, mutta voi näyttää epäjohdonmukaiselta.

Vaihe 5: Poista ulkoiset Google Fonts -kutsut

Kun olet lisännyt paikallisen fontti-CSS:n, poista vanhat etäkutsut sivupohjistasi.

Etsi:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?..." rel="stylesheet">

Tarkista myös:

• Teema-asetukset CMS-alustoissa
• Page builder -työkalujen typografiapaneelit
• Kolmannen osapuolen widgetit
• Tag managerit
• Vanhat CSS-importit, kuten @import url('https://fonts.googleapis.com/...')

Viimeinen on yleinen. CSS:n @import fontteja varten on yleensä suorituskyvyn kannalta huonompi, koska se viivästyttää löytämistä. Jos isännöit fontit itse, määritä fontit suoraan pää-CSS:ssäsi tai varhain ladattavassa fontti-CSS-tiedostossa.

Tietosuojatyö epäonnistuu usein siksi, että tiimit korjaavat ilmeisen sivupohjan mutta unohtavat skriptit, widgetit ja vanhat upotukset. Sama kaava näkyy suostumustyössä; oppaamme siitä, mikä muuttui evästeissä vuonna 2026, on hyödyllinen kumppani, jos vähennät kolmannen osapuolen kosketuspintaa laajemminkin.

Vaihe 6: Aseta välimuistiotsakkeet

Fonttitiedostot ovat staattisia resursseja. Ne kannattaa välimuistittaa aggressiivisesti, jos niiden tiedostonimet ovat versioituja tai sisältöhajautettuja.

Hyvä tuotanto-otsake on:

Cache-Control: public, max-age=31536000, immutable

Käytä pitkäikäistä immutable-välimuistitusta vain, jos URL muuttuu tiedoston muuttuessa. Esimerkiksi:

inter-latin-400.a8f3c2.woff2

tai versioitu polku:

/fonts/v2/inter-latin-400.woff2

Jos ylikirjoitat tiedoston /fonts/inter-latin-400.woff2 muuttamatta URL-osoitetta, osa käyttäjistä voi säilyttää vanhan tiedoston pitkään. Se on hyvä asia siihen asti, kunnes ei ole. Versiointi välttää ongelman.

Tarjoile fontit myös oikealla MIME-tyypillä:

Content-Type: font/woff2

Useimmat modernit hosting-alustat hoitavat tämän automaattisesti, mutta se kannattaa varmistaa.

Vaihe 7: Harkitse vain kriittisen fontin esilataamista

Esilataus voi auttaa selainta löytämään tärkeän fontin aiemmin:

<link rel="preload" href="/fonts/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>

Käytä tätä säästeliäästi. Esilataa ensisijainen heti näkyvän alueen tekstifontti, älä jokaista fonttivahvuutta. Liiallinen esilataus kilpailee CSS:n, kuvien ja JavaScriptin kanssa.

Sisällytä crossorigin fonttien esilatauksiin myös saman alkuperän fonteille. Fonttien haku käyttää CORS-tilaa, ja sen pois jättäminen voi joissain asetuksissa aiheuttaa päällekkäisiä latauksia.

Jos olet epävarma, testaa. Älä kopioi esilatauksia mekaanisesti vain siksi, että tarkistuslista niin sanoi.

Vaihe 8: Testaa tietosuoja ja suorituskyky

Testaaminen on suoraviivaista.

Avaa DevTools, lataa sivu uudelleen välimuisti pois käytöstä ja suodata Network-paneelista:

• fonts.googleapis.com
• fonts.gstatic.com
• .woff2
• font

Sinun pitäisi nähdä fonttitiedostot omalta verkkotunnukseltasi eikä yhtään Google Fonts -pyyntöä.

Testaa sitten kylmällä ja lämpimällä välimuistilla. Ensimmäisellä käynnillä fonttien pitäisi latautua kerran. Myöhemmillä käynneillä niiden pitäisi tulla selaimesta riippuen muistista tai levyvälimuistista.

Tarkista, syntyykö asettelun siirtymää, kun fontti vaihtuu käyttöön. Jos otsikot hyppäävät, varafontin mitat poikkeavat liikaa verkkofontista. Näkyvää siirtymää voi vähentää valitsemalla läheisemmän varafontin tai käyttämällä uudempia CSS:n fonttimetriikkayliajoja, kuten size-adjust, ascent-override, descent-override ja line-gap-override. Ne ovat edistyneempiä, mutta hyödyllisiä viimeistellyissä käyttöliittymissä.

Testaa lopuksi sivut yksityisessä selaustilassa tai sisällönesto käytössä. Yksi itseisännöinnin hyödyistä on, että tietosuojatyökalut estävät typografiasi vahingossa harvemmin.

Yleiset virheet, joita kannattaa välttää

Liian monen vahvuuden isännöinti

Tämä on yleisin epäonnistuminen. Kaksi vahvuutta riittää usein. Kolme on yleensä paljon. Viisi on design system -varoitusmerkki, ellei sinulla ole vahvaa syytä.

Kursiivien unohtaminen

Jos sisältösi käyttää oikeaa korostusta, lataa oikea kursiivitiedosto. Synteettinen kursiivi voi näyttää heikolta, erityisesti pitkissä toimituksellisissa sisällöissä.

Vanhan Google CSS -linkin säilyttäminen

Tämä tekee koko työstä turhaa. Siirtymän jälkeen yhdenkään fonttipyynnön ei pitäisi mennä Googlelle, ellei jokin toinen komponentti lisää sitä.

Fonttien tarjoilu ilman pitkäaikaista välimuistitusta

Itseisännöinti antaa sinulle hallinnan. Käytä sitä. Fontit sopivat erinomaisesti pitkille välimuistin käyttöajoille.

Oikeudellisen ja dokumentaatiotyön sivuuttaminen

Jos tietosuojakäytäntösi mainitsi aiemmin Google Fonts -palvelun tai kolmannen osapuolen fonttien lataamisen, päivitä se siirtymän jälkeen. Jos ylläpidät tietojenkäsittelyluetteloa, päivitä sekin. Teknisen muutoksen ja compliance-dokumentaation pitäisi olla linjassa.

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

💡 Kokeile tätä: Muunna Google Fontsista lataamasi TTF-tiedostot itse isännöitäviksi WOFF2-tiedostoiksi sekä CSS:ksi Webfont Generator -työkalulla.

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

Yksinkertainen siirtymän tarkistuslista

1. Listaa fonttiperheet, vahvuudet, tyylit ja kirjoitusjärjestelmät, joita oikeasti käytät.
2. Lataa WOFF2-tiedostot ja varmista lisenssi.
3. Rajaa fontit, jos sivustolla on rajalliset kielitarpeet.
4. Lisää paikalliset @font-face-säännöt ja font-display: swap.
5. Poista kaikki Google Fonts link-, preconnect- ja @import-viittaukset.
6. Tarjoile fontit omalta verkkotunnukseltasi pitkäikäisillä välimuistiotsakkeilla.
7. Esilataa vain tärkein heti näkyvän alueen fontti, jos testaus tukee sitä.
8. Varmista DevToolsissa, ettei Google Fonts -pyyntöjä ole jäljellä.
9. Päivitä tietosuojadokumentaatio tarvittaessa.

Fonttien itseisännöinti ei ole hohdokasta työtä. Se on sellaista pientä infrastruktuurin siistimistä, joka vähentää riippuvuusriskiä, parantaa tietosuojan tasoa ja tekee renderöinnistä ennustettavampaa. Se on yleensä sen tunnin tai kahden arvoista, jonka se vie.