Las fonts @ font-face solo funcionan en su propio dominio

Intento crear un tipo de repository de fonts para usar en mis sitios web, de modo que pueda llamar a cualquier fuente en el repository en mi CSS sin ninguna otra configuración. Para hacer esto, creé un subdominio en el que colocaba carpetas para cada fuente en el repository que contenía los distintos tipos de archivos para cada fuente. También coloqué un archivo css llamado font-face.css en la raíz del subdominio y lo llené con declaraciones @font-face para cada fuente, las fonts están vinculadas con un enlace absoluto para que puedan ser utilizadas desde cualquier lugar.

Mi problema es que parece que solo puedo usar las fonts en ese subdominio donde se encuentran, en mis otros sitios la fuente no se muestra. Utilizando Firebug determiné que el archivo font-face.css se estaba vinculando y cargando con éxito. Entonces, ¿por qué la fuente no se carga correctamente? ¿Hay protección en los archivos de fonts o algo así? Estoy usando todas las fonts con las que se me debería permitir hacer esto, así que no veo por qué ocurre esto. Tal vez es un problema de Apache, pero puedo descargar la fuente muy bien cuando me conecto a ella.

Ah, y solo para aclarar, no estoy violando ningún derecho de autor al configurar esto, todas las fonts que estoy usando tienen licencia para permitir este tipo de cosas. Sin embargo, me gustaría establecer una forma en que solo yo pueda tener acceso a este repository de fonts, pero ese es otro proyecto.

Esto se debe a que Firefox (por su mención de Firebug) cree que la incrustación de fonts web entre dominios, incluso subdominios, es una mala idea.

Puede convencerlo para que cargue fonts de su subdominio agregando esto al archivo .htaccess nivel superior del subdominio donde se están sirviendo sus fonts (actualizado para adaptar el código del mismo archivo en HTML5 Boilerplate ):

   Header set Access-Control-Allow-Origin "*"   

En respuesta a esto:

Sin embargo, me gustaría establecer una forma en que solo yo pueda tener acceso a este repository de fonts, pero ese es otro proyecto.

La especificación W3C para Access-Control-Allow-Origin no dice nada más que un comodín "*" o un dominio específico. Hasta el momento, he encontrado esta respuesta de SO que sugiere validar el encabezado de Origin , pero creo que es un encabezado de solo Firefox. No estoy seguro acerca de otros navegadores (ni siquiera necesitan el truco .htaccess anterior para que las fonts web de dominios cruzados funcionen).

Otra forma de solucionar esto en Firefox es insertar la fuente directamente en el archivo css usando la encoding base64. Especialmente ingenioso si no tienes acceso a algunas de las configuraciones mencionadas anteriormente.

Puede generar el código necesario en fontsquirrel.com : en el Generador de kits de cara de fuente, elija el modo experto, desplácese hacia abajo y seleccione Codificación Base64 en Opciones de CSS: el kit de fonts descargado estará listo para conectarse y reproducirse.

Esto también tiene el beneficio marginal de reducir el tiempo de carga de la página porque requiere una solicitud HTTP menos.

Si no desea permitir recursos de todos los dominios, sino solo del subdominio de su sitio, debe hacerlo de la siguiente manera:

 # Allow font, js and css to be loaded from subdomain SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=$0   Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN   

Fuente: http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html

Usando http://www.fontsquirrel.com/fontface/generator en el modo “experto” y eligiendo base64 como una opción, se devolvió un stylesheet.css con los datos codificados base64 necesarios para usar en nuestra hoja de estilo. Parece funcionar en todos los navegadores que hemos probado, excepto IE8.

Nos encontramos con este problema al aplicar temas a herramientas de terceros, como la petición de salsa, donde nos vemos obligados a alojar la fuente.

¡Gracias a todos por la ayuda!