Indsæt egen skrifttype (custom font)

I denne artikel:


    Introduktion

    Shopsystemet leveres med et udvalg af skrifttyper (fonte), som kan vælges via shoppens design manager. Hvis du ønsker at tilføje en skrifttype, som ikke er i listen af inkluderede fonte kan du indsætte din egen skrifttype ved, at redigere shoppens designfiler.

    Du kan enten linke til et font-repository (et sted på nettet, hvor fonten er hosted) eller uploade font-filen til shoppens filhåndtering.

     

    Bemærk: Ændringer bør altid foretages på en kopi af det aktive design, så du ikke redigerer det aktive design på shoppen. Redigering af shoppens designfiler kræver kendskab til kodning og bør foretages af en kyndig udvikler. Forkert håndtering af shoppens designfiler kan ødelægge dit design og resultere i nedetid på shoppen.

     

    Sådan gør du

    Den benyttede font indlæses fra filen settings.json som findes ved at redigere shoppens designfiler (dette bør altid foretages på en kopi af det aktive design) under source > settings > settings.json:

    Benyt evt. søgefunktionen som i eksemplet herover. Filen settings.json bestemmer, hvilke muligheder der skal være tilgængelige i designmanageren. Du kan læse mere om filen her.

    I eksemplet ovenfor har vi tilføjet fonten som to nye sektioner (med og uden seriffer) i sektionen FONT_FAMILY_BASE, hvilket betyder, at vi efterfølgende får to nye valgmuligheder i designmanageren for, at vælge vores font for indholdsteksten på designet:

    Gå til designmanageren og vælg Tilpas > Grafik & skrifttyper for at vælge den nye font.

     

    Værd at vide

    • Bemærk: Ændringer bør altid foretages på en kopi af det aktive design, så du ikke redigerer det aktive design på shoppen.
    • Sektionerne FONT_FAMILY_BASE og FONT_FAMILY_HEADLINE i settingsfilen bestemmer skrifttypen for hhv. indhold og overskrifter.
    • I eksemplet med Google fonts kan vi ved at besøge https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap se hvilke data, der returneres som CSS (udsnit):

     

    Relaterede artikler