Introduktion til font-face

Font-face opsætning
@font-face {
font-family: 'Min_font';
    src: url('../fonts/Min_font/Min_font.eot') format('embedded-opentype');
    src: url('../fonts/Min_font/Min_font.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Min_font/Min_font.woff') format('woff'),
         url('../fonts/Min_font/Min_font.ttf') format('truetype'),
         url('../fonts/Min_font/Min_font.svg#Min_font') format('svg');
}
Font-face opsætning med kommentarer
@font-face {
font-family: 'Min_font';
    src: url('../fonts/Min_font/Min_font.eot') format('embedded-opentype'); /* IE9 og senere versioner */
    src: url('../fonts/Min_font/Min_font.eot?#iefix') format('embedded-opentype'), /* IE6 til IE8  */
         url('../fonts/Min_font/Min_font.woff') format('woff'),  /* Nyere versioner af alle browsere undtagen IE8 og tidligere */
         url('../fonts/Min_font/Min_font.ttf') format('truetype'), /* Safari og iOS, Chrome, Android, Firefox og Opera undtagen Opera Mini  */
         url('../fonts/Min_font/Min_font.svg#Min_font') format('svg'); /*IE og iOS tidligere end version 5*/
}

Font-face giver flere muligheder

Normalt kan en browser kun vise hjemmesidens tekst med en skrifttype (font) som allerede ligger placeret på brugerens computer - læs mere om browserens brug af fonte i artiklen "Typografi og websafe fonte".

Dette reducerer antallet af brugbare fonte væsentligt, så ønsker jeg at bruge en af de mange flotte fonte der kan findes på internettet, er det nødvendigt at bruge CSS' 'font-face' - mulighederne udvides med denne kommando, således at en hvilken som helst font kan bruges på hjemmesiden:

@font-face {
font-family: 'Min_font';
		 url('Min_font.ttf');
}

p  {
	font-family: 'Min_font';
}

Browsere og endelser

Læg mærke til at 'Min_font' i kommandoen 'font-face' har endelsen '.ttf' tilknyttet. For at fonten skal kunne læses af alle typer browsere uanset version og fabrikat, er det nødvendigt at benytte forskellige endelser.

Dette har noget at gøre med hvordan de datamængder der udgør fontene er pakket på – kan man forestille sig, at bogstaverne fra en font kan pakkes sammen i en flyttekasse, er det måske lettere at forstå: mens nogle browsere kun kan acceptere én måde at pakke bogstaverne på, kræver andre browsere en helt anden slags pakning for at kunne hente indholdet, når flyttekassen skal åbnes.

Her en liste over en font med navn og tilhørende endelser samt hvilke af de mest populære browsere der benytter dem:

Format Endelse Browser
woff 'Min_font.woff' Nyere versioner af alle browsere
truetype 'Min_font.ttf' Safari og iOS, Chrome og Android, Firefox og Opera (undtagen Opera Mini)
opentype 'Min_font.eot' Internet Explorer 9 og senere versioner
opentype 'Min_font.eot?#iefix' Internet Explorer version 6 til 8
svg 'Min_font.svg' Internet Explorer og iOS tidligere end version 5

Udover ovennævnte kan der findes andre endelser. For eksempel kan man støde på fonte med endelsen '.otf' - denne type er et samarbejde mellem Adobe og Microsoft, og kan erstattes af '.ttf'

Se en opdateret oversigt over filendelser til her på caniuse.

Opsætning af Font-face

Hvor på serveren jeg placerer mine fonte er valgfrit, men det er vigtigt, at stierne der i CSS henviser til placeringerne er korrekte. Stierne i font-face der leder til de forskellige formater kan nemlig være drilske.>/

Der er flere ting der kan gå galt, når jeg sidder og tester om min nye font virker – for eksempel ligger der gammel hukommelse i browserens cache eller hvis jeg bruger AJAX til at loade eksterne sider på 'index.html' - man kan blive rimelig ond af at sidde og bruge tid på at teste stier i font-face!

Det er derfor en god ide at oprette en mappe som indeholder både fonte og stylingen af dem – også selvom flere stylesheets er lig med flere http-requests og dermed længere load-time – det kan være det værd i forhold til et bedre overblik.

I eksemplet herunder ligger både stylingen til al tekst på hjemmesiden samt fonten 'Min_font' placeret på serveren i sin egen mappe 'fonts' - bemærk at fonten på billedet burde hedde "Min_font" og ikke "name" :

Placering af font-face på serveren

Fonten "name" (burde hedde "Min_font") har denne placering på serveren

I CSS vil stierne til placeringen komme til at se således ud med brug af relative links:

