Når du kjører et nettsted gjennom PageSpeed Insights, er en av de vanlige diagnosene «Sørg for at tekst forblir synlig under lasting av nettfonter». Problemet er kjent for alle som har installert Elementor, Astra, eller koblet til Google Fonts: mens nettleseren laster ned fontfilen, er teksten på siden rett og slett fraværende. En hvit skjerm i stedet for en overskrift, brøkdeler av et sekund med tomhet, og den besøkende har allerede forlatt siden.

Teknisk sett kalles dette FOIT (Flash of Invisible Text). Roten til problemet ligger i font-display-direktivet som nettleseren bruker som standard. Uten å eksplisitt angi font-display: swap, venter nettleseren på at fonten skal lastes og viser ikke tekst før filen er mottatt. Og hvis fonten lastes fra et CDN via et tredjepartsdomene, akkumuleres forsinkelsen, og PageSpeed Insights flagger en advarsel.

Dette løses med to ting: for det første må hver @font-face ha font-display: swap lagt til, slik at nettleseren umiddelbart viser tekst i en systemfont og «bytter» den ut med den egendefinerte når den lastes. For det andre bør kritisk viktige fonter (den som brukes til overskriften i det første skjermbildet) forhåndslastes via <link rel="preload">. Nedenfor er en trinnvis gjennomgang av hvordan du gjør dette i WordPress, med hensyn til utvidelser som Elementor og temaer som Astra.

💡 Rask oversikt:

• Åpne PageSpeed Insights-rapporten og noter de problematiske fontene fra diagnostikken
• Deaktiver utvidelses- og temastiler via wp_dequeue_style i functions.php
• Kopier fontfiler til en lokal mappe og gjenskap font-face med font-display: swap
• Legg til forhåndslasting for én eller to fonter i det første skjermbildet
• For Elementor egendefinerte fonter, endre banen til lokal og bygg CSS på nytt

Trinn 1: finn de problematiske fontene i rapporten

Kjør en revisjon på PageSpeed Insights, vent på resultatet, og finn diagnostikkdelen. Vi ser etter punktet «Sørg for at tekst forblir synlig under lasting av nettfonter».

Utvid listen for å se de spesifikke font-URL-ene som mangler font-display: swap. Vanligvis er disse:

• fontawesome-webfont.woff2, Font Awesome fra Elementor;
• eicons.woff2, Elementors ikonfont;
• Google Fonts (Open Sans, Roboto, Montserrat), hvis temaet henter dem via CDN.

Skriv ned filnavnene; de vil være nødvendige for de følgende trinnene. Hovedsaken nå er å forstå hvilken utvidelse eller hvilket tema som er ansvarlig for hver font. Font Awesome og eicons kommer fra Elementor. Google Fonts kobles oftest til av temaet; i Astra er dette astra-google-fonts-hooken.

Trinn 2: deaktiver stilene som laster fonter

Nå er oppgaven å fjerne standardtilkoblingen av disse fontene slik at vi deretter kan bringe dem tilbake med riktige innstillinger. Gå til barnetemaets functions.php (eller en kodeutvidelse som Code Snippets) og legg til:

1
/**
2
 * Disable styles that load problematic fonts
3
 */
4
function sdstudio_dequeue_font_styles()
5
{
6
    // Astra — Google Fonts
7
    wp_dequeue_style('astra-google-fonts');
8
    wp_deregister_style('astra-google-fonts');
9
 
10
    // Elementor — Font Awesome 4
11
    wp_dequeue_style('font-awesome');
12
    wp_deregister_style('font-awesome');
13
 
14
    // Elementor — eicons
15
    wp_dequeue_style('elementor-icons');
16
    wp_deregister_style('elementor-icons');
17
}
18
add_action('wp_enqueue_scripts', 'sdstudio_dequeue_font_styles', 9999);
19
add_action('wp_head', 'sdstudio_dequeue_font_styles', 9999);

