Hvem glor – din bror Den ikke-så-personlige blog af Bjørn Klinggaard

CSS: Sådan bruger du @font-face

OPDATERET: Efter at Internet Explorer 9 har set dagens lys, er man tvungen til en syntaks ændring, hvis man vil have en bulletproof @font-face syntaks! Se mere under afsnittet "Hvordan bruger man font-face?".

Hvorfor bruge font-face?

I dag er vi sørgeligt nok stadig begrænset af få standard fonte, der er websikre. Man kan dog altid bruge ikke-websikre fonte og håbe på, at ens brugere har den valgte font på sin computer. Dette er selvfølgeligt meget usikkert, og man risikerer at ødelægge sit design samt struktur, hvorfor man i stedet embetter sine specielle fonte i form af grafik. Men takket være font-face er den tid nu ovre.

Ulemper ved grafik embetting:

• Ekstra arbejde - Hver gang du vil bruge din font, skal du lave det som grafik. En lille rettelse betyder, at designeren skal åbne sit billedbehandling program, lave rettelsen, gemme filen i det ønskede billedformat og uploade billedet.
• Tungere sider - I stedet for ren tekst har du grafik, som fylder mere og koster HTTP-requests. Stor skift størrelse = stor grafik.
• Manglende indeksering - Web crawlers kan ikke indeksere tekst i grafik. Dog kan (læs skal) man give sine billeder alt beskrivelser, hvilke bliver indekseret.

Ulemper ved font-face:

• Manglende standard - I skrivende stund findes der desværre ikke et font format, der understøttes af de meste brugte browsere, hvorfor det kræver, at man som minimum har fonten i formatet .eot, .ttf og .svg. Som det kan ses af nedenstående tabel tyder det dog på, at WOFF bliver fremtidens standard webfont format!

Font-face browser support

Hvordan bruger man font-face?

En mere dybdegående forklaring på font-face syntaks kan læses på Paul Irish blog indlæg; Bulletproof @font-face syntax. Nedenstående eksempel er mit forslående minimum setup for at understøtte alle overstående browsere samt iphone/ipad. Url'en til svg fonten har et id (#id) , som skal stemme overens med id'et i svg filen.

@font-face {
   font-family: 'Font Navn';
   src: url('font.eot');
   src: local('☺'),
      url('font.ttf') format('truetype'),
      url('font.svg#id') format('svg');
   font-weight: normal;
   font-style: normal;
}

Ny bulletproof syntaks efter at IE9 er udkommet:

