Font-family i CSS forklart

Du har bygget nettsiden, lagt til overskrifter og avsnitt, men teksten ser ut som den gjør i ethvert standard HTML-dokument. Skrifttypen er Times New Roman, og alt føles litt utdatert. Med font-family i CSS kan du endre skrifttypen på hele nettsiden med en eneste linje. Du velger fonten du vil bruke, legger den til i CSS-filen, og plutselig får siden et helt nytt preg. Men det holder ikke å bare skrive inn ett fontnavn. Du trenger en font stack som sikrer at teksten ser bra ut på alle enheter.

Slik fungerer font-family i CSS

Egenskapen font-family lar deg definere hvilken skrifttype nettleseren skal bruke for et element. Det som gjør denne egenskapen spesiell er at du kan liste opp flere fonter, adskilt med komma. Nettleseren prøver den første fonten i listen. Hvis brukeren ikke har den installert, hopper nettleseren videre til neste font. Slik fortsetter den nedover listen til den finner en font som er tilgjengelig. Det er derfor egenskapen heter font-family: du definerer en hel familie av alternativer.

Font stack: derfor trenger du flere fonter

En vanlig font stack for en moderne nettside er Arial, Helvetica, sans-serif. Arial finnes på nesten alle Windows-maskiner, Helvetica finnes på Mac, og sans-serif er en generisk fallback som sikrer at nettleseren alltid finner en skrifttype uten seriffer. Uten denne fallbacken risikerer du at nettleseren velger en font du ikke hadde tenkt på.

De generiske fontfamiliene du bør kjenne til er serif, sans-serif, monospace, cursive og fantasy. Den siste i font stacken bør alltid være en av disse. Serif-fonter har små streker på enden av bokstavene og gir et klassisk uttrykk. Sans-serif mangler disse strekene og oppleves som renere og mer moderne.

Endre skrifttype på hele nettsiden

Et smart grep er å sette font-family på body-elementet. Fordi skrifttype arves i CSS, vil alle elementer inni body automatisk få samme font. Du trenger ikke style hvert avsnitt og hver overskrift separat. En eneste regel på body endrer skrifttypen til hele nettsiden på et blunk. Vil du at ett spesifikt element skal ha en annen font, overstyrer du bare det elementet med en egen font-family-regel.

Google Fonts: tusenvis av gratis fonter

De innebygde fontene på datamaskinen er begrensede. Hvis du vil ha en mer unik skrifttype, kan du bruke en tjeneste som Google Fonts. Der finner du tusenvis av gratis fonter du kan laste inn på nettsiden din. Du velger fonten du vil ha, kopierer link-elementene Google gir deg, og limer dem inn i head-seksjonen i HTML-filen din. Deretter legger du til fontnavnet først i font stacken i CSS-filen.

Rekkefølgen du laster inn ressurser i HTML-filen har noe å si. Legg link-elementene for Google Fonts over linken til CSS-filen. Da hentes fonten først, og når CSS-filen lastes inn og sier "bruk denne fonten", er den allerede tilgjengelig. Gjør du det omvendt, kan teksten blinke mellom to ulike skrifttyper i et kort øyeblikk mens fonten lastes.

Velg riktige fontvarianter

Når du henter en font fra Google Fonts, velger du hvilke varianter du trenger: regular, bold, italic og eventuelt medium. Hver variant du legger til øker filstørrelsen som må lastes ned. Velg bare de variantene du faktisk bruker. Har du en brødtekst som kun bruker regular og bold, trenger du ikke laste inn light, semi-bold og extra-bold i tillegg. Færre varianter betyr raskere lastetid for besøkende.

Font-family og selektorer

Når du kombinerer font-family med CSS-selektorer, kan du gi ulike deler av nettsiden forskjellige skrifttyper. En vanlig teknikk er å bruke en sans-serif-font for brødtekst og en serif-font for overskrifter, eller omvendt. Du kan også bruke en monospace-font for kodeeksempler. Med CSS-variabler kan du lagre fontnavnene ett sted og gjenbruke dem gjennom hele stilarket.