¿Quieres agregar fuentes personalizadas en WordPress? Las fuentes personalizadas le permiten usar una hermosa combinación de diferentes fuentes en su sitio web para mejorar la tipografía y la experiencia del usuario.
Además de verse bien, las fuentes personalizadas también pueden ayudarlo a mejorar la legibilidad, crear una imagen de marca y aumentar el tiempo que los usuarios pasan en su sitio web.
En este artículo, le mostraremos cómo agregar fuentes personalizadas en WordPress usando Google Fonts, TypeKit y el método CSS3 @ Font-Face.
Nota: Cargar demasiadas fuentes puede ralentizar su sitio web. Recomendamos elegir dos fuentes y utilizarlas en su sitio web. También le mostraremos cómo cargarlos correctamente sin ralentizar su sitio web.
Antes de ver cómo agregar fuentes personalizadas en WordPress, echemos un vistazo para encontrar fuentes personalizadas que pueda usar.
Cómo encontrar fuentes personalizadas para usar en WordPress
Las fuentes solían ser caras, pero ya no. Hay muchos lugares para encontrar excelentes fuentes web gratuitas como Google Fonts, Typekit, FontSquirrel y fonts.com.
Si no sabe cómo mezclar y combinar fuentes, intente Font Pair. Ayuda a los diseñadores a combinar hermosas fuentes de Google.
Cuando elija sus fuentes, recuerde que usar demasiadas fuentes personalizadas ralentizará su sitio web. Es por eso que debe seleccionar dos fuentes y usarlas en todo su diseño. Esto también traerá consistencia a su diseño.
Video Tutorial
Suscríbase a WPBeginner
Si no le gusta el video o prefiere la guía escrita, continúe leyendo.
Agregar fuentes personalizadas en WordPress desde fuentes de Google
Google Fonts es la biblioteca de fuentes más grande, gratuita y más utilizada entre los desarrolladores de sitios web. Hay varias formas de agregar y usar fuentes de Google en WordPress.
Método 1: agregar fuentes personalizadas con el complemento Easy Fonts de Google
Si desea agregar y usar Google Fonts en su sitio web, este método es, con mucho, el más fácil y recomendado para principiantes.
Lo primero que debe hacer es instalar y activar el complemento Easy Google Fonts. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Tras la activación, puede ir a Apariencia »Personalizador página. Esto abrirá la interfaz del personalizador de temas en vivo, donde verá la nueva sección Tipografía.
Al hacer clic en Tipografía, verá diferentes secciones de su sitio web donde puede aplicar fuentes de Google. Simplemente haga clic en “Editar fuente” debajo de la sección que desea editar.
En la sección de familia de fuentes, puede elegir cualquier fuente de Google que desee usar en su sitio web. También puede elegir el estilo de fuente, el tamaño de fuente, el relleno, el margen y más.
Dependiendo de su tema, el número de secciones aquí podría ser limitado y es posible que no pueda cambiar directamente la selección de fuente para muchas áreas diferentes de su sitio web.
Para solucionar esto, el complemento también le permite crear sus propios controles y usarlos para cambiar las fuentes en su sitio web.
Primero, necesitas visitar Configuración »Fuentes de Google página y proporcione un nombre para su control de fuente. Use algo que lo ayude a comprender rápidamente dónde utilizará este control de fuente.
A continuación, haga clic en el botón “Crear control de fuente” y luego se le pedirá que ingrese los selectores CSS.
Puede agregar elementos HTML que desee apuntar (por ejemplo, h1, h2, p, blockquote) o usar clases CSS.
Puede usar la herramienta Inspeccionar en su navegador para averiguar qué clases de CSS utiliza el área particular que desea cambiar.
Ahora haga clic en el botón “Guardar control de fuente” para almacenar su configuración. Puede crear tantos controladores de fuente como necesite para diferentes secciones de su sitio web.
Para usar estos controladores de fuente, debe dirigirse a Apariencia »Personalizador y haga clic en la pestaña Tipografía.
En Tipografía, ahora también verá la opción “Tipografía temática”. Al hacer clic en él, se mostrarán los controles de fuente personalizados que creó anteriormente. Ahora puede hacer clic en el botón editar para seleccionar las fuentes y la apariencia de este control.
No olvide hacer clic en el botón guardar o publicar para guardar sus cambios.
Método 2: Agregue manualmente fuentes de Google en WordPress
Este método requiere que agregue código a sus archivos de tema de WordPress. Si no ha hecho esto antes, consulte nuestra guía sobre cómo copiar y pegar código en WordPress.
Primero, visite la biblioteca de fuentes de Google y seleccione la fuente que desea usar. Luego, haga clic en el botón de uso rápido debajo de la fuente.
En la página de fuentes, verá los estilos disponibles para esa fuente. Seleccione los estilos que desea usar en su proyecto y luego haga clic en el botón de la barra lateral en la parte superior.
A continuación, deberá cambiar a la pestaña “Incrustar” en la barra lateral para copiar el código de inserción.
Hay dos formas de agregar este código a su sitio de WordPress.
Primero, simplemente puede editar el archivo header.php de su tema y pegar el código antes de
etiqueta.
Sin embargo, si no está familiarizado con la edición de código en WordPress, puede usar un complemento para agregar este código.
Simplemente instale y active el complemento Insertar encabezados y pies de página. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Tras la activación, vaya a Configuración »Insertar encabezados y pies de página página y pegue el código de inserción en el cuadro “Scripts en el encabezado”.
No olvides hacer clic en el botón Guardar para guardar tus cambios. El complemento ahora comenzará a cargar el código de inserción de Google Font en todas las páginas de su sitio web.
Puede usar esta fuente en la hoja de estilo de su tema de esta manera:
.h1 site-title {
font-family: 'Open Sans', Arial, sans-serif;
}
Para obtener instrucciones más detalladas, consulte nuestra guía sobre cómo agregar fuentes de Google en los temas de WordPress.
Agregar fuentes personalizadas en WordPress usando Typekit
Typekit de Adobe Fonts es otro recurso gratuito y premium para fuentes increíbles que puedes usar en tus proyectos de diseño. Tienen una suscripción paga, así como un plan gratuito limitado que puedes usar.
Simplemente regístrese para obtener una cuenta de Adobe Fonts y visite la sección de búsqueda de fuentes. Desde aquí debes hacer clic en el > botón para seleccionar una fuente y crear un proyecto.
A continuación, verá el código de inserción con su ID de proyecto. También le mostrará cómo usar la fuente en el CSS de su tema.
Debe copiar y pegar este código dentro del
sección de su sitio web.
Hay dos formas de agregar este código a su sitio de WordPress.
Primero, simplemente puede editar el archivo header.php de su tema y pegar el código antes de
etiqueta.
Sin embargo, si no está familiarizado con la edición de código en WordPress, puede usar un complemento para agregar este código.
Simplemente instale y active el complemento Insertar encabezados y pies de página.
Tras la activación, vaya a Configuración »Insertar encabezados y pies de página página y pegue el código de inserción en el cuadro “Scripts en el encabezado”.
Eso es todo, ahora puede usar la fuente Typekit que seleccionó en la hoja de estilo de su tema de WordPress de esta manera:
h1 .site-title {
font-family: gilbert, sans-serif;
}
Para obtener instrucciones más detalladas, consulte nuestro tutorial sobre cómo agregar una tipografía increíble en WordPress usando Typekit.
Agregar fuentes personalizadas en WordPress usando CSS3 @ font-face
La forma más directa de agregar fuentes personalizadas en WordPress es agregando las fuentes usando el método CSS3 @ font-face. Este método le permite usar cualquier fuente que desee en su sitio web.
Lo primero que debe hacer es descargar la fuente que desee en un formato web. Si no tiene el formato web para su fuente, puede convertirlo usando el generador FontSquirrel Webfont.
Una vez que tenga los archivos de fuente web, deberá cargarlos en su servidor de alojamiento de WordPress.
El mejor lugar para cargar las fuentes es dentro de una nueva carpeta de “fuentes” en el directorio de su tema o tema secundario.
Puede usar FTP o File Manager de su cPanel para cargar la fuente.
Una vez que haya subido la fuente, debe cargar la fuente en la hoja de estilo de su tema usando la regla CSS3 @ font-face como esta:
@font-face {
font-family: Arvo;
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
No olvides reemplazar la familia de fuentes y la URL por la tuya.
Después de eso, puede usar esa fuente en cualquier lugar de la hoja de estilo de su tema de esta manera:
.h1 site-title {
font-family: "Arvo", Arial, sans-serif;
}
Cargar fuentes directamente usando CSS3 @ font-face no siempre es la mejor solución. Si está utilizando una fuente de Google Fonts o Typekit, entonces es mejor servir la fuente directamente desde su servidor para un rendimiento óptimo.
Eso es todo, esperamos que este artículo te haya ayudado a agregar fuentes personalizadas en WordPress. También puede consultar nuestra guía sobre cómo usar fuentes de iconos en WordPress y cómo cambiar el tamaño de fuente en WordPress.
Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver videos tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.
