La regla @font-face

Autor:
Arnau Siches. esbudellant estàndards.
Data de publicació:
2010-01-11

Aquest document també està disponible en PDF.

Introducció

La regla @font-face permet enllaçar tipografies allotjades en un servidor; això permet que el navegador trobi la tipografia especificada i aplicar-la en un web.

El problema actual és que no tots els navegadors que suporten la regla @font-face suporten el mateix format de tipografia. Cal enllaçar diferents tipus de fitxer per cobrir el ventall de necessitats dels navegadors.

Sumari

1. Sintaxi

La forma genèrica de la regla @font-face és: 

@font-face {
  font-family: <family-name>;
  src: [ <uri> [format(<string> [, <string>]*)] | <font-face-name> ] [, <uri> 
  [format(<string> [, <string>]*)] | <font-face-name> ]*;
  unicode-range: <urange> [, <urange>]*;
}

El valor de font-family és el nom de la tipografia o de la familia.

El valor de src és la ubicació de la tipografia. Alternativament a la ubicació mitjançant una URI es pot usar la cadena formatada identificativa de la tipografia instal·lada en local.

El valor de unicode-range és el rang de caràcters que usa la tipografia. Els valors s'expressen com a nombres hexadecimals prefixats per «U+». Les formes poden ser:

Exemple 1-1: Regla simple sense definició de format 

@font-face {
  font-family: "SF New Republic";
  src: url("sf_new_republic.ttf");
}

Exemple 1-2: Regla simple amb definició de format 

@font-face {
  font-family: "SF New Republic";
  src: url("sf_new_republic.ttf") format("truetype");
}

Exemple 1-3: Regla amb identificació local i ubicació 

@font-face {
  font-family: "SF New Republic";
  src: local("SF New Republic"),
       url("sf_new_republic.ttf");
}

Exemple 1-4: Regles amb tractament de rangs unicode 

@font-face {
  font-family: "SF New Republic";
  src: url("sf_new_republic.ttf");
  /*Aplica a qualsevol caràcter*/
}
@font-face {
  font-family: "SF New Republic";
  src: url("sf_new_republic.ttf");
  unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
  /*Aplica a caràcters llatins, grecs, cirílics i alguns simbols de puntuació*/
}

Exemple 1-5: Regles incrementals per diferents pesos i estils 

@font-face {
  font-family: "SF New Republic";
  src: url("../fonts/sf_new_republic.eot");
  src: local("SF New Republic"), 
       url("../fonts/sf_new_republic.woff") format("woff"), 
       url("../fonts/sf_new_republic.ttf") format("truetype");
}
@font-face {
  font-family: "SF New Republic";
  font-weight: bold;
  src: url("../fonts/sf_new_republic_bold.eot");
  src: local("SF New Republic"), 
       url("../fonts/sf_new_republic_bold.woff") format("woff"), 
       url("../fonts/sf_new_republic_bold.ttf") format("truetype");
}
@font-face {
  font-family: "SF New Republic";
  font-style: italic;
  src: url("../fonts/sf_new_republic_italic.eot");
  src: local("SF New Republic"), 
       url("../fonts/sf_new_republic_italic.woff") format("woff"), 
       url("../fonts/sf_new_republic_italic.ttf") format("truetype");
}

La crida des d'una regla CSS és la usual:

h1 {
  font: 2em/1.5 bold "SF New Republic", sans-serif;
}

2. Formats

Nom Format Extensions Suport
TrueType truetype .ttf Firefox 3.5+, Safari 3.1+, Opera 10+, Chrome 2.0*
OpenType opentype .ttf, .otf Firefox 3.5+, Safari 3.1+, Opera 10+
Embedded OpenType embedded-opentype .eot Internet Explorer 6+
SVG Font svg .svg, .svgz Safari 3.1+, Opera 10+, Chrome 0.3+
Web Open Font Format woff .woff Firefox 3.6+

(*) Inhabilitat per defecte.

Internet Explorer 9 està considerant implementar el suport de WOFF.

3. Compatibilitat

Internet Explorer 8 o inferior no suporta la declaració:

@font-face {
  font-family: 'SF New Republic';
  src: url("sf_new_republic.eot") format("embedded-opentype");
}

Amb la qual cosa cal declarar el format EOT sense format:

@font-face {
  font-family: 'SF New Republic';
  src: url("sf_new_republic.eot");
}

Internet Explorer 8 o inferior no suporten més d'una declaració url() ni la declaració local() en una propietat src. El millor és tractar aquest navegador a part o fer quelcom tipus: 

@font-face {
  font-family: "SF New Republic";
  src: url("sf_new_republic.eot");
  src: local("SF New Republic"),
       url("sf_new_republic.woff") format("woff"),
       url("sf_new_republic.ttf") format("truetype"),
       url("sf_new_republic.otf") format("opentype"),
       url("sf_new_republic.svg#CalligraphyFLF") format("svg");
}

4. Conversors

ttf2eot

Conversor de TrueType Font a Embedded Open Type (EOT).

Web Embedding Fonts Tool (WEFT)

Conversor de TrueType Font a Embedded Open Type (EOT).

Batik, SVG Font Converter

Conversor de TrueType Font a Scalable Vector Graphics (SVG).

sfnt2woff

Conversor de TrueType Font i OpenType Font a Web Open Font Format (WOFF).

@font-face Generator

Conversor web a múltiples formats: EOT, SVG i WOFF des de TTF o OTF. Aquest conversor permet optimitzar els fitxers resultants.

5. Referències