@font-face {
   font-family: 'font Navn';
   src: url('font.eot'); /* IE9 Compat Modes */
   src: url('font.eot?#iefix') format('eot'), /* IE6-IE8 */
     url('font.woff') format('woff'), /* Modern Browsers */
     url('font.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('font.svg#id') format('svg'); /* Legacy iOS */
}

Fonten kan nu bruges som enhver anden standard font:

h1 { font: 100% 'Font Navn', Arial, sans-serif; }

De forskellige font formater kan genereres med font squirrel's font generator. Husk at sikre at du har tilladelse til at bruge fonten som @font-face.

Undgå "blink" effekten!

Først lidt baggrundsviden. IE downloader .eot filen så snart den støder på @font-face erklæringen, hvorimod Gecko, Webkit og Opera alle venter indtil de støder på markup, der har en CSS regel, hvori den specielle font indgår. Webkit har en feature/bug, der gør, at fonten først bliver vist, når den er indlæst, hvor Gecko og Opera viser en standard font imens, og så genrender når fonten er hentet.
Problemet med Webkit er, at hvis en bruger sidder bag en langsom forbindelse, vil brugeren ikke se teksten før den har hentet font filen, hvorfor brugeren kan se en (delvis) blank side i op til flere minutter afhængig af forbindelsen.
Problemet i Gecko og Opera er, at brugeren vil kunne se genrederingen (blinket), og at designet muligvis vil brække indtil fonten er hentet. Nedenstående billede illustrerer blinket og er et simplificeret eksempel på, at strukturen også kan ændre sig.

Font-face "blink" eksempel

For at opnå Webkit featuren i Gecko og Opera findes der et javascript bibliotek, WebFont Loader, der vha klasser på html tagget fortæller når fonten er hentet, hvorfor du selv kan gemme teksten via CSS indtil fonten er hentet, og dermed undgå blinket:

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
   WebFont.load({
      custom: {
         families: ['Font Navn'],
         urls : ['http://dinbror.dk/font-face-stylesheet.css']
      }
   });
</script>

CSS:

.wf-loading h1 {
   visibility:hidden;
}
.wf-active h1, .wf-inactive h1 {
   visibility: visible;
   font-family: 'Font Navn', Arial, sans-serif;
}

Ulempen er ligesom hos Webkit, at teksten ikke kan ses imens fonten hentes, og at man nu også skal hente og være afhængig af et javascript bibliotek. Dog kan man i stedet for at gemme teksten helt tilpasse den, så den i stedet passer størrelsesmæssigt med font-face fonten. Et lille tip er, at man ikke gemmer teksten i IE, da det ikke er nødvendigt (IE downloader .eot filen så snart den støder på @font-face erklæringen), og da IE ikke er kendt for sin hurtige rendering af javascript.

En anden og mindre ressourcekrævende løsning, hvor man dog kun minimere blinket, og som pt kun er understøttet i Gecko, er CSS attributten font-size-adjust. Den giver dig mulighed for at normalisere x-højden på tværs af en font, hvorfor forskellen reduceres og designet holdes konstant!

Hjælp, font-face virker ikke i Firefox!?

Selvom font-face er understøttet i Firefox, kan Firefox godt drille. Firefox tillader ikke cross-domain fonte som standard, hvilket betyder, at fonten skal ligge på samme domæne, endda samme sub-domæne medmindre man kan tilføje en “Access-Control-Allow-Origin” header til fonten. Dette er ikke altid en mulighed, men fortvivl ikke. Der findes selvfølgelig også en løsning på det. Det er måske ikke den pæneste løsning og heller ikke helt uden bivirkninger.  Løsningen er at embette fonten i sit stylesheet som Base64. Hvis du bruger font squirrel's font generator kan du vælge "Expert", og herefter sætte flueben i Base64 Encode under CSS options som nedenstående billede illustrerer.

Vælg Base64 Encode

Resultatet er, at ttf fonten nu i stedet bliver embettet i stylesheetet:

@font-face {
   font-family: 'Font Navn';
   src: url('font.eot');
   src: local('☺'),
      url("data:font/opentype;base64,[base64-encoded font her]");
      url('font.svg#id') format('svg');
   font-weight: normal;
   font-style: normal;
}

Bivirkningerne er, at stylesheetet bliver tungere, og at base64 encoding fylder mere selve ttf fonten.

Åhh nej @font-face virker ikke i IE9

Internet Explorer 9 kommer med mange gode opdateringer og standardiseringer, hvilket har medført ændringer i måden, hvad IE tillader. Det har bl.a. betydet, at IE9 som FF ikke tillader cross-domain font-linkning. Løsningen er som med FF, at tilføje en “Access-Control-Allow-Origin” header til fonten.

Problemer med WOFF
IE9 understøtter modsat sine forgængere .woff fonte. Hvis du benytter en IIS skal huske at tilføje .woff's MIME type til IIS'en for ikke at få en 404 not found:

<MimeType extention=".woff" type="application/x-font-woff" />

Hvis dette ikke er en mulighed, kan du også tvinge IE9 til at bruge .eot fonten i stedet ved at ændre formatet fra eot til embedded-opentype. IE9 supporterer formatet embedded-opentype modsat formatet eot, hvorfor fonten indlæses:

src: url('webfont.eot?#iefix') format('embedded-opentype')

EOT er som default kendt af IIS'en.

@font-face virker stadig ikke i IE9
Jeg er ikke selv stødt på problemet, men har læst at I nogle sjældne tilfælde vil @font-face fejle i IE pga. for mange karakter. Dette kan løses ved at tilføje et hash tegn efter spørgsmålstegnet:

src: url('font.eot?#iefix') format('eot')