Google Fonts er praktisk — og en klassisk flaskehals for LCP, når temaet henter flere familier og vægte fra fonts.googleapis.com. Denne guide er den tekniske vej: begræns vægte, self-host, font-display og plugins. Til valg af typografi og UX se Google Fonts og brugeroplevelse.
Nedenfor får du konkrete metoder: lokal cache af fonte, færre requests og mere kontrolleret indlæsning — med eller uden plugins.
Hvorfor er Google Fonts så populær?
Det er godt at benytte sig af forskellige fonte på din hjemmeside, det hjælper at præsentere dit indhold på en pænere måde og giver lidt liv til din tekst.
Google har i mange år tilbudt en lang række fonte helt gratis at benytte på din hjemmeside, og rigtig mange hjemmesider benytter sig af dette. https://fonts.google.com/
Hvis du bruger et moderne tema eller pagebuilder vil du sikkert have stødt på en masse font muligheder når du skal vælge overskrift eller brødtekst. Denne liste er bygget ind af tema/plugin udviklerne og henter automatisk den kode der skal til for at fonten dukker op på din hjemmeside.
Det lyder jo fantastisk, men det kan altså være et problem når du gerne vil have en hurtigere hjemmeside.
Problemet er at du ikke har nogen kontrol over fontene, rent teknisk så er alt du skal gøre at indlæse en CSS fil som endda ligger hos Google, så du behøver ikke at gøre ret meget for at få nogle lækre fonte på din hjemmeside.
Her er et eksempel på hvor let det er at implementere tre fonte fra Google, du skal bare inkludere dette i din kildekode:
<link href="https://fonts.googleapis.com/css?family=Lato|Lexend+Exa|Montserrat&display=swap" rel="stylesheet">
Normalt behøver du ikke engang at tænke på dette - hvis du bruger et moderne WordPress tema så indlæses alt det her helt automatisk i baggrunden.
To familier er nok
Én til overskrifter, én til brødtekst. Inden for den samme familie bruger du vægte (almindelig og fed) i stedet for at hente en ny skrift, hver gang noget skal skille sig ud. Tre familier i ét link-tag, som i eksemplet ovenfor, er allerede for mange til en almindelig firmaside.
Uden en webfont falder teksten tilbage på det, systemet har: Arial, Helvetica, Times, Courier og deres slægtninge. De er kedelige, og de koster ingen ekstra request. En webfont er et bevidst valg, ikke en standardindstilling, temaet må slå til for fem vægte.
Hvad er font stacking?
Hvis du gerne vil have lidt mere fleksibilitet så kan du bruge det der kaldes “font stacking” - dvs. istedet for bare at sige din tekst skal være en bestemt font, så laver du en liste i din CSS kode der fortæller hvad du foretrækker og i hvilken rækkefølge.
Hvis enheden ikke har den første skrift, bruges den næste på listen. Så ender teksten i en skrift, browseren allerede har, i stedet for at blive usynlig.
Et eksempel kunne være:
font-family: 'Ropa Sans', Arial, sans-serif;
….
Det er ikke kun et problem med Google fontene, det er et generelt problem hvis du vil benytte fonte fra nogle af de hjemmesider der tilbyder dette, fonts.com osv.
Fordelen med at bruge Google er at det kun er en enkelt CSS der kræves, andre systemer såsom fonts.com kræver at du indlæser både en CSS fil og en JS fil og så begynder problemerne at opstå når du ønsker at have en hurtig hjemmeside.
Hent skriften lokalt
To veje: et plugin der gør det for dig, eller filerne selv i temaet. Begge fjerner requesten til fonts.googleapis.com. Færre vægte betyder mere end endnu et plugin.
Med et plugin
Hvis du vil gøre det let for dig selv kan du bruge et af de flere plugins der eksisterer. Jeg foretrækker normalt at bruge OMGF (Optimize My Google Fonts) til dette.
Det som dette plugin gør er at hente de fonte som du bestemmer og så tager den sig af resten. Den henter font filerne, genererer den nødvendige CSS og sætter automatisk ind i din kildekode. Den gør faktisk 99% af processen for dig.
Hvis du gerne vil spare at installere et par plugins og virkelig vil optimere på hastigheden, så kan du gøre dette manuelt, det er faktisk ikke så slemt.
Hvis du vil gøre det manuelt
Til vores overskrifter på vores hjemmeside bruger vi Lato. Det indlæses fra Google og det ser nogenlunde sådan her ud:
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Hvis vi besøger den URL og kigger på CSS koden så ser vi at der bliver indlæst nogle .woff2 filer - det er de filer der indeholder font informationen og groft sagt forklarer hvordan et bogstav eller karakter skal se ud når det vises med denne font.
For at benytte Lato på vores egen hjemmeside så kan vi bruge et tool som google-webfonts-helper. Det er udviklet af Mario Ranftl fra Østrig og lader dig vælge en eller flere fonte som du så kan downloade og sætte ind på din egen hjemmeside.
Det er en simpel process. Når du først har valgt hvilken font du vil downloade, så vælger du charset (du skal med 99% sikkerhed bare vælge “latin”).
Derefter skal du vælge hvilke variationer du vil bruge, de fleste fonte har flere forskellige tykkelser, Lato har 5 størrelser, og du kan også vælge “font weight” og så samtidig om den skal være kursiv (italic) eller ej.
Det løber hurtigt op, og hvis du bare vælger alle variationer, så indlæser du 10 forskellige variationer og dertilhørende filer.
Du vil normalt bare vælge en standard størrelse og så den version du vil bruge som “bold”.
Jo flere størrelser du vælger, desto flere filer og variationer skal der indlæses og så begynder vi at gøre situationen værre.
I dette eksempel har jeg valgt standard størrelsen og så en lidt tykkere version - 700, som agerer som den fede version af fonten.
Når du har valgt de størrelser du vil bruge, så kommer trin 3 hvor du henter den nødvendige CSS kode.
Den rigtige CSS kode bliver generet direkte på hjemmesiden, så du skal bare markere koden og kopiere over i din egen CSS fil på din hjemmeside.
Du skal dog lige være opmærksom på at ændre den relative sti til selve font filerne som du downloader. Se pilen på billedet. Som standard er den relative URL “../fonts”.
Hvis du arbejder på en WordPress hjemmeside og har et child tema sat op, så skal du ændre til “fonts/” istedet. Når du så downloader selve fontene i næste trin, skal du blot lægge filerne ind i en underfolder i dit child theme, “fonts”.
Det sidste trin - hent font filerne
Når du henter filerne får du udleveret en .zip fil som du så kan udpakke, i den fil ligger der en masse font filer, woff2, woff, svg osv.
Det er de filer som udgør fonten som du vil bruge, og de mange forskellige formater er for at imødekomme så mange forskellige browser og devices som muligt, men du kan også vælge at kun hente de mere moderne font filer. Det sparer lidt i antal filer, men du kan ikke være sikker på om den indlæses på en gammel browser.
Hvis du er ligeglad med det, så kan du spare endnu mere.
Når du har hentet fontene, opdateret din CSS og du har checket alt virker så har du kun det sidste trin tilbage og det kan faktisk være svært. Det afhænger kraftigt af hvilket tema og plugin opsætning du bruger hvor svært det skal være.
Nogle WordPress temaer insisterer på at du skal vælge en standard font til din hjemmeside og indlæser så automatisk fra Google Fonts selvom du faktisk selv lige har hentet og installeret fonten manuelt.
Ja, det er en noget besværlig gennemgang og det kræver mere end almindelig teknisk indsigt og know-how at få sat rigtigt op. Hvis du ikke har tid eller lyst til at bakse med det her teknik, så findes der nogle muligheder i form af plugins og temaer der kan hjælpe dig med dine Google fonte.
Plugins der kan gøre det
OMGF er det, jeg normalt bruger. De andre kan det samme hjørne af opgaven, hvis du allerede har dem installeret. Skift ikke tema for at få fonte hostet lokalt. Et plugin eller de manuelle filer ovenfor er nok.
- OMGF henter de Google Fonts, du vælger, og serverer dem fra din egen WordPress. Gratis.
- CAOS er først og fremmest til at hoste Analytics lokalt. Det kan også tage Google Fonts med. Gratis.
- WP Rocket kan blandt andet indlæse Google Fonts asynkront. Betalt.
- Autoptimize kan flette og minimere den CSS, Google Fonts leverer. Gratis.
- Perfmatters har en indstilling til at hoste Google Fonts lokalt. Betalt.
Når filerne ligger lokalt, så tjek i netværksfanen at fonts.googleapis.com ikke længere bliver kaldt. Nogle temaer henter skriften igen, selvom du lige har lagt den i child-temaet.