Cómo agregar fuentes personalizadas en WordPress

¿Quieres agregar fuentes personalizadas en WordPress? Las fuentes personalizadas pueden ayudarlo a refrescar su tema y destacar. En este artículo, le mostraremos cómo agregar fuentes personalizadas en WordPress usando el método Google Fonts, TypeKit y CSS3 @ Font-Face.

El uso de fuentes personalizadas en temas de WordPress se ha convertido en una tendencia común. De hecho, hay algunos temas que están completamente cargados con cientos de fuentes personalizadas. Sin embargo, cargar demasiadas fuentes puede ralentizar su sitio web. Es por eso que le mostraremos cómo cargar correctamente las fuentes personalizadas para que no ralentice su sitio..

Pero antes de ver cómo agregar fuentes personalizadas en WordPress, echemos un vistazo a cómo encontrar fuentes personalizadas..

Cómo encontrar fuentes personalizadas para usar en WordPress

Las fuentes solían ser caras, pero no más. Hay muchos lugares donde encontrar excelentes fuentes web gratuitas, como Google Fonts, Typekit, FontSquirrel y fonts.com..

Si no sabes cómo mezclar y combinar fuentes, prueba con el Par de fuentes. Ayuda a los diseñadores a combinar hermosas fuentes de Google.

Mientras selecciona sus fuentes, recuerde que usar demasiadas fuentes personalizadas reducirá la velocidad de su sitio web. Por esta razón, debe seleccionar dos fuentes y utilizarlas en todo su diseño. Esto también traerá consistencia a su diseño..

Video Tutorial

Si no te gusta el video o necesitas más instrucciones, continúa leyendo.

Agregar fuentes personalizadas en WordPress desde Google Fonts

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 las fuentes de Google en WordPress.

Método 1: Agregar fuentes personalizadas usando el complemento Easy Fonts de Google

Si desea agregar y usar Google Fonts en su sitio web, este método es el más fácil y recomendado para principiantes..

Lo primero que debes 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á una nueva sección de Tipografía.

Al hacer clic en Tipografía, se mostrarán diferentes secciones de su sitio web en las que puede aplicar Google Fonts. Haga clic en 'Editar fuente' debajo de la sección que desea editar.

En la sección de la familia de fuentes, puede elegir cualquier fuente de Google que desee utilizar en su sitio web. También puede elegir el estilo de fuente, tamaño de fuente, relleno, margen y más.

Dependiendo de su tema, la cantidad de secciones aquí puede ser limitada 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 Ajustes »Fuentes de Google página y proporcionar un nombre para su control de fuente. Use algo que le ayude a comprender rápidamente dónde usará este control de fuente.

Haga clic en el botón 'Crear control de fuente' y luego se le pedirá que ingrese los selectores de CSS. Puede agregar elementos HTML que desee segmentar (por ejemplo, h1, h2, p, blockquote) o usar clases CSS. Puede usar la herramienta Inspeccionar para averiguar qué clases de CSS utiliza el área en particular que desea cambiar.

Ahora haga clic en el botón 'Guardar control de fuente' para almacenar sus configuraciones. Puede crear tantos controladores de fuente como necesite para diferentes secciones de su sitio web.

Para utilizar estos controladores de fuente, debe dirigirse a Apariencia »Personalizador y haga clic en la pestaña de tipografía.

En Tipografía, ahora también verá la opción "Tipografía de tema". Al hacer clic en él se mostrarán los controles de fuente personalizados que creó anteriormente. Ahora puede simplemente 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: agregar manualmente fuentes de Google en WordPress

Este método requiere que agregues código a tus archivos de tema de WordPress. Si no lo ha hecho 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. A continuación, haga clic en el botón de uso rápido debajo de la fuente.

Esto lo llevará a otra página en la que se le pedirá que elija los estilos que desea usar. Solo debes seleccionar los estilos que crees que realmente usarás.

Luego, desplácese un poco hacia abajo hasta llegar a la sección de código de inserción. Debe copiar el código de inserción en la pestaña estándar y pegarlo en su tema o en el archivo header.php del tema secundario justo después de la etiqueta.

Eso es todo lo que ha agregado exitosamente una fuente de Google personalizada en su sitio de WordPress.

Puedes usar esta fuente en la hoja de estilos de tu 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 temas de WordPress.

Agregar fuentes personalizadas en WordPress usando Typekit

Typekit es otro recurso gratuito y premium para fuentes impresionantes que puede utilizar en sus proyectos de diseño. Tienen una suscripción de pago, así como un plan de suscripción gratuito limitado que puede utilizar.

Simplemente regístrese para una cuenta de Typekit y cree un nuevo kit.

A continuación, debe seleccionar una fuente de la biblioteca Typekit y agregarla a su kit. Luego, obtenga el código de inserción de su kit y diríjase al área de administración de su sitio de WordPress.

Ahora necesita instalar y activar el complemento Typekit Fonts for WordPress. Tras la activación, simplemente visite Ajustes »Fuentes Typekit y pega el código de inserción en la página de configuración del plugin.

Eso es todo, ahora puede usar la fuente Typekit que seleccionó en la hoja de estilos de su tema de WordPress de la siguiente manera:

 h1 .site-title font-family: 'modesto-condensed', Arial, 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 agregar las fuentes mediante CSS3 @Perfil delantero método. Este método le permite utilizar cualquier fuente que desee en su sitio web.

Lo primero que debes hacer es descargar la fuente que te gusta 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 webfont, deberá subirlos a su servidor de alojamiento web..

El mejor lugar para cargar las fuentes es dentro de una nueva carpeta de "fuentes" en su tema o en el directorio de temas secundarios..

Puede usar FTP o el Administrador de archivos de su cPanel para cargar la fuente.

Una vez que haya cargado la fuente, debe cargarla en la hoja de estilos 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); fuente-peso: normal;  

No olvides reemplazar la familia de fuentes y la URL con la tuya..

Después de eso, puedes usar esa fuente en cualquier parte de la hoja de estilo de tu tema, como esta:

 .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, 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 las fuentes de iconos en WordPress y cómo cambiar el tamaño de fuente en WordPress.

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..