Las fuentes son una característica definitoria del diseño de cualquier sitio. Eso incluye temas de WordPress, donde es común que los desarrolladores de temas integren un servicio como Google Fonts en la configuración del personalizador de WordPress para un tema basado en PHP "clásico". Ese no ha sido el caso de los temas de bloque de WordPress. Si bien la integración de Google Fonts en temas clásicos está bien documentada, actualmente no hay nada disponible para temas de bloque en el Manual de temas de WordPress.

Eso es lo que vamos a ver en este artículo. De hecho, los temas de bloque pueden usar Google Fonts, pero el proceso para registrarlos es muy diferente de lo que podría haber hecho antes en los temas clásicos.

Lo que ya sabemos

Como dije, hay poco para nosotros en lo que respecta a comenzar. El tema Twenty Twenty-Two es el primer tema predeterminado de WordPress basado en bloques y demuestra cómo podemos usar los archivos de fuentes descargados como activos en el tema. Pero es bastante difícil de manejar porque implica un par de pasos: (1) registrar los archivos en el functions.php presentar y (2) definir las fuentes incluidas existentes theme.json presentar.

Sin embargo, desde que se lanzó Twenty Twenty-Two, el proceso se ha simplificado. Las fuentes agrupadas ahora se pueden definir sin registrarlas, como se muestra en la Veinte veintitrés tema. Sin embargo, el proceso aún requiere que descarguemos manualmente los archivos de fuentes y los agrupemos en los temas. Ese es un obstáculo que anula el propósito de las fuentes alojadas simples, directas y que se sirven en un CDN rápido.

Qué hay de nuevo

Si aún no lo sabía, el Proyecto Gutenberg es un complemento experimental en el que las funciones que se están desarrollando para WordPress Block y Site Editor están disponibles para su uso y prueba iniciales. En una reciente Artículo Modelador de temas, arquitecto principal del proyecto Gutenberg Matías Ventura analiza cómo Google Fonts, o cualquier otra fuente descargada, para el caso, se puede agregar para bloquear temas usando el Crear tema de bloque .

Este corto vídeo en Aprenda WordPress proporciona una buena descripción general del complemento Create Block Theme y cómo funciona. Pero la conclusión es que hace lo que dice en la lata: crea temas de bloque. Pero lo hace proporcionando controles en la interfaz de usuario de WordPress que le permiten crear un tema completo, un tema secundario o una variación de estilo de tema sin escribir ningún código ni tener que tocar los archivos de plantilla.

¡Lo he probado! Y dado que Create Block Theme es creado y mantenido por WordPress.org equipo, diría que es la mejor dirección que tenemos para integrar Google Fonts en un tema. Dicho esto, definitivamente vale la pena señalar que el complemento está en desarrollo activo. Eso significa que las cosas podrían cambiar bastante rápido.

Antes de explicar cómo funciona todo, primero repasemos brevemente el proceso "tradicional" para agregar Google Fonts a los temas clásicos de WordPress.

Como solía hacerse

Este artículo de ThemeShaper de 2014 proporciona un excelente ejemplo de cómo solíamos hacer esto en los temas clásicos de PHP, como es este nuevo artículo de Cloudways por Ibad Ur Rehman.

Para refrescar nuestra memoria, aquí hay un ejemplo del valor predeterminado Veinte diecisiete tema mostrando cómo las fuentes de Google se ponen en cola en el functions.php archivo.

function twentyseventeen_fonts_url() { $fonts_url = ''; /** * Translators: If there are characters in your language that are not * supported by Libre Franklin, translate this to 'off'. Do not translate * into your own language. */ $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' ); if ( 'off' !== $libre_franklin ) { $font_families = array(); $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i'; $query_args = array( 'family' => urlencode( implode( '|', $font_families ) ), 'subset' => urlencode( 'latin,latin-ext' ), ); $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' ); } return esc_url_raw( $fonts_url );
}

Luego, Google Fonts está preconectado al tema de esta manera:

