Indledning

@font-face er ikke en direkte ny ting i CSS3, for faktisk har @font-face også været en del af CSS2 og har være integreret i de fleste browsers, inklusiv internet explorer 5, lige siden. Dog er de forskellige browsers måder at håndtere vores custom fonts på lidt forskellige, eftersom de bruger forskellige formater. Internet Explorer bruger formatet Open Type (.eot) formatet, hvor de andre browsers valgte ikke at bruge det format, men i stedet for TrueType (.ttf) og OpenType (.otf).

Hvad kan man med custom fonts?

Som webdesigner kender vi alle sikkert de begrænsede muligheder når det kommer til skrifttyper. Vi er oftest begrænsede til de standard webskrifter vi alle er vant til, og nogle gange er der bare brug for noget nyt.

Med @font-face får vi netop muligheden for at få fuld kontrol over vores fonts, og det betyder at vi kan tage en hvilken som helst font, så længe formatet passer, og bruge den på vores sider, præcis ligesom de standard fonts vi allerede kender som for eksempel: Verdana, Tahoma, Arial og Times New Roman.

Guiden

Før vi begynder at skrive noget kode overhovedet, så skal vi selvfølgelig lige finde en font vi gerne vil bruge. Der er mange forskellige hjemmesider der tilbyder download af fonts helt gratis, og vi tager lige et hurtigt kig på en af dem.

En af de største og, efter min mening, bedste sider er helt klart Fontsquirrel.com. Derinde har de en side med en samling af små 'kits' der indeholder alle de formater vi skal bruge, direkte til download og klar til at smide på vores side. De har endda også en font-face generator som gør dig i stand til at uploade en font, og den vil så automatisk generere de formater af den skrifttype vi gerne vil have til vores hjemmeside.

Til denne guide har jeg valgt at bruge JINKY fonten.

1. Gør din skrifttype klar

Vi starter med at tage JINKY-webfont.ttf og JINKY-webfont.eot og ligger dem i roden af vores side, altså samme mappe som din index fil.
Det er senere vigtigt at vi husker på hvor disse fonts ligger, da vi skal kunne referere til dem i vores kode senere.

2. HTML delen.

Vi starter ud med vores standard HTML dokument, jeg gør brug af HTML5, men det er helt op til dig selv hvilken version du bruger.

Font-face Demo | Net-Freak.dk

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis, mi eu dignissim sollicitudin, turpis tellus cursus nulla, et sollicitudin sem tortor at tortor. Etiam varius urna vitae sem facilisis vel rhoncus velit hendrerit. Vestibulum in mi quam, sed accumsan orci. Nulla ultrices pretium sapien quis aliquam. Sed lacinia ipsum vel lectus iaculis condimentum. Nunc sed erat tellus, at aliquet nulla. Aliquam fringilla, purus eget interdum luctus, felis nisi euismod massa, in tempus purus turpis eget massa. Vivamus aliquam neque id tellus porta nec faucibus dui eleifend. Ut id est sit amet justo faucibus pulvinar sit amet vel magna. Nullam quis augue elit. Cras aliquam, augue congue ornare consectetur, arcu ante fermentum odio, ac lacinia turpis ante in ipsum. Quisque bibendum volutpat consequat. Nam pellentesque lacinia dictum. Aliquam eleifend malesuada massa, at porta nunc vulputate at. Nam eu justo dolor, nec elementum erat. 

Jeg har tilføjet lidt tekst, så vi kan se hvad vi arbejder med.

CSS delen

Jeg vil af gode grunde ikke gå ind og style det her for meget, eftersom det ikke er det denne guide handler om, så der kan forekomme nogle koder og styles som jeg ikke forklarer da jeg regner med i kender til det i forvejen.

@font-face {
	font-family: 'Jinky'; /* Her sætter vi navnet på skrifttypen, det kan være alt mellem himmel og jord. */
	/* Her sætter vi stien til vores font fil, som ligger i roden. */
	src: url('JINKY-webfont.eot'); 
	src: local('☺'), url('JINKY-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

Eftersom vi nu har styr på vores fonts, og de nu er 'installeret' korrekt, kan vi nu begynde at bruge dem på vores hjemmeside.
Vi bruger her paragraph tagget, og her vil vi gerne bruge vores nye skrifttype. Så i vores styles tilføjer vi følgende:

p{
	font-family:Jinky, Verdana, Tahoma, Arial;
	font-size:52px;
}

Og det er faktisk det. Nu skulle vores side gerne vise vores skrift med vores nye skrifttype.

Hvis siden ikke bliver vist med den korrekte skrifttype, så er det nok enten fordi at stien til vores skrifttype er forkert, så husk at tjekke om stierne passer. En anden ting er at bruger man en mindre kendt browser, skal man huske på at det altså ikke er alle browser der tilbyder denne feature endnu. Denne guide garanterer dog at det vil virke i Firefox, Internet Explorer og Google Chrome.

Du kan se en demo af siden her.

Jeg håber i lærte noget af denne guide, og at den vil være brugbar for jeres fremtidige designs.

Hele koden:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Font-face Demo | Net-Freak.dk</title>
<style>
/* Her henter vi vores fonts ind, og giver dem et navn vi senere skal bruge til at fortælle browseren hvilken tekst vi vil bruge. */
@font-face {
	font-family: 'Jinky'; /* Her sætter vi navnet på skrifttypen, det kan være alt mellem himmel og jord. */
	/* Her sætter vi stien til vores font fil, som ligger i roden. */
	src: url('JINKY-webfont.eot'); 
	src: local('?'), url('JINKY-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
p{
	font-family:Jinky, Verdana, Tahoma, Arial;
	font-size:52px;
}
</style>
</head>

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis, mi eu dignissim sollicitudin, turpis tellus cursus nulla, et sollicitudin sem tortor at tortor. Etiam varius urna vitae sem facilisis vel rhoncus velit hendrerit. Vestibulum in mi quam, sed accumsan orci. Nulla ultrices pretium sapien quis aliquam. Sed lacinia ipsum vel lectus iaculis condimentum. Nunc sed erat tellus, at aliquet nulla. Aliquam fringilla, purus eget interdum luctus, felis nisi euismod massa, in tempus purus turpis eget massa. Vivamus aliquam neque id tellus porta nec faucibus dui eleifend. Ut id est sit amet justo faucibus pulvinar sit amet vel magna. Nullam quis augue elit. Cras aliquam, augue congue ornare consectetur, arcu ante fermentum odio, ac lacinia turpis ante in ipsum. Quisque bibendum volutpat consequat. Nam pellentesque lacinia dictum. Aliquam eleifend malesuada massa, at porta nunc vulputate at. Nam eu justo dolor, nec elementum erat. </p>
</body>
</html>

Tilbage til oversigten | Du skal også være velkommen til at kommentere denne tutorial i Gæstebogen