Prioriteten 9999 er viktig: hooken må kjøre ETTER at utvidelser og temaet har registrert sine stiler. Hvis fonten fortsatt lastes, sjekk om en annen utvidelse kaller den (for eksempel kan en meny eller et kontaktskjema koble til sin egen versjon av Font Awesome). Søk i utvidelsesfilene etter strengen wp_enqueue_style med det tilsvarende håndtaket.

Etter at du har lagt til koden, vil Font Awesome-ikonet på nettstedet midlertidig forsvinne; dette er normalt. Vi bringer det tilbake i trinn 4.

Trinn 3: kopier fontfiler til en lokal mappe

Når en font er koblet til via CDN eller gjennom en utvidelse, gjør nettleseren en ekstra DNS-forespørsel til et tredjepartsdomene. Lokal hosting av fonter fjerner denne forsinkelsen. Algoritmen:

• Finn fontfilene i utvidelsesstrukturen. For Font Awesome fra Elementor vil banen være: /wp-content/plugins/elementor/assets/lib/font-awesome/fonts/. For eicons: /wp-content/plugins/elementor/assets/lib/eicons/fonts/. For Google Fonts, last ned .woff2 fra Google Fonts CDN.

• Opprett en mappe /wp-content/fonts/ i nettstedets rot og kopier alle nødvendige filer dit. Formatene .woff2 (moderne nettlesere) og .woff (reserveløsning for eldre) er tilstrekkelige.

• Hvis fonten ble koblet til av temaet via Google Fonts CDN, last ned gjeldende .woff2 manuelt via en direkte lenke eller ved hjelp av OMGF-utvidelsen (mer om det nedenfor).

Nå har hver font en lokal bane som /wp-content/fonts/fontawesome-webfont.woff2. La oss gå videre til den viktigste delen: å koble dem til.

Trinn 4: koble til fonter med font-display: swap og forhåndslasting

Stiler er deaktivert, filer er på plass. Nå definerer vi @font-face med riktig font-display: swap-direktiv og legger til preload for øyeblikkelig lasting. Plasser koden i functions.php via wp_head-hooken:

1
/**
2
 * Load fonts locally with font-display: swap and preload
3
 */
4
function sdstudio_inject_font_preload()
5
{
6
    ?>
7
    <!-- Preload critical fonts -->
8
    <link rel="preload" href="/wp-content/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
9
    <link rel="preload" href="/wp-content/fonts/eicons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
10
 
11
    <style>
12
        /* Font Awesome — icon font */
13
        @font-face {
14
            font-family: 'FontAwesome';
15
            font-display: swap;
16
            font-style: normal;
17
            font-weight: normal;
18
            src: url('/wp-content/fonts/fontawesome-webfont.woff2') format('woff2'),
19
                 url('/wp-content/fonts/fontawesome-webfont.woff') format('woff');
20
        }
21
 
22
        /* eicons — Elementor icons */
23
        @font-face {
24
            font-family: 'eicons';
25
            font-display: swap;
26
            font-style: normal;
27
            font-weight: normal;
28
            src: url('/wp-content/fonts/eicons.woff2') format('woff2'),
29
                 url('/wp-content/fonts/eicons.woff') format('woff');
30
        }
31
    </style>
32
    <?php
33
}
34
add_action('wp_head', 'sdstudio_inject_font_preload', 5);

Prioritet 5 i wp_head betyr at forhåndslastingstagger vil vises i <head> blant de første, slik at nettleseren vil begynne å laste ned fonten før den når CSS-en. Attributtet crossorigin="anonymous" er obligatorisk for forhåndslasting av fonter: uten det vil nettleseren ignorere forhåndslastingen og laste ned filen på nytt.

En viktig nyanse: URL-en inne i @font-face bør ikke ha spørringsparametere som ?#iefix eller ?v=4.7.0. PageSpeed Insights snubler i dem under analyse. Lenken bør være ren: /wp-content/fonts/fontawesome-webfont.woff2, og det er alt.