function twentyseventeen_resource_hints( $urls, $relation_type ) { if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) { $urls[] = array( 'href' => 'https://fonts.gstatic.com', 'crossorigin', ); } return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

¿Qué tiene de malo la forma tradicional?

Genial, ¿verdad? Sin embargo, hay un problema. En enero de 2022, un Tribunal regional alemán impuso una multa al propietario de un sitio web por violar los Requisitos de GDPR. ¿La cuestión? Poner en cola Google Fonts en el sitio expuso la dirección IP de un visitante, poniendo en peligro la privacidad del usuario. CSS-Tricks cubrió esto hace un tiempo.

La Crear tema de bloque El complemento cumple con los requisitos de privacidad de GDPR, ya que aprovecha la API de Google Fonts para servir únicamente como un proxy para el proveedor local. Las fuentes se sirven al usuario en el mismo sitio web en lugar de en los servidores de Google, protegiendo la privacidad. WP Tavern analiza el fallo de la corte alemana e incluye enlaces a guías para Google Fonts con alojamiento propio.

Cómo usar Google Fonts con temas de bloques

Esto nos lleva a la forma "moderna" actual de usar Google Fonts con temas de bloques de WordPress. Primero, configuremos un sitio de prueba local. Yo uso Flywheel Al Cliente aplicación para el desarrollo local. Puedes usar eso o lo que prefieras, luego usa el Complemento de datos de prueba de tema por el equipo de temas de WordPress para trabajar con contenido ficticio. Y, por supuesto, querrás la Crear tema de bloque complemento allí también.

¿Has instalado y activado esos complementos? Si es así, navegue hasta Apariencia → Administrar las fuentes del tema desde el menú de administración de WordPress.

La pantalla "Administrar fuentes del tema" muestra una lista de las fuentes ya definidas en el tema. theme.json archivo. También hay dos opciones en la parte superior de la pantalla:

• Añadir fuentes de Google. Esta opción agrega fuentes de Google directamente al tema desde la API de fuentes de Google.
• Agregue fuentes locales. Esta opción agrega archivos de fuentes descargados al tema.

Estoy usando un tema completamente en blanco de WordPress llamado Tema vacío. Puede continuar con su propio tema, pero quería señalar que cambié el nombre de Emptytheme a "EMPTY-BLANK" y lo modifiqué, por lo que no hay fuentes ni estilos predefinidos.

Pensé en compartir una captura de pantalla de la estructura de archivos de mi tema y theme.json archivo para mostrar que literalmente no hay estilos o configuraciones en marcha.

Hagamos clic en el botón "Agregar fuentes de Google". Nos lleva a una nueva página con opciones para elegir cualquier fuente disponible de la actual Google FAPI de ontas.

Para esta demostración, seleccioné Inter del menú de opciones y seleccionó los pesos 300, Regular y 900 de la pantalla de vista previa:

Una vez que he guardado mis selecciones, los estilos de fuente Inter que seleccioné se descargan automáticamente y se almacenan en el tema. assets/fonts carpeta:

Observe también cómo esas selecciones se han escrito automáticamente en el theme.json archivo en esa captura de pantalla. El complemento Create Block Theme incluso agrega la ruta a los archivos de fuentes.

