Typsnitt & webbfonter

Fonter är nätverkstillgångar

Du har precis lärt dig att komprimera bilder för att sidan ska laddas snabbt. Typsnitt är exakt samma sak, en fontfil som måste laddas ner från en server varje gång någon besöker din sida.

Om du väljer ett typsnitt med många vikter (vikter = tjockleken på bokstäverna, 400 är normal, 700 är fetstil) kan det enkelt motsvara 300-500 KB extra, mer än den optimerade profilbild du jobbade hårt med att få ner till 100 KB. Vill du slippa nätverksanropet helt kan du använda systemtypsnitt som redan finns i enheten, se Modern Font Stacks för färdiga stackar.

Google Fonts: det praktiska receptet

Gå till fonts.google.com och välj ett par: ett rubrik-typsnitt och ett brödtext-typsnitt. Ungefär så här kan ett par se ut (visat med systemtypsnitt som redan finns i din enhet):

En rubrik i serif ger tyngd och karaktär

Brödtexten i ett lättläst sans-serif gör jobbet utan att märkas. Kontrasten mellan de två är hela poängen med ett fontpar: rubriken sätter känslan, brödtexten bär läsningen.

Håll dig till max 2 familjer och max 2 vikter per familj (t.ex. 400 och 700). Sedan klistrar du in tre <link>-taggar i din <head>:

<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=Playfair+Display:wght@700&family=Inter:wght@400;700&display=swap"
    rel="stylesheet"
/>

<link rel="stylesheet" href="style.css" />

Sedan sätter du dina typsnitt som CSS-variabler:

:root {
    --font-heading: "Playfair Display", Georgia, serif;
    --font-body: "Inter", system-ui, sans-serif;
}

body {
    font-family: var(--font-body);
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
}

Ordningen i `<head>` spelar roll

preconnect ber webbläsaren öppna en nätverksanslutning till Googles servrar i förväg, innan den faktiskt behöver hämta filen. Det är som att boka bord på restaurangen innan du ger dig iväg. Du slipper vänta när du väl är hungrig.

Om preconnect hamnar efter Google Fonts-länken hjälper det inte. Filen börjar laddas direkt och förhandskopplingen kommer för sent.

`display=swap` och det osynliga texttricket

Utan display=swap gömmer webbläsaren all text tills Google Fonts är helt nedladdad. Med display=swap visas texten omedelbart med ett reservtypsnitt (till exempel systemets standardtypsnitt), och byter sedan snyggt till ditt Google Fonts-typsnitt när det är klart.

Uppgift: Sätt typsnitt på din övningssida

Ge din publicerade övningssida ett tydligt typografiskt uttryck, samma sida som du byggt vidare på genom hela temat.

Gå till fonts.google.com och välj ett par: ett lite mer personligt rubrik-typsnitt och ett lättläst brödtext-typsnitt.
Klistra in de tre <link>-taggarna i rätt ordning i <head> på din övningssida.
Lägg till --font-heading och --font-body i ditt :root-block och sätt typsnitten på body och rubrikerna via var(), precis som i exemplet ovan.
Stresstest: Aktivera Throttling på Slow 3G i DevTools och ladda om. Ser du texten direkt tack vare display=swap, eller försvinner den i en sekund?

Emmet-tips: Skriv p*3>lorem i VS Code och tryck Tab för att generera tre stycken med lorem ipsum-text. Snabbt att fylla sidan med testinnehåll.

Vad händer om…

Ta bort &display=swap från slutet av din Google Fonts-URL. Ladda om med Throttling på. Texten försvinner tills typsnittet är nedladdat, det är FOIT (Flash of Invisible Text). Lägg tillbaka &display=swap. Nu vet du varför den raden finns.

Motivera & reflektera

I ditt repos README, motivera ditt fontval med ett av de tre adjektiven från din varumärkesanalys: varför passar just det här rubrik-typsnittet känslan du är ute efter? Skriv också en mening om varför display=swap är ett tillgänglighetsbeslut och inte bara en prestandafiness.

Nästa nivå

Google Fonts är enkelt, men varje besök hämtar filerna från Googles server, ett extra nätverksberoende och en integritetsfråga (Google ser vem som laddar). Proffslösningen är att self-hosta typsnittet: ladda ner fontfilen, lägg den i ditt repo och deklarera den själv i din CSS med @font-face och font-display: swap. Mät sedan i DevTools Network, precis som i uppgiften: blev det färre externa anrop, och syns texten snabbare på Slow 3G?