En este artículo de ayuda de WordPress, lo guiaré paso a paso a través del proceso de agregar fuentes personalizadas a sus temas de bloque de WordPress. Esto significa que puede agregar CUALQUIER fuente a CUALQUIER tema, como agregar Google Fonts al tema Twenty Twenty Three.

Puede ver el video tutorial a continuación, o saltearlo y leer el artículo (que está disponible en varios idiomas usando las funciones de traducción en esta página). 

Le muestro cómo realizar esta tarea utilizando el complemento Create Block Theme desarrollado directamente por el equipo de desarrolladores de WordPress. Esto hace que el complemento sea ultraligero, de alto rendimiento y muy fácil de usar con temas de bloques. También le muestro cómo resolver un problema de permisos común que puede ocurrir al trabajar con este complemento.

Con este método, puede vincular fuentes (es decir, vincular fuentes de Google) o incrustar fuentes localmente en su sitio (para un mejor rendimiento del sitio). ¡Entremos en ello!

Índice del contenido

1. Instale el complemento "Crear tema de bloque"

Para empezar, querrá iniciar sesión en su área de administración de WordPress, que lo llevará al Panel de control. Desde allí, vaya a Complementos> Agregar nuevo desde la navegación principal (flecha roja en la imagen de arriba).

Busque el complemento "Crear tema de bloque" usando la barra de búsqueda en la esquina superior derecha (resaltado en verde en la foto de arriba). Una vez que se muestra el complemento Crear tema de bloque, haga clic en el botón "Instalar ahora" para instalarlo en su sitio (flecha roja).

A continuación, haga clic en el botón "Activar" para activar el complemento.

WordPress simplificado: curso sobre cómo crear sitios web potentes por Davies Media Design

2. Deshabilitar complemento de seguridad (temporalmente)

Para que el resto de este proceso funcione sin problemas, deberá deshabilitar temporalmente cualquier complemento de seguridad que haya instalado y que bloquee la capacidad de los usuarios para editar temas o complementos.

En mi caso particular estoy usando el complemento SG Security (que viene con todos los sitios web de WordPress alojado a través de Siteground, un host que recomiendo encarecidamente). Sé con certeza que este complemento interfiere con el proceso de agregar fuentes personalizadas, por lo que desactivaré la configuración que interfiere.

En este caso, navegaré a la sección "Seguridad del sitio" del complemento SG Security usando la navegación principal (flecha roja en la imagen de arriba).

A continuación, me desplazaré hacia abajo hasta la opción denominada "Desactivar editor de temas y complementos" (resaltada en verde en la imagen de arriba). Verá un interruptor a la derecha de esta opción: haga clic en el interruptor para desactivar esta función (flecha roja). Debería ver un mensaje emergente de "Éxito" en la flecha azul de la esquina derecha).

Con nuestro complemento de seguridad deshabilitado temporalmente, podemos pasar al siguiente paso de seleccionar y cargar las fuentes que queremos usar en nuestro sitio.

Hay dos opciones para usar fuentes personalizadas en WordPress.

3. Seleccione Fuentes personalizadas para WordPress (Fuentes de Google vinculadas)

La primera opción es enlazar fuentes en un sitio de terceros, Google Fonts. Esta opción es más simple y lleva menos tiempo configurarla, pero ralentiza la velocidad de carga de la página de su sitio web. También lo limita a las fuentes disponibles en Google Fonts (aunque Google ofrece toneladas de fuentes excelentes y gratuitas). Si eres menos experto en tecnología y no te importa usar Google Fonts, te recomiendo esta opción.

Para empezar, vaya a "Apariencia>Administrar fuentes de tema" desde la navegación principal (flecha roja en la imagen de arriba).

En el área de trabajo "Administrar fuentes de temas", verá todas las fuentes predeterminadas actualmente instaladas en WordPress (resaltadas en verde en la imagen de arriba). Sus fuentes también se enumeran a lo largo del lado derecho del área de trabajo, junto con las diferentes variaciones de cada fuente y tamaño de archivo para cada variación de fuente (resaltadas en azul).

Para agregar una nueva fuente a su tema, haga clic en el botón "Agregar fuente de Google" (flecha roja).

Haga clic en el menú desplegable "Seleccionar fuente" y busque la fuente de Google que desea agregar a su sitio (las fuentes están en orden alfabético). Si no está seguro de cómo se ve cada fuente, le recomiendo navegar por el sitio web de Google Fonts para explorar fuentes y probarlas. Una vez que haya encontrado la fuente que desea usar, selecciónela del menú desplegable (flecha azul).

Ahora verá una lista de todas las variantes disponibles que puede instalar en su tema para esa fuente. Puede marcar la casilla junto a las variantes individuales o hacer clic en la casilla de verificación superior (flecha roja en la imagen de arriba) para seleccionar todas las variantes. Verá una lista de sus variantes seleccionadas, junto con su tamaño de archivo, en el lado derecho de la pantalla. Una vez que esté listo, haga clic en "Agregar fuentes de Google a su tema" (flecha verde).

