47 besökare, 3 medlemmar och 1 Student är online nu
Loopia

Webdesign och HTML

WDS medlem (WDS member)

Den här guiden visar hur du kommer igång med Google Fonts och laddar fonterna direkt i ditt dokument eller CSS-fil.

Teckensnitt, typsnitt och font är egentligen olika benämningar på samma sak; en uppsättning bokstäver, siffror och tecken med ett karakteristiskt utseende och med ett och samma namn. Läs mer om de olika benämningarna på https://sv.wikipedia.org/wiki/Typsnitt Öppnas i nytt fönster (Open in new window)

Exempel på fonter från Google Fonts

Här är några live-exempel på inbäddade webbfonter som hämtas direkt från Google's servrar. Snabbt och enkelt att hämta och använda!

Slabo - font från Google Fonts
Roboto Slab - font från Google Fonts
Droid Serif - font från Google Fonts
Merriweather - font från Google Fonts
Open Sans - font från Google Fonts
Roboto - font från Google Fonts
Lobster - font från Google Fonts
Comfortaa - font från Google Fonts
Fredericka the Great - Google Fonts
Playball - font från Google Fonts
Limelight - font från Google Fonts
Freckle Face - font från Google Fonts
Special Elite - Google Fonts

Systemfonter

Exempel på teckensnitt som använts länge på webbsidor är Times New Roman, Arial, Georgia och Verdana. De kallas för systemfonter och är sk "webbsäkra" teckensnitt eftersom de redan finns installerade i de flesta enheter och följer med de programvaror som finns installerade.

En metod att säkerställa att innehållet i din webbsida inte avviker helt från originalet om inte det valda teckensnittet finns är att lägga till ett eller flera ersättningsteckensnitt. Om det valda teckensnittet inte finns visas istället den valda erättningsfonten.

Exemplet nedan har Verdana som valt teckensnitt. Om inte Verdana finns i den enhet som visar webbsidan så ersätts den med Arial. Om inte Arial finns så ersätts den av Helvetica osv:

font-family: Verdana, Arial, Helvetica, sans-serif;

 

Web fonts

Webbfonter är de teckensnitt du köper eller hämtar gratis från olika tjänster som tillhandahåller dessa. Teckensnitten levereras i en fil som du placerar på din webbserver och anger sökväg till.

Du använder @font-face i din CSS-kod för att hämta teckensnittet:

@font-face {
font-family: namn_på_font;
src: url(sökväg_till_fontfil);
}

Exempel på tjänster som erbjuder webbfonter är: Typekit, Fonts.com och WebType

 

Inbäddade webbfonter

Inbäddade webbfonter (embedded web fonts) är teckensnitt som inte behöver hämtas som en fil och placeras på din webbserver. De hämtas istället direkt från en tjänst (Web font embedding services) som tillhandahåller fontfilen på sin egen webbserver.

 

Google Fonts

Den här guiden visar hur du kommer igång med Google Fonts och laddar fonterna direkt i ditt dokument eller CSS-fil.

 

Klicka på ikonen nedan för att läsa hela guiden med kod och beskrivningar!

WDS medlem (WDS member)

 

OBS! Om du vill du läsa hela guiden måste du vara WDS medlem!

Du kan beställa tjänsten WDS medlem här »

Är du redan WDS medlem?
Klicka på ikonen "WDS medlem" högst upp för att läsa hela guiden!