I denne kategori Design & layout
Brug dine egne skrifttyper i designet
Sådan lægger du en skrifttype som .woff2-fil i mappen Fonts under Filer og billeder og bruger den i dit design via Kode editor, så den hentes fra din egen shop.
På denne side
Skrifttyperne du vælger i designet, henter shoppen allerede fra sin egen server. Men vil du bruge en skrifttype der ikke er på listen, skal du selv lægge den ind i shoppen.
Det kan du gøre i Filer og billeder, som tager imod skrifttyper i formaterne .woff2 og .woff. Så ligger skrifttypen på din egen shop, og den besøgendes browser henter den derfra.
Det er bedre end at hente den direkte hos fx Google Fonts. Så sender browseren nemlig den besøgendes IP-adresse til Google, før kunden har svaret på dit cookie-banner, og det har tyske advokater sendt krav til webshops for.
Det skal du bruge
- Skrifttypen som en .woff2-fil. Den virker i alle nyere browsere. Har du også en .woff-fil, kan du uploade den, men det er ikke nødvendigt.
- En licens der tillader at bruge skrifttypen på en hjemmeside. Gratis skrifttyper fra Google Fonts må gerne bruges sådan.
Filer og billeder tager ikke imod .ttf- og .otf-filer. Har du kun skrifttypen i et af de formater, skal den først laves om til .woff2.
I eksemplet her bruger vi skrifttypen Playfair Display fra Google Fonts, i filen PlayfairDisplay.woff2.
1. Opret mappen Fonts
Vi anbefaler at du samler dine skrifttyper i en mappe for sig, så de ikke blandes med dine billeder. Kald mappen Fonts.
Gå til Værktøj > Filer og billeder.
Klik på Opret (1) øverst til venstre, og vælg Folder (2).
Skriv Fonts i feltet Navn (1), og klik på Opret (2).
Mappen står nu i listen sammen med de andre mapper. Klik på Fonts for at åbne den.
2. Upload skrifttypen
Når du står i mappen Fonts, klikker du på Upload. Træk din .woff2-fil ind i vinduet, eller vælg den med Tilføj filer.
Øverst i vinduet kan du se hvilke filtyper der er godkendt (1). Her skal woff og woff2 stå med. Når filen står på listen (2), klikker du på Upload (3). Luk derefter vinduet med Luk.
Filen ligger nu i mappen images / Fonts (1), og du kan se den i listen (2).
Skriv filens adresse ned, for den skal du bruge i næste trin. Adressen er stien du ser øverst, med en skråstreg foran og filnavnet til sidst:
/images/Fonts/PlayfairDisplay.woff2
Skriv den præcis som den står, også store og små bogstaver. Med et lille f, /images/fonts/, finder shoppen ikke filen.
3. Fortæl designet om skrifttypen
Gå til Indhold og Layout > Kode editor, og klik på filen user-styles.less i listen til venstre. Det er filen til din egen CSS.
Indsæt denne kode i filen. Skriv dit eget navn på skrifttypen og adressen fra trin 2:
@font-face {
font-family: 'Playfair Display';
src: url('/images/Fonts/PlayfairDisplay.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
font-family er det navn du bruger om skrifttypen i resten af koden. src er adressen på filen. font-display: swap gør at teksten bliver vist med en reserveskrift, indtil skrifttypen er hentet, så siden ikke står uden tekst imens.
Har du en særskilt fil til fed skrift, uploader du den også og laver en ekstra blok magen til, med samme font-family, den nye fils adresse og font-weight: bold.
4. Brug skrifttypen
Nu kender designet skrifttypen, men den bliver først brugt når du siger hvor. Skriv det i samme fil, under blokken fra trin 3. Her bruger vi den til overskrifterne:
h1, h2, h3 {
font-family: 'Playfair Display', Georgia, serif;
}
Georgia og serif er reserveskrifter. Dem bruger browseren, hvis skrifttypen af en eller anden grund ikke kan hentes. Vil du have skrifttypen på al tekst i shoppen, skriver du body i stedet for h1, h2, h3.
Klik på Gem ændringer under editoren. Klik ikke på den røde knap Nulstil fil til standard ved siden af, for den sætter filen tilbage, og så forsvinder din kode.
Når du har gemt, bruger shoppen skrifttypen med det samme. Kan du ikke se den, så genindlæs siden i browseren. Sådan ser overskrifterne ud i vores demo-shop bagefter:
Har du lagt skrifttypen ind som kode før?
Før filmanageren tog imod skrifttyper, lagde nogle selve skrifttypen ind som en lang tekstkode direkte i user-styles.less. Det virker, men det gør designets stylesheet meget større, og det skal hentes på hver side. I et tilfælde vi har set, blev filen ca. 100 KB mindre, da to skrifttyper blev flyttet ud i filer.
Har du gjort det, så upload skrifttypen som fil som beskrevet her, og erstat den lange kode i src med filens adresse.