Si acabas de empezar a utilizar WordPress, o nunca has usado temas Full Site Editor (FSE), puede que te sientas abrumado por la cantidad de plantillas, patrones y ajustes que tienes bajo tu control. Y es muy probable que ni siquiera te des cuenta de que los temas FSE tienen una gran cantidad de ajustes de color y fuente disponibles desde el principio.
Lo mejor es que los ajustes de estilo más utilizados están bien organizados, y podrás encontrarlos todos en un solo panel. Veamos cómo se ven los ajustes de fuente en WordPress.
Cómo cambiar las fuentes en WordPress
Para acceder a la configuración de fuentes en los temas de WordPress Full Site Editor debe abrir el editor del sitio. Puede hacerlo yendo a Apariencia >> Editor en el panel de administración de WordPress, o haciendo clic en Editar sitio mientras navega por su sitio web como visitante.
Una vez que esté en el editor del sitio, busque el icono Estilos en la parte superior derecha de la pantalla.
Después de hacer clic en Estilos verás todos los ajustes de estilo globales disponibles para tu tema actual. Haga clic en Tipografía para comprobar la configuración de la fuente.
Los temas predeterminados de WordPress le permiten establecer diferentes fuentes para el texto, enlaces, encabezados y botones. Haga clic en cada uno de ellos para cambiar su configuración predeterminada.
Sólo un breve recordatorio – si lo necesitas, puedes anular estos ajustes en cualquier bloque mientras editas páginas o entradas. Y no te preocupes por cambiar los ajustes globales si tienes ajustes de fuente personalizados en entradas ya existentes. La configuración global no restablecerá tus fuentes personalizadas.
Cuando seleccionas cualquiera de los elementos de la sección Tipografía puedes cambiar la familia de fuentes, el tamaño de fuente, la apariencia (negrita, cursiva, etc.) y la altura de línea.
La mayoría de los temas tienen múltiples fuentes disponibles por defecto.
Una vez que cambie la fuente en la configuración de tipografía, verá el resultado inmediatamente. El lado izquierdo del editor del sitio actualizará sus fuentes y cualquier otra configuración que esté editando allí, incluso antes de guardar los cambios.
Una vez que pulse el botón Guardar, la configuración de la fuente del sitio web estará activa.
Cómo añadir fuentes al editor completo de WordPress
Los métodos antiguos de añadir fuentes directamente al archivo style.css del tema, o añadiendo CSS personalizado funcionarán para los visitantes del sitio web, pero no podrá previsualizar las páginas con la fuente correcta desde el administrador. Así que no es la solución adecuada para temas basados en FSE.
La buena noticia es que WordPress le permite añadir fácilmente fuentes a la configuración del tema. Para ello, haz clic en Herramientas >> Editor de archivos de temas en el menú de administración de WordPress. A continuación, haga clic en el archivo theme.json de la derecha y busque FontFamilies en el código del archivo.
Probablemente ya se ha dado cuenta de cómo se definen las diferentes fuentes en el tema. Para añadir una fuente adicional al tema de WordPress necesita añadir una fontFace adicional a estos ajustes.
Este es un ejemplo de cómo añadir la fuente Georgia al tema basado en el Editor de Sitios Completo:
{
"fontFamily": "Georgia",
"name": "Georgia",
"slug": "georgia"
},Aquí es donde debe añadir el código:
Una vez que haya añadido la fuente, podrá utilizarla tanto en la configuración de estilo principal como en la configuración de bloques personalizados. También se previsualizará mientras editas el contenido de tu sitio.
Cómo añadir fuentes Google con diferentes pesos al Editor de Sitios de WordPress
¿Desea añadir algunos pesos diferentes de fuentes Google al editor del sitio completo de WordPress? Puede hacerlo en las mismas Herramientas >> Editor de Archivos de Tema, añadiendo la familia de fuentes con un poco más de detalle.
Pero antes de añadir una fuente Google específica a WordPress necesita descargar los archivos de esa fuente. Para ello puede utilizar la herramienta de ayuda Google Webfonts. Aquí está el ejemplo con la fuente Monsterrat. Primero selecciona los pesos y estilos de fuente que necesitas:
A continuación, desplázate hasta la parte inferior de la página y descarga el paquete de fuentes seleccionado.
Extrae las fuentes descargadas y súbelas a la carpeta /fonts de tu tema de WordPress utilizando Filezilla u otro cliente FTP similar.
Una vez que los archivos están en su lugar es necesario añadir que la familia de fuentes de Google a theme.json archivo a través de Herramientas >> Editor de archivos de tema.
He aquí un ejemplo que he utilizado en el tema Frost para añadir múltiples pesos de Google Font en WordPress. Puedes añadirlo justo después de «fontFamilies»: [ línea:
{
"fontFace": [
{
"fontFamily": "Montserrat",
"fontStretch": "normal",
"fontStyle": "normal",
"fontWeight": "400",
"src": [
"file:./assets/fonts/montserrat-v25-latin-ext_latin-regular.woff2"
]
},
{
"fontFamily": "Montserrat",
"fontStretch": "normal",
"fontStyle": "italic",
"fontWeight": "400",
"src": [
"file:./assets/fonts/montserrat-v25-latin-ext_latin-italic.woff2"
]
},
{
"fontFamily": "Montserrat",
"fontStretch": "normal",
"fontStyle": "normal",
"fontWeight": "500",
"src": [
"file:./assets/fonts/montserrat-v25-latin-ext_latin-500.woff2.woff2"
]
},
{
"fontFamily": "Montserrat",
"fontStretch": "normal",
"fontStyle": "normal",
"fontWeight": "600",
"src": [
"file:./assets/fonts/montserrat-v25-latin-ext_latin-600.woff2.woff2"
]
},
{
"fontFamily": "Montserrat",
"fontStretch": "normal",
"fontStyle": "normal",
"fontWeight": "700",
"src": [
"file:./assets/fonts/montserrat-v25-latin-ext_latin-700.woff2.woff2"
]
}
],
"fontFamily": ""Montserrat", sans-serif",
"name": "Montserrat",
"slug": "montserrat"
},Aquí está la captura de pantalla:
Eso es todo, usted debe ser capaz de utilizar Google Font en WordPress ahora, y ver cómo se ve directamente en el editor de WordPress.
Si estás buscando una implementación más simple de Google Fonts en WordPress (sin previsualizarla en el Editor), puedes consultar mi otro artículo cómo añadir Google Fonts localmente a WordPress.
