src

El descriptor CSS src de la regla @font-face especifica el recurso que contiene a la fuente. Es requerido para que la regla @font-face sea v√°lida.

Su valor es una lista de referencias externas o nombres de fuentes instaladas, separadas por coma seg√ļn su prioridad. Cuando se necesita una fuente, el agente usuario itera sobre el conjunto de referencias, usando la primera que pueda ser activada exitosamente. Fuentes que contienen datos inv√°lidos o fuentes locales que no se encuentren son ignoradas, y el agente usuario cargar√° la siguiente en la lista.

Al igual que con otras URLs en CSS, la URL puede ser relativa, en cuyo caso se resuelve relativamente a la ubicaci√≥n de la hoja de estilos que contenga la regla @font-face. En caso de fuentes SVG, la URL apunta a un elemento dentro de un documento que contenga definiciones de fuentes SVG. Si se omite la referencia al elemento, se deduce que se usar√° la referencia a la primera fuente definida. De forma similar, formatos contenedores de fuentes que puedan contener m√°s de una, cargar√°n solo una de las fuentes para una regla @font-face. Los identificadores de fragmentos son usados para indicar cu√°l fuente se cargar√°. Si un formato contenedor no tiene un esquema de identificadores de fragmento definido, se usar√° un esquema de indexado simple, con base en 1 (por ejemplo, "font-collection#1" para la primera fuente, "font-collection#2" para la segunda fuente).

Related at-rule@font-face
Valor inicialn/a (required)
Valor calculadocomo se especifica

Sintaxis

/* <url> values */
src: url(https://somewebsite.com/path/to/font.woff); /* absolute URL */
src: url(path/to/font.woff);                         /* relative URL */
src: url(path/to/font.woff) format("woff");          /* explicit format */
src: url('path/to/font.woff');                       /* quoted URL */
src: url(path/to/svgfont.svg#example);               /* fragment identifying font */

/* <font-face-name> values */
src: local(font);      /* unquoted name */
src: local(some font); /* name containing space */
src: local("font");    /* quoted name */

/* Multiple items */
src: local(font), url(path/to/font.svg) format("svg"),
    url(path/to/font.woff) format("woff"),
    url(path/to/font.ttf) format("opentype");

Valores

<url> [ format( <string># ) ]?
Especifica una referencia externa que consiste en una URL seguida por un indicador opcional que describe el formato del recurso referenciado por esa URL. El indicador de formato contiene una lista de textos de formato, separados por coma, que denota formatos de fuente conocidos. Si un agente usuario no soporta los formatos especificados, omitir√° descargar el recurso. Si no se especifican los indicadores de formato, el recurso siempre es descargado.
<font-face-name>
Especifica el nombre de una fuente instalada localmente, usando la funci√≥n local(), que identifica de forma √ļnica a una fuente dentro de una familia larga. El nombre puede ser opcionalmente encerrado en comillas.

Sintaxis formal

[ <url> [ format( <string># ) ]? | local( <family-name> ) ]#

where
<family-name> = <string> | <custom-ident>+

Ejemplos

@font-face {
  font-family: examplefont;
  src: local(Example Font), url('examplefont.woff') format("woff"),
      url('examplefont.woff') format("opentype");
}

Especificaciones

Especificación Estatus Comentarios
CSS Fonts Module Level 3
La definición de 'src' en esta especificación.
Recommendation Definición inicial

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Soporte b√°sico 4.0 12.0 3.5 (1.9.1) 6.0 9.0 3.1
WOFF 5.0 ? 3.6 (1.9.2) 9.0 11.1 5.1
WOFF 2 36.0 ? 35.0 (35.0)[1] Sin soporte 26.0 Sin soporte
TrueType 4.0 ? 3.5 (1.9.1) 9.0 10.0 3.1
OpenType 4.0 ? 3.5 (1.9.1) 9.0 10.0 3.1
Embedded OpenType Sin soporte ? Sin soporte 6.0 Sin soporte Sin soporte
SVG Font 4.0 ? Sin soporte[2] Sin soporte 9.0 3.2
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Soporte b√°sico 2.2 1.0 (1.9.1) 10.0 Sin soporte 12.0 3.1
WOFF ? ? ? ? ? ?
WOFF 2 ? ? ? ? ? ?
TrueType ? ? ? ? ? ?
OpenType ? ? ? ? ? ?
Embedded OpenType ? ? ? ? ? ?
SVG Font ? ? ? ? ? ?

[1] Esta característica está implementada bajo la preferencia gfx.downloadable_fonts.woff2.enabled, inicialmente con valor predeterminado de false. A partir de Gecko 39.0 (Firefox 39.0 / Thunderbird 39.0 / SeaMonkey 2.36), esta preferencia tiene valor predeterminado de true.

[2] Esta caracter√≠stica aun no est√° implementada. V√©ase error 119490.