CSS Academy · Lektion

Google Fonts och @font-face

Läs in externa typsnitt från Google Fonts eller definiera egna typsnitt med regeln @font-face.

Lektion 4 av 413 steg

Google Fonts och @font-face är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Varför anpassade teckensnitt?

Webbsäkra teckensnitt erbjuder bara ett fåtal alternativ. Med anpassade teckensnitt kan du matcha varumärkesidentiteten exakt. De två huvudsakliga metoderna är Google Fonts (hostad tjänst) och @font-face (egen hosting).

Konfigurera Google Fonts

Besök fonts.google.com, välj en teckensnittsfamilj, välj tjocklekar och kopiera taggen <link> till HTML-elementet <head>:

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

Använda Google Fonts i CSS

Efter länkningen refererar du till teckensnittet med dess namn i din font-family-lista:

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

Parametrar i Google Fonts API

Parametern display=swap använder strategin Font Display Swap — texten visas omedelbart med reservteckensnittet och byts sedan ut när det anpassade teckensnittet har lästs in. Det förhindrar att texten blir osynlig under inläsningen.

Grunderna i @font-face

@font-face låter dig läsa in en anpassad teckensnittsfil som du själv hostar. Definiera teckensnittsfamiljens namn och filens källa:

<p class="brand-text">Custom brand typeface text</p>

WOFF2: det moderna formatet

WOFF2 (Web Open Font Format 2) är det rekommenderade formatet. Det erbjuder den bästa komprimeringen (vanligtvis 30 % mindre än WOFF) och stöds av alla moderna webbläsare. Inkludera alltid WOFF som reserv.

Flera tjocklekar med @font-face

Deklarera ett @font-face-block per kombination av tjocklek och stil. Använd samma namn för font-family så att webbläsaren automatiskt väljer rätt fil:

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

Egenskapen font-display

Deskriptorn font-display styr hur teckensnitt läses in:

swap — visa reservteckensnittet omedelbart och byt när det är klart (rekommenderas)
block — osynlig text i upp till 3 sekunder
fallback — kort blockering och därefter permanent reservteckensnitt
optional — använd endast om det redan finns i cacheminnet

<p class="swap-text">Text swaps in once Inter loads.</p>

Variabla teckensnitt med @font-face

Variabla teckensnitt definierar intervall för axlar i stället för fasta värden för tjocklek:

<p class="variable-text">Variable weight text (550)</p>

Förinläsning av viktiga teckensnitt

Förläs din viktigaste teckensnittsfil för att minska den renderingsblockerande fördröjningen. Lägg till en <link rel="preload"> före formatmallsreferensen:

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

local() för att hoppa över nedladdning

Använd local() i src för att kontrollera om användaren redan har teckensnittet installerat innan det laddas ned:

<p class="roboto-text">Uses local Roboto if installed</p>

Snabbtest

Vilket teckensnittsformat ger bäst komprimering och bredast stöd i moderna webbläsare?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Google Fonts tillhandahåller enkelt hostade teckensnitt via en tagg av typen <link>. Hosta teckensnitt själv med @font-face, använd formatet WOFF2 och font-display: swap för bästa prestanda. Förläs viktiga teckensnitt och använd local() för att undvika onödiga nedladdningar.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Google Fonts och @font-face” gratis?

Ja – hela texten till ”Google Fonts och @font-face” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Google Fonts och @font-face”?

Läs in externa typsnitt från Google Fonts eller definiera egna typsnitt med regeln @font-face. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Google Fonts och @font-face”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Typsnittsfamiljer och webbsäkra typsnitt
Typsnittsstorlek, tjocklek och stil
Textjustering, dekoration och mellanrum
Google Fonts och @font-face

← Tillbaka till CSS Academy