Etter at du har lagt til koden, tøm hurtigbufferen (hurtigbufferutvidelse + Cloudflare, hvis brukt) og kjør PageSpeed Insights på nytt. Fontadvarselen bør forsvinne. Font Awesome-ikoner kommer tilbake på plass, men nå blokkerer de ikke tekstvisning.

Trinn 5: Elementor egendefinerte fonter, et spesialtilfelle

Hvis du bruker Elementor Pro med funksjonen «Egendefinerte fonter», er logikken den samme, men det er to ekstra trinn.

For det første, endre fontbanen i Elementor-innstillingene. Gå til Elementor → Egendefinerte fonter, åpne ønsket font, og i URL-feltet spesifiser den lokale banen /wp-content/fonts/your-font.woff2 i stedet for en ekstern CDN- eller Google Fonts-lenke:

For det andre, bygg Elementor CSS på nytt. Etter at du har endret banen, gå til Elementor → Verktøy → Regenerer CSS og klikk på regenereringsknappen. Dette vil tvinge Elementor til å bygge stilfilene på nytt med de nye fontbanene:

Etter regenerering, bekreft at fontbanen i sidens HTML leder til den lokale filen, ikke CDN-et. Legg deretter til forhåndslasting for denne fonten i header.php (eller via wp_head som i trinn 4):

1
<link rel="preload" href="/wp-content/fonts/FuturaBookC.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Og den tilsvarende @font-face med font-display: swap:

1
@font-face {
2
    font-family: 'FuturaBookC';
3
    font-display: swap;
4
    font-style: normal;
5
    font-weight: normal;
6
    src: url('/wp-content/fonts/FuturaBookC.woff2') format('woff2'),
7
         url('/wp-content/fonts/FuturaBookC.woff') format('woff');
8
}

Alternativ vei: utvidelser for automatisk optimalisering

Den manuelle metoden gir full kontroll, men krever oppmerksomhet ved oppdatering av utvidelser (en Elementor-oppdatering kan gjenopprette standard fonttilkobling). Hvis du ønsker å automatisere prosessen, her er to utvidelser som løser oppgaven uten koderedigering.

OMGF (Optimize My Google Fonts). En gratis utvidelse som skanner alle Google Fonts på nettstedet, laster dem ned lokalt og legger til font-display: swap automatisk. Installer den, klikk «Optimaliser», og alle temaets Google Fonts blir lokale med riktige headere. Pro-versjonen kan jobbe med Adobe Fonts og alle tredjeparts CDN-fonter.

Swap Google Fonts Display. En minimalistisk utvidelse som gjør nøyaktig én ting: legger til font-display: swap på alle Google Fonts i farten. Den laster ikke ned lokalt, men fjerner PageSpeed Insights-advarselen på 10 sekunder etter installasjon. Egnet som en midlertidig løsning eller hvis lokal hosting av fonter ikke er kritisk.

Utvidelser sparer tid, men husk: de fungerer bare med Google Fonts. Ikonfonter (Font Awesome, eicons) og Elementor egendefinerte fonter berøres ikke; du må fortsatt gjennom de manuelle trinnene 1-5.

⁉️🤔 Ofte stilte spørsmål

Må jeg forhåndslaste ALLE fonter på nettstedet?

Nei. <link rel="preload"> gir mening bare for én eller to fonter som vises i det første skjermbildet, for eksempel fonten til H1-overskriften og hovedtekstfonten. Å forhåndslaste et dusin fonter vil ha motsatt effekt: nettleseren vil bruke båndbredde på filer som ikke trengs akkurat nå og bremse lasting av kritisk innhold. Forhåndslast bare fonter som brukes i det første visningsområdet. For en typisk blogg er dette én overskriftsfont og én tekstfont, totalt to woff2-filer. Å forhåndslaste en ikonfont er bare verdt det hvis et ikon vises i det første skjermbildet (meny, søk). Alt annet vil lastes mens du ruller, uten å skade PageSpeed-metrikkene.