@font-face {
font-family: 'Min_font';
    src: url('../fonts/Min_font/Min_font.eot') format('embedded-opentype');
    src: url('../fonts/Min_font/Min_font.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Min_font/Min_font.woff') format('woff'),
         url('../fonts/Min_font/Min_font.ttf') format('truetype'),
         url('../fonts/Min_font/Min_font.svg#Min_font') format('svg');
}
Bemærk:
  • stierne til de endelser der benyttes af versionerne af Internet Explorer SKAL ligge øverst i hierakiet i CSS'en, ellers kan Internet Explorer (IE) ikke bruge 'font-face'
  • på grund af fejl i Internet Explorer 9 er det nødvendigt at definere stien til '.eot' særskilt ved hjælp af 'src' (source = placering) – alle øvrige endelser kan omfattes af samme 'src'
  • jeg skal som minimum bruge endelserne '.ttf' og '.eot' for at dække de mest populære browsere 2014 – øvrige endelser dækker ældre versioner og mindre brugte
  • på grund af loadtime på mobile enheder anbefales det kun at bruge en enkelt font i font-face for hele hjemmesiden
  • skal jeg bruge "bold" (fed skrift) skal denne mulighed være inkluderet i font'en - hvis ikke, vil der være stor forskel i måden den enkelte browser fremviser bogstaver med fed skrift

Crossbrowser support

Med ovenstående CSS og en font med alle de anbefalede endelser placeret på serveren, bør alle nyere versioner af browsertyper og -versioner være dækket ind (crossbrowser support).

Men selvfølgelig er der undtagelser. Selvom CSS-selectoren 'font-face' blev introduceret allerede i den 1. version af CSS helt tilbage til slutningen af 1990'erne, er det nemlig først i forbindelse med udviklingen af CSS3 – den i skrivende stund nyeste version af CSS – at W3C http://www.w3.org/ har besluttet at anbefale 'font-face' som en feature browserne bør understøtte.

Dette betyder, at 'font-face' ved overgangen til 2014 understøttes af alle de store populære browsere, men at de ældre browser-versioner – som ikke understøtter CSS3 – ikke kan bruge 'font-face'. Det er derfor stadig nødvendigt at deklarere et 'fallback' i CSS som beskrevet i afsnittet ”Fallback font”.

Mobile support

I forhold til browsere på mobile enheder som smartphones og tablets kan der være problemer med brugen af 'font-face'. Selvom browserne på mobile enheder er af samme fabrikat og version som browserne jeg downloader til brug på laptoppen og den stationære computer, er det ikke nødvendigvis ensbetydende med, at de opfører sig på samme måde.

Et godt eksempel er IE9 – den browserversion af IE9 der ligger på de stationære enheder understøtter 'font-face', mens versionen til brug på de mobile enheder ikke gør. Så også af den grund er et 'fallback' til det primære valg af font vigtig.

Her en – ikke opdateret – liste over mobile browsere der henholdsvis supporterer og ikke supporterer 'font-face'.

Bold og italic

Regner jeg med at bruge 'bold' (fremhævet / fed skrift) eller 'italic' (kursiv / skrå skrift) er det vigtigt, at den downloadede font har disse varianter inkluderet - især hvis bogstaver med en af disse varianter bruges i en menu.

Hvis varianterne ikke er inkluderet i selve fonten, vil den enkelte browser nemlig selv beslutte, hvor tyk skrift en 'bold' skal være - og forskellen kan være temmelig stor.

I eksemplet herunder er der i den horizontale nav / menu brugt en font som ikke har varianten 'bold' inkluderet i sig - alligevel er bogstaverne stylet med 'bold' i CSS, hvilket bevirker, at den samlede bredde af nav'en varierer fra browser til browser:

Bold i font-face giver browserforskelle

Forskellen på bredden af nav kan ses på forskellig placering af nav'ens sidste (røde) emne i højre side

Gratis fonte og værktøjer

Mangler jeg en ny og spændende font til min hjemmeside, vil jeg ved en søgning på internettet opdage, at udvalget er virkelig stort. Der findes flere websites, hvis eneste formål er at stille fonte til rådighed – nogle er gratis, mens andre kan købes. Mange af de gratis fonte er udviklet af ganske almindelige mennesker, som har lagt et stort stykke arbejde i det. Så en venlig kommentar eller en reference til udvikleren fra min hjemmeside er selvfølgelig god stil.

Der er stor forskel på hvor veludviklede fontene er – og som dansker bør jeg være opmærksom på, om fontene er udstyret med de danske vokaler æ, ø og å. Men endnu vigtigere er det, om fonten jeg vælger at downloade, har de endelser der kræves for at kunne benyttes af alle typer browsere.

Fontsquirrel - værktøj til manglende endelser

Heldigvis er der hjælp at hente, hvis fonten jeg ønsker at bruge på min hjemmeside ikke har de nødvendige endelser. Hjælpsomme udviklere har lavet generatorer, der online kan fabrikere de manglende endelser.

Et godt eksempel er Fontsquirrel, som er simpelt at bruge og leverer en bid kode som jeg kan indsætte direkte i CSS.

Se artiklen "Konvertering af filendelser med Fontsquirrel" som beskriver hvordan jeg laver fil-endelser i Fontsquirrel, så font-face kan bruges crossbrowser.