PricingLoginStart free
CSS Academy · leksjon

Google Fonts og @font-face

Last inn eksterne skrifter fra Google Fonts, eller definer egendefinerte skrifter med @font-face-regelen.

Leksjon 4 av 413 trinn

Google Fonts og @font-face er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hvorfor egendefinerte skrifter?

Nettlesersikre skrifter gir bare noen få valgmuligheter. Med egendefinerte skrifter kan De gjengi merkevareidentiteten nøyaktig. De to hovedmetodene er Google Fonts (vertstjeneste) og @font-face (egen hosting).

Konfigurere Google Fonts

Gå til fonts.google.com, velg en skriftfamilie, velg tykkelser og kopier <link>-taggen inn i HTML-ens <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>

Bruke Google Fonts i CSS

Etter at skriften er koblet inn, refererer De til den med navn i font-family-listen:

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

Parametere i Google Fonts API

Parameteren display=swap bruker strategien Font Display Swap — teksten vises umiddelbart med reservesk escrito, og byttes deretter når den egendefinerte skriften er lastet inn. Dette hindrer usynlig tekst under innlasting.

Grunnleggende om @font-face

@font-face lar Dem laste inn en egendefinert skriftfil som De selv hoster. Definer navnet på skriftfamilien og kildefilen:

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

WOFF2: Det moderne formatet

WOFF2 (Web Open Font Format 2) er det anbefalte formatet. Det gir best komprimering (vanligvis 30 % mindre enn WOFF) og støttes av alle moderne nettlesere. Inkluder alltid WOFF som reserve.

Flere tykkelser med @font-face

Oppgi én @font-face-blokk for hver kombinasjon av tykkelse og stil. Bruk samme navn i font-family, slik at nettleseren velger riktig fil automatisk:

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

Egenskapen font-display

Deskriptoren font-display styrer hvordan skrifter lastes inn:

  • swap — vis reserven umiddelbart, og bytt når den er klar (anbefalt)
  • block — usynlig tekst i opptil 3 sekunder
  • fallback — kort blokkering, deretter permanent reserve
  • optional — bruk bare hvis skriften allerede er bufret
<p class="swap-text">Text swaps in once Inter loads.</p>

@font-face for variable skrifter

Variable skrifter definerer akseintervaller i stedet for faste tykkelsesverdier:

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

Forhåndslaste kritiske skrifter

Forhåndslast den viktigste skriftfilen for å redusere forsinkelsen som blokkerer gjengivelsen. Legg til en <link rel="preload"> før stilarket:

<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() for å hoppe over nedlasting

Bruk local() i src for å kontrollere om brukeren allerede har skriften installert, før den lastes ned:

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

Hurtigsjekk

Hvilket skriftformat gir best komprimering og bredest støtte i moderne nettlesere?

Besvar den i den interaktive leksjonen

Oppsummering

Google Fonts tilbyr enkelt tilgjengelige skrifter via en <link>-tagg. Host skrifter selv med @font-face, og bruk WOFF2-formatet og font-display: swap for best ytelse. Forhåndslast kritiske skrifter, og bruk local() for å unngå unødvendige nedlastinger.

Gratis å komme i gang

Lær deg CSS med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
40
Leksjoner
159
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «Google Fonts og @font-face» gratis?

Ja – hele teksten i «Google Fonts og @font-face» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Google Fonts og @font-face»?

Last inn eksterne skrifter fra Google Fonts, eller definer egendefinerte skrifter med @font-face-regelen. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med CSS Academy?

Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Google Fonts og @font-face»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?

Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Skriftfamilier og nettsikre skrifter
  2. Skriftstørrelse, tykkelse og stil
  3. Tekstjustering, dekorasjon og avstand
  4. Google Fonts og @font-face
← Tilbake til CSS Academy