Cambiar la fuente en WordPress

Muchas veces necesitamos cambiar la fuente en WordPress que trae por defecto nuestro tema porque nos resulta aburrida o poco vistosa. Esta es una tarea sencilla pero al mismo tiempo hay que tener los conceptos claros para hacerlo de forma correcta. Este artículo también nos servirá para cambiar la fuente en una página web aunque no sea WordPress, ya que el concepto es el mismo.

Como especificar que fuente emplear con CSS.

Para especificar la fuente a usar con CSS se emplea la propiedad font-family seguida del nombre de la fuente a emplear. Por ejemplo:

font-family: "Times New Roman";

Se pueden especificar varias fuentes por orden de preferencia, entonces en caso de que no se encuentre disponible la primera se pasará a la segunda y así sucesivamente. El código CSS de ejemplo quedaría así:

font-family: "Times New Roman", Arial;

También hay que fijarse que cuando el nombre de la fuente tiene varias palabras hay que ponerlo entre comillas dobles, como es el caso de “Times New Roman”.

Bueno, ya tenemos la fuente especificada, pero nosotros necesitamos poder especificar nuestra fuente personalizada que le vamos a llamar por ejemplo “mifuente”. Como esta fuente no forma parte del sistema operativo ni vamos a obligar a cada visitante a que instale dicha fuente para ver correctamente nuestra web, tenemos que cargar el archivo de la fuente de forma dinámica al acceder a la web a través de código CSS.

Cargar una fuente personalizada para usarla con CSS.

La forma de cargar fuentes personalizadas es emplear la propiedad @font-face, que nos permite especificar la rutas donde localizar los archivos de las fuentes así como el nombre que identificará nuestra fuente y los estilos de negrita y cursiva.

Un ejemplo de código CSS para cargar nuestra fuente personalizada de nombre “mifuente” sería el siguiente:

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

El código como vemos es bastante sencillo pero puede llevar a confusión la cantidad de archivos de fuente a la que se hace referencia por lo que vamos a hablar de este tema. La problemática de cargar fuentes personalizadas reside en que cada navegador lo hace a su manera, ya que no existe un estándar para todos los navegadores. Esto se ha complicado aun más con la aparición de los navegadores de dispositivos móviles con iOS y Android, pero los mayores problemas los da como siempre Internet Explorer. Los chicos de Microsoft no siguen ningún estándar con su navegador, ya que parece que pretenden crear el suyo para que los demás lo sigan pero no han tenido éxito, ni lo tendrán.

En el código podemos ver que se cargan diferentes tipos de archivo de fuente:

• eot?#iefix : El primer archivo que se carga es mifuente-webfont.eot, los archivos con extensión eot son del tipo Embedded OpenType y los usa Internet Explorer unicamente. El archivo eot se carga con el modificador ?#iefix para que lo cargue Internet Explorer entre las versiones 6 y 8 (ambas incluidas).
• woff: son archivos del tipo Web Open Font Format y son los que recomienda emplear el estándar W3C. Es soportado por la gran mayoría de navegadores modernos, incluido Internet Explorer 9. El problema está en que versiones inferiores a la 9 de Internet Explorer no soportan este formato por eso especificamos el archivo eot previamente.
• ttf: son archivos de tipo True Tipe Font. Este formato es soportado por la gran mayoría de navegadores excepto Internet Explorer.
• svg: los archivos svg son del tipo Scalable Vector Graphics y son soportados por iPhone/iPad en versiones antiguas.

Podemos apreciar que estamos cargando cuatro archivos de fuentes (eot, woff, ttf y svg), lo cual puede repercutir negativamente en la velocidad carga de la página web, por lo que es recomendable trabajar con el menor número posible de fuentes diferentes. Estos archivos los localizamos con la propiedad url() del código CSS, en el ejemplo estoy suponiendo que los archivos de las fuentes están en la misma carpeta que el archivo CSS.

Muchos os preguntaréis si hay que cargar los cuatro archivos para cambiar la fuente en WordPress, pues la respuesta es que si queréis aseguraros de maximizar la compatibilidad con todos los navegadores lo recomendable es cargar los cuatro archivos.

En la imagen siguiente podemos ver un resumen de como cambiar la fuente en WordPress mediante código CSS:

Como cambiar la fuente en WordPress

Visto y entendido lo anterior, cambiar la fuente en WordPress es tan sencillo como editar el archivo style.css para agregar el código CSS y cargar las fuentes. Despues con la propiedad font-family podemos especificar en que bloques usar las fuentes cargadas. En el caso de páginas web hay que modificar el archivo CSS que estemos usando para nuestra web.

Espero que os haya ayudado a aclarar el tema de las fuentes en los navegadores, que como siempre todo sería más sencillo si todos los navegadores fuesen obligados a seguir un mismo estándar. Si tenéis dudas o comentarios no dudéis en plantearlos.