Fonter på web

Frem til nå har webdesignere (og andre som lager nettsider) vært låst fast til de fonter som betegnes som standardfonter i operativsystemene. Det innebærer et noe snevert utvalg av antikva- og groteskfonter som Arial, Courier, Georgia, Times og Verdana og noen flere. Ikke noe gærn’t i det forsåvidt, det er greie fonter det, men det gir lite rom for variasjon, hvis man ikke er villig til å sette inn den ønskede fonten som et bilde. Imidlertid har det en ganske alvorlig sideeffekt. La oss si at du vil benytte en “ikke-standard” font i en heading på nettstedet ditt. Du bestemmer deg for å lage hele headeren som et bilde for å få det til. Hva skjer da? Søkemotorene benytter nettstedets overskriftsnivåer (<h1>-<h6>) som en viktig kilde for indeksering. Setter du hovedoverskriften som et bilde vil denne ikke bli lest av søkemotoren. I tillegg er det mer arbeid å lage og tilpasse bildet.
Det finnes imidlertid en løsning, som forsåvidt er gammel, men som ikke har hatt støtte i nettleserne. Ikke før nå. Noen nettlesere har begynt å støtte dette, men ikke alle. Jeg har testet i Firefox 3.5.7 og IE8, begge i Win7, og det fungerte perfekt. Løsningen er @font-face {}
Ved å benytte @font-face{} kan man få nettleseren til å laste inn og benytte TrueType- eller OpenType-fonter fra en definert nettadresse. Et helt enkelt eksempel kan du se på www.runesimensen.com/webdesign/font_testing/ Den korrekte syntaksen er:

@font-face {
font-family: “Still Time”;
src: url(http://www.runesimensen.com/webdesign/font_testing/fonts/still time.otf) format(“truetype”);
}
h1 {
font-family: “Still Time”, sans-serif;
font-size: 8em;
text-align: center;
}

Velger man å bruke en slik løsning for å gi sine nettsider særpreg, må man også sørge for at de som har nettlesere uten støtte for @font-face{}, også kan tyde innholdet. Det kan man gjøre ved å benytte standardalternativer som har noenlunde lik størrelse, og som gjør at siden ikke “brekker” til ugjenkjennelighet. I tillegg må man forsikre seg om at den fonten man velger å bruke, gir tillatelse til slik bruk gjennom lisensavtalen. For en mer utdypende artikkel om dette emnet kan du lese en artikkel av Håkon Wium Lie på A List Apart.
Det er likevel på sin plass å rette en advarende pekefinger mot uforbeholden bruk av @font-face{} for å bytte ut standardskriftene i brødteksten med nye, fancy og særpregede skrifter. Lesing på skjerm er i seg selv forholdsvis anstrengende, og spesielt for voksne mennesker, og mennesker med synsnedsettelser av noe slag. Man kan meget fort miste sine lesere om man gjør skjermlesing vanskeligere, så ha det i bakhodet når du velger font til brødteksten. Og sørg for å ha alternativer av god kvalitet.
Jeg har plassert min blogg i Ringsaker på norske bloggkart!