Hva om nettstedet «ødelegges» etter deaktivering av stiler?

Det vanligste scenariet: du deaktiverte elementor-icons, og glidebryterpilene eller søkeikonet forsvant. Løsningen er å sjekke hvilke spesifikke elementer som bruker fonten før deaktivering. Åpne DevTools (F12), Elements-fanen, finn ikonet, og se på CSS-klassen. Hvis klassen starter med fa-, er det Font Awesome. Hvis med eicon-, er det eicons. Deaktiver bare det som faktisk brukes, og koble de samme filene lokalt; visuelt vil ingenting endres. Nettstedet «ødelegges» i to tilfeller: enten deaktiverte du en stil som, i tillegg til fonten, bar CSS-regler (sjeldent, men skjer med temaer som Astra), eller så koblet du ikke til fonten lokalt igjen. I det første tilfellet, trekk ut CSS-reglene fra den deaktiverte filen og kopier dem inn i din wp_head-blokk. I det andre tilfellet, legg ganske enkelt til den manglende @font-face.

Fungerer denne metoden for ethvert WordPress-tema?

Ja, med forbehold. Prinsippet dequeue style → local fonts → font-display: swap → preload er universelt. Bare stilhåndtakene endres: for Astra er det astra-google-fonts, for GeneratePress er det generate-fonts, for OceanWP er det oceanwp-google-fonts. For å finne temaets håndtak, åpne sidekilden (Ctrl+U), finn <link rel="stylesheet" med fonten, og se på taggens id; dette er håndtaket. Bytt det så ut i wp_dequeue_style. Moderne temaer (2024-2026) legger i økende grad til font-display: swap ut av boksen: Twenty Twenty-Five og blokktemaer basert på theme.json har allerede denne innstillingen. Før du redigerer kode, sjekk om temaet ditt allerede gjør alt riktig og advarselen bare skyldes en ikonfont fra en separat utvidelse.

Er det obligatorisk å kopiere fonter lokalt?

Teknisk sett, nei. font-display: swap fungerer også med fonter koblet til via CDN (Google Fonts, cdnjs). Men lokal hosting gir to fordeler: for det første fjerner du en ekstra DNS-forespørsel til et tredjepartsdomene (sparer 50-200 ms), og for det andre er du ikke avhengig av CDN-tilgjengelighet. Hvis Google Fonts går ned, vil nettstedet ditt forbli med lesbar tekst. For et produksjonsnettsted er lokal hosting beste praksis; for et hobbyprosjekt er det valgfritt. Unntak: ikonfonter. Font Awesome, eicons og dashicons lastes fra utvidelsen (lokalt per definisjon); å kopiere dem til rotmappen er bare nødvendig for å «avskjære» lastekontroll etter dequeue. Selve filen er allerede fysisk på serveren.

Hva du skal gjøre med fontadvarselen: den endelige algoritmen

Gå gjennom de fem trinnene i denne guiden, så vil advarselen «Sørg for at tekst forblir synlig under lasting av nettfonter» forsvinne fra PageSpeed Insights-rapporten. Kort fortalt: deaktiver standardtilkoblingen → plasser fonter lokalt → bring dem tilbake med font-display: swap → forhåndslast den kritiske woff2 → for Elementor, endre i tillegg banen og bygg CSS på nytt. Som et resultat er tekst på nettstedet synlig umiddelbart, LCP- og FCP-metrikker forbedres, og den besøkende ser ikke en «hoppende» side.

Hvis du ikke ønsker å grave i kode, start med OMGF-utvidelsen for Google Fonts. For ikonfonter finnes det ingen «magisk pille»-utvidelse; du må fortsatt behandle dem manuelt, men det er 20 minutters arbeid som lønner seg med høyere PageSpeed-poengsum og reelle forbedringer i lastehastighet. Prøv det og test etter hver endring; bare en gjentatt revisjon vil vise at problemet faktisk er løst.