Recibe el boletín informativo, todos los lunes, y descarga nuestros ebooks exclusivos.

Probando la API de Web Fonts en Gutenberg 12.8

La API de Web Fonts era algo que se esperaba desde hace tiempo en el plugin Gutenberg. Como sabes, las funciones que se desarrollan para el plugin Gutenberg acaban incorporándose en el core de WordPress.

Básicamente, lo que significa la incorporación de la API de Web Fonts en Gutenberg 12.8 es que, con esta versión del plugin, puedes utilizar, exclusivamente, el archivo theme.json para definir los tipos de letra (tipografía) que se van a usar en un tema de bloques. Para más información sobre el concepto de «tema de bloques» y su diferencia con los temas clásicos, acude a nuestro FAQ.

Recordemos que, en un tema de bloques, existe la posibilidad -dentro del editor del sitio- de personalizar la tipografía mediante la función de «estilos globales». Si necesitas más información sobre esta función, acude a nuestro Curso de Full Site Editing.

Antes de la versión 12.8 de Gutenberg, la definición de las fuentes disponibles en los estilos globales se realiza parte en el archivo theme.json y parte en el archivo functions.php. Es probable que, si estás en una versión de WordPress previa a la incorporación de las funciones incluidas en Gutenberg 12.8 (WordPress 5.9, por ejemplo) y sin el plugin instalado, no puedas emplear exclusivamente theme.json para definir las Web Fonts.

Para entender la prueba que se detalla a continuación, es preciso conocer dónde se alojan los archivos correspondientes a las fuentes que se usan en el tema, aparte de las del sistema. La ubicación concreta es en la carpeta assets/fonts que se encuentra dentro del directorio del tema. Suelen ser archivos con extensión «.woff2».

Para más información sobre el uso de fuentes web (en este caso, las de Google), antes de la FSE, acude al artículo Cómo modificar el tipo de letra de Google Fonts de cualquier theme de WordPress.

Hay algo importante a destacar: la función de la API de fuentes web de Gutenberg 12.8 trabaja solo con archivos de fuentes alojados localmente (ubicados dentro del directorio assets/fonts del tema). Otra cuestión que quisimos probar es si podíamos definir en theme.json un tipo de letra de Google Fonts si descargábamos, previamente, el archivo .woff2 de https://google-webfonts-helper.herokuapp.com/fonts/ y lo subíamos a assets/fonts. Esto, aparentemente, funciona y se refleja en los estilos globales. Con ello, además, cubrimos el RGPD (leer RGPD y Google Fonts: cómo proteger la privacidad de tus visitas si usas las fuentes de Google).

Como prueba, vamos a añadir el tipo de letra «Aclonica» al tema Twenty Twenty Two. Solamente queremos el charset latin y el estilo regular 16px (de ancho 400).

1. Modificación en functions.php

Trabajaremos en Twenty Twenty Two, siguiendo las instrucciones de Webfonts API #37140

Lo primero es realizar la modificación en el archivo functions.php tal y como se indica en el ticket #37140, reemplazando la función twentytwentytwo_get_font_face_styles por:

function twentytwentytwo_get_font_face_styles() { return ''; }

2. Descarga del archivo .woff2 y ubicación en assets/fonts

Entraremos en https://google-webfonts-helper.herokuapp.com/fonts/aclonica?subsets=latin y haremos clic en el botón de download del apartado nº 4. Descomprime el zip descargado, entra en la carpeta generada y localiza el archivo .woff2.

A continuación, súbelo al directorio assets/fonts del tema Twenty Twenty Two.

Si estás utilizando la aplicación Local (by Flywheel), el tema está ubicado en Usuarios>[usuario]>Local Sites>[sitio]>app>public>wp-content>themes (en MacOS).

3. Modificación en theme.json

Lo siguiente es modificar el archivo theme.json, reemplazando fontFamilies con lo siguiente:

"fontFamilies": [
                {
                    "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
                    "name": "System Font",
                    "slug": "system-font"
                },
                {
                    "fontFamily": "\"Source Serif Pero\", serif",
                    "name": "Source Serif Pero",
                    "slug": "source-serif-pero",
                    "fontFace": [
                        {
                            "fontFamily": "Source Serif Pero",
                            "fontWeight": "200 900",
                            "fontStyle": "normal",
                            "fontStretch": "normal",
                            "src": [ "file:./assets/fonts/SourceSerif4Variable-Roman.ttf.woff2" ]
                        },
                        {
                            "fontFamily": "Source Serif Pero",
                            "fontWeight": "200 900",
                            "fontStyle": "italic",
                            "fontStretch": "normal",
                            "src": [ "file:./assets/fonts/SourceSerif4Variable-Italic.ttf.woff2" ]
                        }
                    ]
                },
                               
                                {
                    "fontFamily": "\"Aclonica\"",
                    "name": "Aclonica",
                    "slug": "aclonica",
                    "fontFace": [
                        {
                            "fontFamily": "Aclonica",
                            "fontWeight": "400",
                            "fontStyle": "normal",
                            "fontStretch": "normal",
                            "src": [ "file:./assets/fonts/aclonica-v16-latin-regular.woff2" ]
                        }
                    ]
                }

            ],

Con esos pasos, tendremos en estilos globales el tipo de letra «Source Serif Pero» en normal y cursiva (una réplica de la original «Source Serif Pro» pero definida solo en theme.json). Y, además, la fuente de Google -alojada localmente- «Aclonica» en estilo normal.

Observa el resultado en el sitio vCard que creamos en el post Construcción de un sitio web vCard utilizando un tema de bloques y la edición completa del sitio (FSE)

vcard-aclonica-1024x489 Probando la API de Web Fonts en Gutenberg 12.8

Observa en el siguiente GIF cómo, después de configurar el archivo theme.json, en Estilos Globales aparece el nuevo tipo de letra «Aclonica» y cómo puedes cambiar el tipo de letra de la plantilla.

vcard-aclonica-2 Probando la API de Web Fonts en Gutenberg 12.8

Conclusiones

A partir de la información con las novedades de Gutenberg 12.8 aportadas por Justin Tadlock en Gutenberg 12.8 Launches the Web Fonts API, Improves Group Nesting, and Adds Keyboard Shortcut for Links, quisimos probar la nueva definición de Web Fonts, incluyendo las de Google, en theme.json.

FSE-NEWS-1024x576 Probando la API de Web Fonts en Gutenberg 12.8

FSE NEWS son posts rápidos con tips, tools y noticias sobre Gutenberg y Full Site Editing (FSE). Consulta la página principal para acceder a todos los posts de FSE NEWS. Consulta el FAQ para aclarar los términos generales que se utilizan.

Comparte en Mastodon:

mastodon Probando la API de Web Fonts en Gutenberg 12.8

Y aún hay más…

Cómo se hace un sitio web

Una revisión a vista de pájaro de todo lo necesario para crear un sitio web de WordPress.

Recursos

La lista de recursos recomendada en Blogpocket.

Mi lista de plugins

La lista de plugins de WordPress recomendada en Blogpocket

UN-BLOG-DE-21-MAS-1-COVER-3D-1024x944 Probando la API de Web Fonts en Gutenberg 12.8

Suscríbete a la newsletter

En la newsletter «WP al día» recopilamos las ideas, trucos y noticias de actualidad acerca de WordPress, Gutenberg y la Edición completa del sitio. Recíbela todos los lunes a primera hora.

Suscríbete ahora y descarga, entre otros, nuestro último ebook «Un blog de 21 años (la historia jamás contada)!.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido