El otro día en ¿Es posible tener una única instalación de WordPress con múltiples nombres de dominio y múltiples bases de datos? explicamos cómo instalar sobre una única instalación de WordPress varios sitios web con más de un nombre de dominio y con distintas bases de datos, lo que siempre es muy interesante, pero tras lo cual nos puede surgir algún problema, como este que explicamos hoy.

Si queremos hacer uso de fuentes incrustadas o embebidas en el código de nuestra hoja de estilo CSS, lo primero que vamos a necesitar es la fuente tipográfica que queremos utilizar y pasarla por algún creador de fuentes incrustadas o embebidas, como el fantástico Font Squirrel. Allí obtendremos todo lo necesario, la fuente tipográfica convertida a los formatos EOT, SVG, OTF o TTF y WOFF, y una hoja de estilo CSS, todo listo para subir a nuestro servidor. Básicamente el contenido de la hoja de estilo es muy parecido a esta porción de código de la fuente de nuestro isotipo:

/* APG */
@font-face {
    font-family: 'd3_euronismregular';
    src: url('d3euronism-webfont.eot');
    src: url('d3euronism-webfont.eot?#iefix') format('embedded-opentype'),
         url('d3euronism-webfont.woff') format('woff'),
         url('d3euronism-webfont.ttf') format('truetype'),
         url('d3euronism-webfont.svg#d3_euronismregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

El problema nos surge cuando queremos utilizar esa misma porción de código en un nombre de dominio distinto, ya que no se usará la fuente deseada, sino la que esté configurada de forma predeterminada en la hoja de estilo principal y que se encuentre instalada en el ordenador que ejecuta el navegador web.

¿Cómo lo solucionamos?

Muy fácil, sólo hay que añadir una pequeña porción de código en nuestro archivo .htaccess, concretamente este código:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/x-woff .woff
AddType image/svg+xml .svg
<FilesMatch "\.(eot|ttf|otf|woff|svg)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Gracias a esta pequeña modificación, no vamos a tener ningún tipo de problema en compartir nuestras fuentes incrustadas o embebidas en las hojas de estilo entre todos nuestros nombres de dominio.

Como siempre esperamos que os sea útil esta pequeña solución a un gran problema.