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.aorviz.es/fonts/IbarraRealNova-Regular.woff")
format("woff"), /* Pretty Modern Browsers */
url("https://tecnologia.aorviz.es/fonts/IbarraRealNova-Regular.ttf"),
format("truetype"); /* Safari, Android, iOS */
}
@font-face {
font-family: "IbarraRealNova Italic";
src: url("https://tecnologia.aorviz.es/fonts/IbarraRealNova-Italic.woff")
format("woff"), /* Pretty Modern Browsers */
url("https://tecnologia.aorviz.es/fonts/IbarraRealNova-Italic.ttf"),
format("truetype"); /* Safari, Android, iOS */
}
@font-face {
font-family: "IbarraRealNova Bold";
src: url("https://tecnologia.aorviz.es/fonts/IbarraRealNova-Bold.woff")
format("woff"), /* Pretty Modern Browsers */
url("https://tecnologia.aorviz.es/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:
Post Scriptum
Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en https://tecnologia.aorviz.es/fonts/IbarraRealNova-Regular.ttf(razón: falta la cabecera CORS 'Access-Control-Allow-Origin')curl -H "Access-Control-Request-Method: GET" -H "Origin: https://aorviz.es" --head https://tecnologia.aorviz.es/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<Directory /var/www/html/tecnologia/fonts>
Header set Access-Control-Allow-Origin "*"
</Directory>curl -H "Access-Control-Request-Method: GET" -H "Origin: https://aorviz.es" --head https://tecnologia.aorviz.es/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