Når man har med fonte at gøre, hvilket du med stor sandsynlighed har. Så har du sikkert også oplevet at hjemmesider som bruger mange fonte, også loader langsommere end en side der fx kun bruger system fonte.
Det er ikke sjældent at jeg møder hjemmesider der har op imod 15 fonte installeret på hjemmesiden, og det er ganske simpelt fordi en font, kun dækker en type skrift. fx er der en font til den normale størrelse, så er der en til den fede, og så er der en til den fede og kursive og endnu en til den der er lidt federe osv. Det skaber altså i længden, ret mange fonte.
Det bedste er helt klart at bruge system fonte, der er ingen load, og brugerens enhed har allerede fonten og skal derfor ikke til at hente den fra fx google eller dit eget domæne.
Nå, nu til hvordan man optimerer sine fonte
Der er nogle regler jeg altid fortæller mine kunder når der er tale om optimering af fonte
- Fonte skal loade før alt andet
- Kald til fonte må ikke ske gennem css filer, det skal være direkte i html koden før andre kald til css
- Fonte skal aktiveres og bruges så hurtigt i dokumentet som muligt
Har man 15 fonte, skal man selvfølgelig ikke optimere dem alle, man skal udvælge de fonte som benyttes over folden.
Load fonte før alt andet
Man loader fonte som noget af det første ved at benytte sig af et link rel preload tag. det er et link tag, som har fået sat rel=”preload” på. det ser ud sådan:
<link rel="preload" href="/google-fonten/fontnavn.woff2" as="font" type="font/woff2" crossorigin>der skal oprettes en for hver vigtig font der er på siden.
Kald til fonte må ikke ske gennem css filer
Ret ofte, faktisk hver gang jeg optimere en hjemmeside. Loades alle fonte gennem eksterne css filer. Fx via kald til Google efter en fil med adresser og stier til fonte der skal hentes, eller via temaets css kode hvor der også er referencer til fonte.
Det må man ikke
For det der sker er jo at browseren jo reelt ikke kender stien til fonten, før css filen er hentet ned. Og faktisk ikke engang før fonten bliver brugt.
Så sådanne kald:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;1,100&display=swap" rel="stylesheet">Skal væk, og indholdet af dem skal indsættes lige under de preloads du før lavede.
Så skal fontene aktiveres
Man aktivere fonten ved at benytte sig af den så hurtigt som muligt. Så de css koder som du egentlig har i din css fil, som referere til fontene der skal bruges på fx overskrifter, tekst, menu etc, skal også ind og sidde lige under de fonte du lige har kopieret ind.
Det var lige nogle hurtige tips til optimering af fonte, god arbejdslyst og god jul.
