Fonte

Fonte

Der er rig mulighed for at anvende specielle fonte på websider i dag. CSS @font-face er under støtte i ca. 92% iflg. caniuse.com 2013. Der er dog en detalje og det handler om hvilke fontformat der understøttes på forskellige enheder. Vi skal for at kommer op på 92% linke til 4 forskellige fontformater: eot(internet explorer), woff, ttf(chrome, firefox, safari) og svg(safari/ipad). På www.fontsquirrel.com kan man hente færdige pakke af fonte i alle formater. Man placerer sine fonte i en mappe og linker fra sit stylesheet:

@font-face {
    font-family: 'TerminalDosisRegular';
    src: url('TerminalDosis-Regular-webfont.eot');
    src: url('TerminalDosis-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('TerminalDosis-Regular-webfont.woff') format('woff'),
         url('TerminalDosis-Regular-webfont.ttf') format('truetype'),
         url('TerminalDosis-Regular-webfont.svg#TerminalDosisRegular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}

Hvis man ønsker de “rigtige” klassiske fonte så er typekit.com fra adobe måske stedet man kan finde det man søger eller fonts.com fra Linotype disse steder kan man finde originale fonte som vil være et krav fra større virksomheder. De koster dog penge at anvende disse fonte!

Google webfonts

Google.com har opkøbt omkring 600 fonte af svingende kvalitet som man gratis og let kan anvende. Her er princippet at man linker til google i sin head section og kan derefter bruge fontene i sit stylesheet:

	<link href="http://fonts.googleapis.com/css?family=Lily+Script+One" rel="stylesheet" type="text/css" />
h1 {font-family: 'Lily Script One', cursive;}

Men pas på med for mange fonte og brug de rigtige samme!

Når du skal vælge fonte kan det fx være en god idé at vælge forskellig font til overskrift og brødteksten. På sitet Typeconnection kan du finde mere om skriftyper og lære at sætte skriftyper sammen som passer til hinanden.

Icomoon er det muligt at hente infografik og symboler som små font-sæt – det er en smart måde at få grafik på sit site – og det fylder kun ganske lidt symboler kan sættes ind som html eller CSS:
Skærmbillede 2014-12-28 kl. 12.26.04
Det er blevet meget udbredt i moderne webdesign at bruge grafik som fonte.

Leave a Reply