kaxigt.com

Jag är rätt övertygad att flertalet har upptäckt att när en sida laddas så syns originalfonten först innan den fladdrar till och snabbt försvinner, därefter blir allt blankt, för att slutligen ladda in det anpassade typsnitt du har som ersättningsfont.

Irriterande, eller hur! Så här vill vi ju inte ha det. Helst ska fonten ska laddas in utan fördröjning. Så varför uppstår då detta problem?

Fonter kan bli väldigt stora och tunga filer att ladda. Det vet dem som exempelvis använder sig av länkade Google Fonts. Här är ett exempel på hur en äldre men vanlig inbäddad kod till Google Fonts kan se ut och som många fortfarande använder.

<link href="https://fonts.googleapis.com/css?family=Oswald:300,300i,400,700|Montserrat:300,400,400i,700|Roboto:300,400,400i,700&amp;rel=" stylesheet"="">

Det här är tre av de mest vanliga fonterna, med deras mest vanliga utseende och numeriska värde; normal/regular, italic, bold. Svarstiden till webbläsaren blir naturligtvis längre ju fler fonter man har, till och med beroende på vilka typsnitt man vill använda.

Vissa webbläsare löser detta med att inte låta texten på sidan synas när den laddas i något som kallas för ”Flash of Invisible Text”. Det går att optimera detta utförande.

Jag vill se mitt nya typsnitt på en gång

Det går att ordna, och det finns två sätt att lösa detta på. Det ena är inte fullt kompatibelt med alla webbläsare men lätt att infoga. Det andra kräver lite med arbete men är fullt kompatibelt med webbläsarna.

Alternativ 1 – font-display

Före:

@font-face {font-family: Helvetica;}

Efter:

@font-face {font-family: Helvetica; font-display: swap;}

Som du säkert ser så har vi i sista utförandet lagt till swap. Swap talar om för webbläsarna att de direkt ska ladda in all text som har en systemfont (vi slipper den blanka sidan).

När sedan den nya fonten har laddats in så byter webbläsaren direkt till denna anpassade font. Font-display är en API för att kunna specifiera en fonts utseende och hur den ska visas.

Inte alla webbläsare stöder font-display. Vilka de är kan du se här.

Google Fonts med swap länkas numer in som nedan.

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&amp;family=Oswald:wght@200;300;400&amp;family=Roboto:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&amp;display=swap" rel="stylesheet">

Google Fonts via wp_enqueue i WordPress. OBS! Ny och bättre implementering.

// Add G-fonts.
function load_fonts() {
wp_register_style('gf-googleFonts', 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400&family=Oswald:wght@200;300;400;700&ampfamily=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet"', array(), true );
wp_enqueue_style( 'gf-googleFonts');
}
add_action('wp_print_styles', 'load_fonts');

Google Fonts via @import-regeln:

<style>@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&family=Oswald:wght@200;300;400&family=Roboto:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap');
</style>

Hur laddar de mest vanliga webbläsarna in fonterna?

Alternativ 2 – Du väntar tills dina anpassade fonter har laddats

Med lite mer arbete så kan du faktiskt få alla webbläsare att hantera detta. Det är tre saker som måste göras för att uppnå samma resultat.

1. Ange inget annat än en systemfont att laddas in som initialfont. Det gör så att webbläsaren alltid visar texten direkt.
2. Försök att upptäcka precis när ditt anpassade teckensnitt laddas in. Det kan möjliggöras med några rader från javascriptet Font Face Observer.
3. Uppdatera dina nya inställningar för din anpassade font.

De här ändringarna måste du göra för att uppnå detta.

1. Omstrukturera din CSS så den inte initialt ska använda en anpassad font, utan en systemfont.
2. Lägg till ett javascript till sidan. Javascriptet märker när din anpassade font laddas och uppdaterar sidans textstil till den anpassade.

Prova själv: https://web.dev/codelab-avoid-invisible-text/
Källa: https://web.dev/avoid-invisible-text/

Läs mer i ämnet

De snabbaste Google Fonts skriver Harry Roberts om på Css Wizardry i en purfärsk artikel om bland annat font-display: swap; preloading CSS, preconnect CSS och Async CSS: Loading the Google Fonts File asynchronously.

font-display: swap;

<link rel="stylesheet" href="$CSS&amp;display=swap">

Async CSS

<link rel="stylesheet" href="$CSS&amp;display=swap" media="print" onload="this.media='all'">

Preload

<link rel="preload" as="style" href="$CSS&amp;display=swap">
<link rel="stylesheet" href="$CSS&amp;display=swap" media="print" onload="this.media='all'">

Preconnect

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="preload" as="style" href="$CSS&amp;display=swap">
<link rel="stylesheet" href="$CSS&amp;display=swap" media="print" onload="this.media='all'">

Google Fonts Async Snippet

Optimerad snippet att använda för att snabba på Google Fonts

<!--
  - 1. Preemptively warm up the fonts’ origin.
  -
  - 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
  -    most modern browsers.
  -
  - 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
  -    only after it’s arrived. Works in all browsers with JavaScript enabled.
  -
  - 4. In the unlikely event that a visitor has intentionally disabled
  -    JavaScript, fall back to the original method. The good news is that,
  -    although this is a render-blocking request, it can still make use of the
  -    preconnect which makes it marginally faster than the default.
  -->

<!-- [1] -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<!-- [2] -->
<link rel="preload" as="style" href="$CSS&amp;display=swap">
<!-- [3] -->
<link rel="stylesheet" href="$CSS&amp;display=swap" media="print" onload="this.media='all'">
<!-- [4] -->
<noscript>
<link rel="stylesheet"href="$CSS&display=swap" />
</noscript>

Källa: https://csswizardry.com/2020/05/the-fastest-google-fonts/