{ "version": 2, "settings": { "appearanceTools": true, "layout": { "contentSize": "840px", "wideSize": "1100px" }, "typography": { "fontFamilies": [ { "fontFamily": "Inter", "slug": "inter", "fontFace": [ { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "300", "src": [ "file:./assets/fonts/inter_300.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "900", "src": [ "file:./assets/fonts/inter_900.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./assets/fonts/inter_regular.ttf" ] } ] } ] } }
}

Si vamos a la pantalla principal de Create Block Theme y hacemos clic en el Administrar las fuentes del tema de nuevo, veremos las variantes de peso 300, 400 (regular) y 900 del Inter en el panel de vista previa.

A cuadro de vista previa de texto de demostración en la parte superior incluso le permite obtener una vista previa de las fuentes seleccionadas dentro de la oración, el encabezado y el párrafo con el control deslizante de selección de tamaño de fuente. Puede ver esta nueva función en acción en este vídeo de GitHub.

Las fuentes seleccionadas también están disponibles en el Editor del sitio Estilos globales (Apariencia → Editora), concretamente en el panel Diseño.

Desde aquí, navegue hasta Plantillas → Home y haga clic en el azul Editar botón para editar el index.html plantilla. queremos abrir el Estilos globales ajustes, que se representan como un icono de contraste ubicado en la parte superior derecha de la pantalla. Cuando hacemos clic en el Texto configuración y abra el Fuente menú en el Tipografía apartado… ¡vemos al Inter!

Lo mismo, pero con fuentes locales.

También podemos considerar agregar fuentes locales a un tema, ya que el complemento Create Block Theme ofrece esa opción. El beneficio es que puede usar cualquier archivo de fuentes que desee del servicio de fuentes que prefiera.

Sin el complemento, tendríamos que tomar nuestros archivos de fuentes, colocarlos en algún lugar de la carpeta del tema y luego recurrir a la ruta PHP tradicional de ponerlos en cola en el functions.php archivo. Pero podemos dejar que WordPress lleve esa carga por nosotros cargando el archivo de fuente en el Agregar fuentes locales pantalla utilizando la interfaz Crear tema de bloque. Una vez que se selecciona un archivo para cargar, los cuadros de definiciones de fuente se llenan automáticamente.

Aunque podemos usar cualquier .ttf, .woffo .woff2 archivo, simplemente descargué Abrir archivos de fuentes Sans de Google Fonts para este ejercicio. Arrebaté dos variaciones de peso, regular y 800.

La misma gestión automática de archivos mágicos y theme.json La actualización que vimos con la opción Google Fonts vuelve a ocurrir cuando cargamos los archivos de fuentes (que se hacen de uno en uno). Vea dónde aterrizaron las fuentes en mi carpeta de temas y cómo se agregaron a theme.json:

Eliminación de fuentes

El complemento también nos permite eliminar archivos de fuentes de un tema de bloque del administrador de WordPress. Eliminemos una de las variantes de Open Sans que instalamos en la última sección para ver cómo funciona.

Al hacer clic en el Eliminar enlaces desencadena una advertencia para que confirme la eliminación. haremos clic OK para continuar.

Abramos nuestra carpeta de temas y verifiquemos el theme.json archivo. Efectivamente, el archivo Open Sans 800 que eliminamos en la pantalla del complemento eliminó el archivo de fuente de la carpeta del tema, y ​​la referencia a él desapareció hace mucho tiempo. theme.json.

Hay trabajo en curso sucediendo

Se habla de agregar esta función de "Administrador de fuentes" a WordPress Core en lugar de necesitar un complemento separado.

Una iteración inicial de la función. está disponible en el repositorio, y utiliza exactamente el mismo enfoque que usamos en este artículo. Debería ser Conformidad con el GDPR , también. la característica es programado para aterrizar con WordPress 6.3 lanzamiento a finales de este año.

Terminando

El complemento Create Block Theme mejora significativamente la experiencia del usuario cuando se trata de manejar fuentes en temas de bloques de WordPress. El complemento nos permite agregar o eliminar cualquier fuente respetando los requisitos de GDPR.

Vimos cómo seleccionar una fuente de Google o cargar un archivo de fuente local coloca automáticamente la fuente en la carpeta del tema y la registra en el theme.json archivo. También vimos cómo la fuente es una opción disponible en la configuración de Estilos globales en el Editor del sitio. ¿Y si necesitamos eliminar una fuente? El complemento también se encarga de eso, sin tocar los archivos de tema o el código.

¡Gracias por leer! Si tienes algún comentario o sugerencia, compártela en los comentarios. Me encantaría saber qué piensas de esta posible dirección para la gestión de fuentes en WordPress.

Recursos adicionales

Me basé en mucha investigación para escribir este artículo y pensé en compartir los artículos y los recursos que usé para brindarle un contexto adicional.

Gestión de fuentes de WordPress

Problemas de GitHub

Requisitos del RGPD europeo

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
• Fuente: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/