help.sitevision.se hänvisar alltid till senaste versionen av Sitevision

Lägga till egna typsnitt

Om du vill lägga till ett eget typsnitt så gör du detta som ett CSS-tillägg på den första delmallen. Då medföljer det till alla sidor som bygger på den mallen.

Nedan visas två exempel på hur det ser ut om du vill lägga till eget typsnitt på din webbplats.

Typsnitt från exemelvis Google fonts

Exempel när du gör en extern länk till källan:

1. Gå till första delmallen. Välj Egenskaper -> CSS-tillägg.

2. Fyll i namn och ange Länktyp: Extern och fyll i länk till källan.

Externa typsnitt
  • Namn - arbetsnamn i Sitevision. Bara ett namn för CSS-tillägget i listan.
  • Källa - här anger du adressen till typsnittet, oftast en extern länk. Tänk på att inte klistra in http://adress.se för då gäller enbart typsnittet för http, inte https. Om du istället skriver // så gäller det för båda varianterna.

Det är det namn som står efter family= som du använder dig av när du ska använda typsnittet. I detta fall Roboto.

Vi rekommenderar inte att ni länkar externt till Google då det görs ett anrop med besökarens ip-nummer till Google. Ladda istället hem typsnitten och ladda upp dem i ditt filarkiv.

Typsnitt som finns i ditt filarkiv

Om du istället köpt ett typsnitt så får du en mängd filer (i exempelvis formaten eot, ttf,woff, woff2) som du laddar upp i filarkivet. Gör så här:

1. Skapa en mapp som heter exempelvis Fonts (eller namnet på typsnittet) i filarkivet.

2. Ladda upp de filer som du ska använda av typsnittet i mappen.

Typsnitt

3. Markera en av de uppladdade filerna i filarkivet och kopiera adressen:

/download/18.6f9b6b2617714873b4578533/1612959854337/museoslab-100-webfont.eot

4. Upprepa för alla fonter. 

5. Klistra in i textredigerare.

@font-face {
font-family: Museoslab;
src: url(ADRESS) format('woff2'),
url(ADRESS) format('woff'),
url(ADRESS) format('eot'),
url(ADRESS) format('ttf')
;

font-weight: 100;
font-style: normal;
font-display: swap;
}

Upprepa hela stycket om du har flera olika font-weights. Spara som .css

CSS typsnitt

6. Ladda upp css-filen i filarkivet.

7. Gå till första delmallen. Välj Egenskaper -> CSS-tillägg.

8. Fyll i namn och ange Länktyp: Fil och peka ut css-filen i filarkivet.

Länktyp: Fil

Denna sida publicerades:

Hjälpte informationen dig?