Web-typografi og gamle browsere

Af

Typografi er et element, der virkelig kan få et webdesign til at skille sig ud fra mængden. Men det kan også øge tyngden af websitet betragteligt. For at sætte en anden skrifttype på et website end de få, der som udgangspunkt er til rådighed, må man indlejre en font fil i websitet. Faktisk har det hidtil været nødvendigt at indlejre 4 filer for at få skrifttypen til at fungere på tværs af browsere. Syntaksen ser således ud i CSS:

@font-face {
  font-family: 'Source Sans Pro';
  src: url('source-sans-pro.eot'); /* IE 5-8 */ 
  src: local('?'),             /* snyd IE så den tvinges til at bruge .eot */
        url('source-sans-pro.woff') format('woff'),    /* FF 3.6+, Chrome 5+, IE9+ */
        url('source-sans-pro.ttf') format('truetype'), /* Opera, Safari */
        url('source-sans-pro.svg#font') format('svg'); /* iOS4 */
}

Problemet er, at filerne fylder, især .svg filen, og det gør websitet væsentlig tungere Det gør det faktisk ikke, se Joens kommentar. Der bliver mere at downloade for brugeren. Det kan være et problem, hvis man har en 3G forbindelse og et dyrt dataabonnement.

Men der er lys forude. Forhåbentlig kan man snart droppe 3 af filerne og nøjes med .woff filen, for der bliver stadig færre, der bruger de gamle browsere. Ifl. caniuse.com er der efterhånden ret bred understøttelse af .woff.

Vil det mon ikke efterhånden være rimeligt at droppe supporten af de gamle browsere, nøjes med en .woff og sætte en fornuftig default fallback font? Det er en praksis, jeg vil til at prøve af.

2 kommentarer til “Web-typografi og gamle browsere”

  1. Lad der ikke herske tvivl om at vejen frem er at få folk på moderne browsere der støtter gode teknologier såsom WOFF.

    Når det er sagt, så har jeg personligt ikke noget behov for at droppe de andre formater endnu (måske med undtagelse af SVG), det er der en række grunde til:

    – Browseren downloader kun én font, den som bliver brugt, dvs. hvis din browser understøtter WOFF, så er det den som bliver downloadet
    – Fil størrelser er ekstremt komprimerede da der er tale om vektor grafik. F.eks. “Source Sans Regular”, en hel font, fylder kun 27K, det er mindre end de fleste billeder. “Genericons”, en ikon font jeg arbejder på, fylder 9K, det er mindre end en thumbnail.
    – De fleste kilder til webfonte, f.eks. Google Webfonts og FontSquirrel, gør det så nemt at få de gamle fonte med, at det næsten er mere besværligt at fjerne dem.

    Svar

  2. Okay, så min antagelse, at browseren downloader hele skidtet, er forkert? Det er rart at vide. Har lige tjekket efter i Chrome og den henter godt nok kun én font.

    Tak. Så kan jeg sove lidt mere trygt om natten. 😉

    Svar

Skriv en kommentar