Probando la fuente Ibarra Real en la web

Durante la visita al CENTRO e-LEA Miguel Delibes en Urueña, me llamó la atención un proyecto que desconocía y que no ha tenido mucha divulgación y recorrido: la creación de una fuente tipográfica que se base en las raíces tipográficas tradicionales nacionales. Esta es la introducción que nos hacen en la web Unos Tipos Duros:

El proyecto Ibarra Real nace el año 2005 cuando se cumplía el cuarto centenario del Quijote.

Aprovechando este acontecimiento, el Ministerio de Industria español apoya el proyecto de la Calcografía Nacional que, dirigido por José María Ribagorda, tiene por objeto la puesta en valor de nuestro patrimonio tipográfico.

El objetivo fundamental es recuperar el patrimonio tipográfico de la Imprenta Real Española para su difusión a través de los actuales medios digitales, de forma que sea corriente su uso en edición electrónica, incorporando así un objeto de tanto valor simbólico, como la letra y el nombre de Ibarra,  al cotidiano espacio universal del escritorio del ordenador.

Para comenzar, el proyecto se propuso la recuperación de la tipografía más importante realizada en España en el siglo xviii y de la cual se fundieron las matrices que dieron lugar a la más bella edición del Quijote:

la realizada por Gerónimo Gil para la Real Academia Española en 1780 impresa por el más ilustre de nuestros impresores, Joaquín Ibarra.

Personalmente me ha encantado la estética de la fuente creada. Las tipografías seriff siempre impregnan al texto un toque elegante. Ya sabemos que las «formas» son importantes en muchos aspectos de la vida. Cuando un contenido se presenta de una manera visualmente agradable, mi subconsciente hace valorarlo aún mas.

Obtención de las fuentes

Podéis encontrar el archivo con las fuentes para descargar en la web de Unos Tipos Duros o bien en este repositorio de GitHub, correspondiente con el respositorio de propuestas de fuentes a incorporar a Google Fonts. En su momento parece que hubo algún problema con el licenciamiento, pero ya está resuelto y se distribuyen bajo licencia SIL Open Font License, como se lee en GitHub.

Elección del formato para la web

Para la prueba de concepto he seguido las indicaciones que nos proponen en https://css-tricks.com/snippets/css/using-font-face/ .

Lo primero que nos indican desde CSS Tricks es que necesitamos formatos para poder llegar al máximo número de navegadores. Me voy a centrar únicamente en los que ellos llaman «Pretty modern browsers», que leen fuentes en formato Web Open Format y «Safari, Android, iOS», que son capaces de leer fuentes en formato TrueType. Con esta selección considero suficiente el abanico de navegadores a tener en cuenta, de manera que se simplifica la configuración y gestión de las fuentes en la parte que toca al CSS/HTML.

En el repositorio de GitHub están disponibles las fuentes en formato OpenType y TrueType. En mi caso, he dicidido convertir las fuentes TrueType a Web Open Format, puesto que parece que son las que más rápido al ser una versión comprimida de las TrueType y OpenType.

Conversión de formato

La conversión de formato la haremos con la herramienta sfnt2woff que se encuentra en el paquete woff-tools para Debian/Ubuntu. Situándonos en el directorio donde están las fuentes con extensión «ttf» ejecutamos el siguiente script de bash para hacer el procesado por lotes:

aorviz@maquina:~/ibarrareal-master/fonts/ttf$ cat procesa.sh 
#!/bin/bash
FILES=./*.ttf
for f in $FILES;
do
	echo "Convirtiendo $f a woff";
	sfnt2woff $f
done
aorviz@maquina:~/ibarrareal-master/fonts/ttf$ 

Posteriormente añadiremos a nuestra hoja de estilo web las definiciones siguientes sobre la regla «font-face», que define nuestro tipo de letra y la ubicación del archivo con su correspondiente formato. En mi caso, he situado las fuentes fuera del WordPress para que la carga sea más rápida.

@font-face {
  font-family: "Ibarra";
  src: url("https://tecnologia.orviz.net/fonts/IbarraRealNova-Regular.woff")
      format("woff"), /* Pretty Modern Browsers */
    url("https://tecnologia.orviz.net/fonts/IbarraRealNova-Regular.ttf"),
    format("truetype"); /* Safari, Android, iOS */
}

