SiteVision-bloggen

Publicerat: 2017-05-11

Så enkelt lägger du till Google Fonts i SiteVision - Uppdaterad Version

I det här blogginlägget lär du dig hur du enkelt lägger till och börjar använda Google Fonts i SiteVision - utan särskilda kunskaper om CSS och webbprogrammering.

Google Fonts är en tjänst med en mängd typsnitt i olika varianter som är klara för att använda på din webbplats. Alla typsnitt på Google Fonts är open source och fria att använda, i princip hur som helst, även i kommersiella syften. Så låt oss sätta igång och lägga till Google Fonts på ett par minuter i SiteVision.

1. Leta upp (och välj) typsnittet som du vill använda

Det första du behöver göra är att hitta det typsnitt du vill använda till din webbplats. Det kan ta sin lilla tid, men ska du ersätta till exempel brödtexten på din webbplats är det värt att lägga lite extra tid på urvalet. Du behöver också tänka på att typsnittet innehåller de specialtecken du kan tänkas behöva och Å, Ä och Ö givetvis (vilket de mest populära gör). För att göra det enklare att välja font kan du ställa dig i ett av textfälten och skriva in din egen text för att se hur det kommer se ut med typsnittet. Genom att klicka på "Apply to all fonts" får du se hur din inskrivna text ser ut i alla typsnitt som syns på sidan.

Ställ markören i textfältet och ändra texten för att se hur din egen text ser ut med typsnittet.

Ställ markören i textfältet och ändra texten för att se hur din egen text ser ut med typsnittet.

2. Skapa adressen till CSS-tillägget med ditt typsnitt

Har du hittat ett typsnitt som du vill använda? Bra jobbat! Lägg till typsnittet du hittat genom att klicka på det röda plus-tecknet i typsnittets högra hörn (se nedan).

Lägg till fonten genom att klicka på plus-tecknet uppe i högra hörnet

OBS! I det nya redigeringsläget går det endast att välja ett typsnitt i taget. Vill du ha fler typsnitt från Google Fonts på din webbplats får du göra om dessa steg för varje enskilt typsnitt. Detta gäller även om du vill ha typsnittet i fler olika stilar (styles).

När du lägger till ett typsnitt hamnar det i listan längst ner till höger på sidan. Om du klickar upp den rutan har du två flikar, Embed och Customize.

Under fliken Customize väljer du den stil (style) av typsnittet du vill ha.

Under fliken Embed hittar du sedan den genererade länken du behöver för att lägga till typsnittet på din webbplats. I mitt fall ser den ut så här:

https://fonts.googleapis.com/css?family=Roboto

Namnet som står efter font-family under "Specify in CSS" är det namn du använder när du i steg 4 lite längre ner ska skapa en ny formatmall med ditt typsnitt eller ändra en befintlig. I mitt fall är det Roboto jag ska använda.

3. Lägg till typsnittet på din webbplats i SiteVision

I regel brukar vi rekommendera att man lägger till ett typsnitt på den första delmallen. Då medföljer det till alla sidor som bygger på den mallen.

Gå in på mallens egenskaper och välj CSS-tillägg. Klicka på "Lägg till CSS..."

Som namn rekommenderar vi dig att välja typsnittets namn, men du får såklart döpa CSS-tillägget till vad du vill. Under källa lägger du till en "Extern adress" och klistrar in den länk som genererades från Google Fonts. I mitt fall: https://fonts.googleapis.com/css?family=Roboto

OBS! Använder du https på din webbplats så måste länken börja med https, eller ännu enklare, skriv //fonts.google... så blir det rätt protokoll automatiskt.

OBS! Glöm inte att publicera mallen efter du lagt till ett CSS-tillägg.

4. Skapa nya formatmallar med ditt typsnitt, eller ändra befintliga

Det enda du behöver göra för att använda ditt nya typsnitt är att skapa en ny formatmall, eller gå in och ändra någon av dina befintliga. I namnet för vilket typsnitt man ska använda (under Utseende) så finns det en lista på de webbsäkra (men stundtals tråkiga) typsnitten. Denna lista kan du editera själv. I raden skriver du bara in namnet på det typsnittet som du har importerat, i mitt fall Roboto. Dubbelkolla att du stavat rätt. Se Steg 2 igen om du glömt bort vart du hittar namnet du ska använda.

Som du kanske kommer märka kommer inte Förhandsgranskningen att visa ditt importerade typsnitt korrekt. Men oroa dig inte! Det kommer se rätt ut när du väl använder formatmallen på din webbplats.

5. Börja använda ditt nya typsnitt!

Har du ändrat en befintlig formatmall har ändringarna nu slagit igenom och du kan njuta av en, förhoppningsvis, ännu snyggare webbplats. Annars går du in på sidorna du vill använda ditt typsnitt på, och producerar bra innehåll med dina nya formatmallar som du precis skapat.

Lägg till ytterligare effekter med CSS3

Under fliken avancerat där du kan skriva egen CSS kan du också förändra formatmallarna med den senaste standarden, CSS3. Det innebär att du kan lägga till skugga på texter, övertoningar med mera. Vill du testa möjligheterna med CSS3 kan du göra det med den här tjänsten.

Tack vare Google Fonts kan jag skriva "Tack och hej" för nu med det här typsnittet som heter Indie Flower! Hörs snart igen!

Inlägget är skrivet av Jonna Hedlund. Fler blogginlägg och nyheter från oss:

Vill du ha nyheter, blogginlägg och erbjudanden bekvämt levererade till din e-postadress? Prenumerera på vårt nyhetsbrev inSite! Fyll i din e‑postadress nedan:

Följ SiteVision: