WordPress ha estado en el camino hacia una verdadera API de tipografías durante mucho tiempo - con el lanzamiento de Gutenberg 12.8 el 16 de marzo de 2022, ya está aquí. Aprende a utilizar la API de tipografías WordPress y lo que finalmente cambiará gracias a la API.

Entre otras cosas, puedes utilizar la API de tipografías WordPress para añadir dinámicamente fuentes personalizadas a tus themes WordPress y obtener un mayor control sobre el texto de tu web WordPress. 

¿Qué es la nueva API de tipografías WordPress? 

En septiembre de 2021, se debatió en la comunidad una propuesta del desarrollador de WordPress Ari Stathopoulos sobre una API de tipografías. La API para WordPress es un gran avance para ti como desarrollador/a o diseñador/a. La API de tipografías WordPress te permite incrustar fuentes en tus sitios WordPress sin tener que preocuparte por la regla "font-face" o la política de dominios cruzados.  

La API de fuentes web de WordPress se ha integrado en la nueva versión 12.8 de Gutenberg y está previsto que llegue al núcleo con WordPress 6.0. "El hecho de que se haya tardado tanto en llegar a este punto es un testimonio de lo complejas que pueden ser las fuentes web", como explica Héctor Prieto en la entrada del blog oficial de Gutenberg 12.8 en WordPress.org.

Ahora que este marco está en marcha, se pueden crear más herramientas y optimizaciones sobre este para garantizar que WordPress ofrezca la mejor experiencia (y privacidad) posible a los/as usuarios/as finales.

¿Por qué es necesaria una API básica? 

Las normas permiten una aplicación rutinaria de las fuentes. Es un estándar para que cualquier desarrollador/a pueda mirar unas pocas líneas de código y entender lo que hace el código. La implantación de una API permite establecer una base estable para futuros desarrollos.  

El proyecto Gutenberg

Se desarrolló el editor Gutenberg. Además de la posibilidad de utilizar estilos globales, los desarrolladores de Gutenberg también necesitaban poder especificar qué fuentes debían utilizarse en sitio. Gracias a que es una API, otras aplicaciones o partes de la misma aplicación también pueden recuperar los datos de la API de tipografías WordPress.

Un escenario de aplicación: has encargado a un/a desarrollador/a la creación de un banner de cookies personalizado. En tu sitio web WordPress utilizas la API de tipografías WordPress para especificar qué fuentes utilizar. El/la desarrollador/a puede utilizar las mismas fuentes web que se utilizan en el otro sitio web.

Puedes utilizar la misma API para gestionar las fuentes del sitio web. No es necesario gestionar los ajustes en varios lugares. Cabe señalar que la primera versión es solo una base sobre la que el equipo WordPress construirá.

El camino hacia una API de tipografías WordPress ha sido una montaña rusa de emociones para los desarrolladores. Después de ser eliminada de WordPress 5.9, fue trasladada al proyecto Gutenberg donde pudo ser desarrollada junto con las características relacionadas que dependían de esta.

Esto significa que puedes utilizar y configurar tus fuentes desde el mismo lugar y los cambios se sincronizarán con todos los lugares donde utilices la API de tipografías WordPress. Cabe destacar que la primera versión es solo una base sobre la que el equipo WordPress seguirá construyendo. 

En este artículo, te mostraremos cómo utilizar la API de tipografías WordPress, desde su instalación hasta la adición de fuentes a la API. Empecemos.  

¿Qué hace la API de tipografías WordPress? 

Esta API es el primer paso para permitir la carga de fuentes de una forma potente, respetuosa con la privacidad y preparada para el futuro, algo que es muy difícil de hacer sin un marco de este tipo.

La API de tipografías WordPress permite a los/as desarrolladores/as de themes especificar qué familias de fuentes deben utilizarse en WordPress junto con sus archivos asociados. WordPress carga automáticamente las fuentes con el CSS correcto en el editor y el frontend. En la primera versión de la API de tipografías WordPress, las secuencias de comandos y los estilos están en cola. La razón es la necesidad de una solución uniforme.

La función Web Font API actúa como una envoltura para la API de la hoja de estilos. Esto se debe a que para poner en cola una fuente web, hay que poner en cola el propio archivo de la fuente mediante la hoja de estilos (o añadiendo un estilo en línea). 

Inicialmente, solo se pueden utilizar fuentes locales. En el futuro, el equipo de WordPress seguramente añadirá soporte para más proveedores de fuentes. 

En lugar de eliminarlas, ¿quizás podríamos implementarlas correctamente y forzar las fuentes web alojadas localmente para mejorar el rendimiento y la privacidad? De este modo, daríamos un buen ejemplo y veríamos una mejora significativa del rendimiento y la privacidad en el ecosistema WordPress, ya que los themes y plugins que actualmente utilizan fuentes de Google, Adobe, etc. adoptarán la API. 

Cita de GitHub

Puede dar lugar a problemas de rendimiento cuando las descargas de los temas sean mayores si solo se admiten las fuentes locales. Sin embargo, para muchos themes esto no debería ser un problema: uno, dos o tres paquetes de fuentes deberían ser suficientes para la mayoría de los themes. Sin embargo, si las variaciones globales de estilo se hacen populares, podríamos ver themes que ofrezcan muchas fuentes para cubrir varios diseños predefinidos.  

Cómo utilizar la API de tipografías WordPress 

Veamos ahora cómo se puede utilizar en la práctica la nueva API de tipografías WordPress. 

Hay dos métodos para registrar las fuentes web en WordPress: a través del archivo "theme.json" de tu , que es estándar desde WordPress 5.8, o a través del método @font-face. Las claves y valores del theme.json se corresponden en su mayoría con la regla CSS @font-face. Si no los conoces, deberías refrescar los conocimientos de tu . La regla @font-face es un estilo CSS que te permite especificar el tipo de letra que quieres utilizar en el sitio web tus .

Puedes utilizar una fuente que ya esté instalada en el ordenador del usuario o cargar una fuente desde un servidor remoto. El archivo theme.json contiene la lista de fuentes que deseas utilizar en tu sitio web. Contiene el nombre de la fuente, la URL del archivo de la fuente y el peso y estilo de la misma.  

Ahora veremos cómo se pueden cambiar las fuentes utilizando el archivo theme.json. Para ello, debes conectarte a tu sitio web WordPress a través de SFTP. Así se accede a los archivos del sitio web. Utiliza un cliente FTP de tu elección. (Ten en cuenta que Raidboxes solo admite SFTP y no FTP sin cifrar). Yo uso Termius.  

Una vez que te hayas conectado a tu servidor y estés en la carpeta de inicio, verás una carpeta llamada "disco". Haz clic en él. 

En la carpeta "disco" verás dos carpetas (en algunos casos puede tener un aspecto diferente), pero debes hacer clic en la carpeta "WordPress". En la carpeta "WordPress" verás la biblioteca habitual de archivos de WordPress. Haz clic en la carpeta "wp-content" y bajo esta carpeta en la carpeta "themes".

Ahora estamos en la carpeta donde se guardan todos los temas de WordPress instalados. Hago clic en twentytwentytwo a modo de demostración. En la imagen ves el archivo que tienes que descargar en tu ordenador para poder editarlo.  

Después de abrir el archivo "theme.json" con el editor normal o tus IDE preferido, añade las fuentes web en settings.typography.fontfamily como parte de una definición especial de familia de fuentes.  

}, 

„typography“: { 

"customFontSize": true, 

"dropCap": falso, 

"fontFamilies": [ 

{ 

}, "fontFamily": "outfit", "sans-serif", 

}, "nombre": "equipo", 

{ "slug": "primario". 

}, 

{ 

}, "fontFamily": "monospace", 

}, "nombre": "monospace", 

", "slug": "monospace 

} 

  

Después de abrir el archivo "theme.json" en cualquier editor de texto. 

Puedes encontrar la etiqueta "tipografía" si buscas en el código. A continuación, verás la etiqueta "fontFamilies", bajo la cual introduces las fuentes que quieres añadir al sitio web tus WordPress. En la imagen puedes ver las marcas rojas. Como en la imagen de arriba.  

Dependiendo del tema que utilices, el código puede tener un aspecto diferente. En otro ejemplo, utilizo el tema por defecto twentytwentytwo sin ningún cambio. Como puedes ver, bajo la primera "fontfamily", aparece el código de la pila de fuentes del sistema (las fuentes del sistema y por defecto se utilizan en ordenadores y teléfonos móviles). Lee más sobre los tipos de letra aquí.  

Ejemplos de uso 

Con la API de tipografías WordPress para la última versión de WordPress, los/as desarrolladores/as pueden especificar qué fuentes utilizar en el editor de themes. Imagina que un/a desarrollador/a quiere utilizar una combinación de fuentes según los deseos del cliente.

Entonces es muy fácil para el editor publicar un artículo. El editor no tiene que pensar en las combinaciones de fuentes, ya están preestablecidas. Este ejemplo de aplicación muestra la idea que hay detrás de la API de fuentes. 

Conclusión sobre la API de tipografías WordPress

La API de tipografías WordPress es un paso decisivo para ti como desarrollador/a o diseñador/A web. Al permitir a los/as desarrolladores/as de themes definir familias de fuentes y archivos asociados, WordPress se encarga de cargar las fuentes tanto en el editor como en el frontend. Esto hace que el desarrollo y el diseño sean mucho más fáciles y eficaces. 

En este artículo describí cómo funciona la API de tipografías WordPress. ¿Has probado a usarla? Me gustaría conocer tu opinión al respecto.