@font-face {
	font-family: "IbarraRealNova Italic";
  src: url("https://tecnologia.orviz.net/fonts/IbarraRealNova-Italic.woff")
      format("woff"), /* Pretty Modern Browsers */
    url("https://tecnologia.orviz.net/fonts/IbarraRealNova-Italic.ttf"),
    format("truetype"); /* Safari, Android, iOS */

}

@font-face {
  font-family: "IbarraRealNova Bold";
  src: url("https://tecnologia.orviz.net/fonts/IbarraRealNova-Bold.woff")
      format("woff"), /* Pretty Modern Browsers */
    url("https://tecnologia.orviz.net/fonts/IbarraRealNova-Bold.ttf"),
    format("truetype"); /* Safari, Android, iOS */
}

.ibarraregular {
	font-family: "Ibarra";
	font-style: normal;
	font-size: 2em;
}

.ibarra {
    font-family: "Ibarra";
    font-style: normal;
    font-size: 1.2em;
}

El siguiente paso será incorporar el CSS y probar con algún párrafo indicando la familia de fuente a cargar. Para ello en mi WordPress he añadido el CSS anterior desde la sección Apariencia > Editar CSS

El siguiente paso es definir un atributo en un párrafo para hacer la prueba y verificar su funcionamiento:

Este es un bloque tipo párrafo del editor Gutemberg de WordPress con la fuente Ibarra Real. En la opción «Avanzado», he añadido la clase «ibarraregular«. Una fuente netamente EspaÑola.

Post Scriptum

Me ha llevado un tiempo dar con un problema que no estaba consiguiendo localizar, hasta que no he lanzado la depuración en los navegadores Mozilla y Chrome: al tener las fuentes alojadas en un dominio externo sobre HTTPS, es necesario autorizar la descarga de las fuentes desde orígenes distintos al propio dominio.

El error que estaba mostrando la consola es el siguiente:

Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en https://tecnologia.orviz.net/fonts/IbarraRealNova-Regular.ttf(razón: falta la cabecera CORS 'Access-Control-Allow-Origin')

Las cabeceras devueltas por el servidor eran estas:

curl -H "Access-Control-Request-Method: GET" -H "Origin: http://orviz.net" --head  https://tecnologia.orviz.net/fonts/IbarraRealNova-Regular.ttf

HTTP/1.1 200 OK
Date: Wed, 14 Aug 2019 07:02:45 GMT
Server: Apache/2.4.18 (Ubuntu)
Last-Modified: Sat, 10 Aug 2019 07:47:27 GMT
ETag: "1db2c-58fbe80965ba2"
Accept-Ranges: bytes
Content-Length: 121644
Content-Type: application/font-sfnt

He añadido lo siguiente en el archivo de configuración del VirtualHost del Apache, teniendo en cuenta que tiene que estar cargado el módulo «headers»

<Directory /var/www/html/tecnologia/fonts>
     Header set Access-Control-Allow-Origin "*"
</Directory>

Ahora las fuentes ya se cargan sin problema y podemos ver la autorización en las cabeceras en «Access-Control-Allow-Origin«. Podremos sustituir «*» por los dominios que consideremos para aumentar la seguridad.

curl -H "Access-Control-Request-Method: GET" -H "Origin: http://orviz.net" --head  https://tecnologia.orviz.net/fonts/IbarraRealNova-Regular.ttf  

HTTP/1.1 200 OK
Date: Wed, 14 Aug 2019 07:22:05 GMT
Server: Apache/2.4.18 (Ubuntu)
Last-Modified: Sat, 10 Aug 2019 07:47:27 GMT
ETag: "1db2c-58fbe80965ba2"
Accept-Ranges: bytes
Content-Length: 121644
Access-Control-Allow-Origin: *
Content-Type: application/font-sfnt