Ahora debería ver un mensaje en la parte superior del área de trabajo que indica que la fuente se instaló en su tema (en este caso, en el tema Veinticuatro). Luego puede hacer clic en el enlace "Administrar fuentes" dentro del cuadro de mensaje de éxito, o hacer clic en la pequeña flecha hacia atrás (flecha roja en la imagen de arriba) para volver al área de trabajo "Administrar fuentes de temas".

Ahora verá su familia de fuentes recién instalada en la lista con el resto de las fuentes de su tema (flecha roja en la imagen de arriba). También verá su familia de fuentes y todas sus variaciones de fuentes asociadas en el lado derecho del área de trabajo (resaltado en verde).

4. Incrustar fuentes personalizadas para WordPress (Fuentes locales para un mejor SEO)

La segunda opción para agregar fuentes a su sitio web de WordPress es "incrustar" o "alojar localmente" sus fuentes. En otras palabras, sus archivos de fuentes se ubicarán dentro del mismo servidor web que aloja su sitio web.

El beneficio de este método es que no requiere recuperar fuentes de un dominio de terceros. Como resultado, sus fuentes se cargan más rápido y, por lo tanto, su página web se carga más rápido. Las páginas web que se cargan más rápido son mejores para la experiencia del usuario, lo que significa que pueden ayudar a que su sitio se clasifique más alto en los motores de búsqueda y obtenga más tráfico.

En otras palabras, las fuentes incrustadas son mejores para SEO (optimización de motores de búsqueda).

Si bien este método requiere un par de pasos adicionales, sigue siendo bastante fácil y utiliza el mismo complemento que instalamos anteriormente (complemento Create Block Themes).

Para instalar sus fuentes localmente, comience navegando a Apariencia> Administrar fuentes de tema desde la navegación principal (si aún no está allí desde el último paso, flecha azul en la imagen de arriba). A continuación, haga clic en el botón "Agregar fuente local" en la esquina superior derecha del área de trabajo (flecha roja).

Accederá al área de "Fuentes locales", donde puede seleccionar un archivo de su computadora para cargarlo en su tema. Debajo del botón "Elegir archivo", verá una lista de los formatos de archivo de fuentes admitidos. Puede obtener estos formatos de cualquier sitio web de fuentes de confianza, incluido Google Fonts.

Encuentre y descargue la fuente que elija de Google Fonts

Saltaré a Google Fonts y usaré la barra de búsqueda (flecha roja) para buscar la fuente que quiero, en este caso, la fuente "Catamaran". Una vez que la fuente aparezca en los resultados, haré clic en ella para ver la página de la fuente (flecha verde).

A continuación, haré clic en el botón "Descargar familia" para descargar esta fuente y todas sus variaciones en mi computadora. Puede desplazarse hacia abajo en la página de la fuente si desea ver todas las variaciones disponibles para esta fuente.

Haga clic en "Guardar" para guardar el archivo zip de la fuente en su computadora.

Descomprima su carpeta de fuentes para acceder a los archivos de fuentes

Una vez finalizada la descarga, haga clic en la flecha junto a la descarga finalizada (flecha roja) y haga clic en "Mostrar en la carpeta" (flecha verde).

Haga clic derecho en el archivo zip en su explorador de archivos y haga clic en "Extraer todo".

Aparecerá una ventana emergente que le mostrará dónde se extraen las fuentes (flecha roja). Puede cambiar esta ubicación si lo desea; de lo contrario, haga clic en el botón "Extraer" (flecha verde). Esto descomprimirá la carpeta y creará un nuevo archivo en su computadora con todos los archivos de fuentes descomprimidos. Esta carpeta debería abrirse automáticamente.

Si descargó archivos de fuentes usando Google Fonts, ingrese a la carpeta etiquetada como "estática" para ver todos sus archivos de fuentes. De lo contrario, simplemente busque cualquier archivo que sea OTF, TTF, WOFF o WOFF2.

Dentro de esta carpeta "estática", verá una lista de todas las variaciones de fuente que descargamos para la fuente Catamaran de Google Fonts. Hay 9 variaciones en total, y podemos subirlas todas a nuestro sitio web o solo las variaciones que queremos/necesitamos. Haga clic en la ubicación de la carpeta en el explorador de archivos (flecha verde), luego haga clic con el botón derecho y seleccione "Copiar".

Sube tus fuentes personalizadas a WordPress

Vuelva a WordPress, donde tiene abierta el área de trabajo "Fuentes locales". Haga clic en el botón "Elegir archivo" (flecha roja en la imagen de arriba) para seleccionar sus fuentes. Puede navegar manualmente a la ubicación en su computadora donde se almacenan sus fuentes. O simplemente haga clic en la barra de direcciones del explorador de archivos (flecha azul), elimine la dirección que está allí actualmente, luego haga clic con el botón derecho y seleccione "Pegar" (flecha verde). Esto pegará la dirección que copiaste en el paso anterior. Presiona la tecla Intro y serás llevado a la carpeta con tus fuentes.

Tienes que subir tus variaciones de fuente una a la vez. Para este ejemplo, simplemente subiré la variación de fuente "Catamaran-Regular" haciendo clic en ella (flecha verde), luego haciendo clic en el botón "Abrir" (flecha roja).

Ahora debería ver información para el "NOMBRE DE LA FUENTE", "ESTILO DE LA FUENTE" y "PESO DE LA FUENTE", así como una vista previa de la fuente en el lado derecho. Haga clic en "Cargar fuente a su tema" (flecha roja) para cargar la variación de fuente.

Ver las fuentes de su tema personalizado

Ahora debería ver un mensaje de éxito en la parte superior del área de trabajo (resaltado en verde en la imagen de arriba). ¡Felicitaciones, su fuente personalizada ahora está cargada en su tema como una fuente local! Puede continuar haciendo clic en "Elegir archivo" y cargar tantas variaciones de fuente como desee.

Una vez que haya terminado, haga clic en el enlace "Administrar fuentes" dentro del cuadro de mensaje de éxito o en la flecha hacia atrás (indicada por la flecha roja) para volver al área de trabajo Administrar fuentes del tema.

Ahora verá la nueva familia de fuentes "Catamaran" en la lista con el resto de las familias de fuentes de su tema (flecha roja). Además, verá la familia de fuentes y cualquier variación que haya instalado en el lado derecho de la ventana Administrar fuentes del tema (resaltado en verde).

5. Cambie las fuentes de su tema a sus fuentes personalizadas

Ahora que tiene sus nuevas fuentes instaladas, ¡es hora de la parte divertida!

Para cambiar las fuentes de su tema a sus fuentes personalizadas, navegue hasta el Editor del sitio yendo a Apariencia>Editor (flecha roja en la imagen de arriba).

Haga clic en cualquier lugar dentro del área de contenido principal (flecha roja) del Editor del sitio para que aparezcan los controles.

En el menú superior, haga clic en el icono "Estilos" (flecha azul). Luego, haga clic en "Tipografía" (flecha roja).

En "Elementos" puede cambiar la fuente del texto, los enlaces, los encabezados o los botones. Seleccionaré la opción "Títulos" para este ejemplo.

Ahora verá un menú desplegable en "Tipografía" donde puede seleccionar cualquiera de las fuentes de su tema (flecha roja). Puede ver que las fuentes "Neuton" y "Catamaran" que agregué para este tutorial se enumeran aquí. Seleccionaré "Neuton" para la fuente de mi título.

Haga clic en el botón "Guardar" en la esquina superior derecha para guardar los cambios.

Haga clic en "Guardar" una vez más (flecha roja) y su fuente personalizada ahora se guardará para todos los encabezados de su sitio.

A continuación, puede hacer clic en el enlace Ver>Ver sitio en la esquina superior derecha del editor del sitio (flechas rojas en la foto de arriba) para ver cómo se ve su sitio web con su nueva fuente. Regrese al Editor del sitio y repita este proceso para cualquier otro elemento cuya fuente desee personalizar.

Para volver al área de administración de WordPress, haga clic en el logotipo en la esquina superior izquierda del editor del sitio (flecha verde), luego haga clic en el logotipo nuevamente.

6. Cómo eliminar fuentes personalizadas de WordPress

Para eliminar cualquiera de sus fuentes personalizadas, comience navegando de regreso a Apariencia> Administrar fuentes de tema.

Puede eliminar toda la familia de fuentes pasando el mouse sobre el lado derecho del nombre de la familia de fuentes y haciendo clic en el icono de la papelera que aparece (flecha azul). O pase el mouse sobre las variaciones de fuente individuales y haga clic en el icono de la papelera (las variaciones de fuente se encuentran dentro del área resaltada en verde). También puede hacer clic en el enlace "Eliminar familia de fuentes" para eliminar cualquier familia de fuentes (flecha morada).

Eso es todo por este tutorial! Si te gustó, puedes ver mi otro Artículos de ayuda de WordPress o inscríbete en mi Clase magistral de WordPress en Udemy.

Boletín informativo por correo electrónico de aplicaciones creativas gratuitas de Davies Media Design

Suscríbase al boletín de DMD

¡Regístrese para recibir nuevos tutoriales, actualizaciones de cursos y las últimas noticias sobre sus aplicaciones creativas gratuitas favoritas!

¡Te has suscripto satisfactoriamente!

El pin en Pinterest