Cómo agregar fuentes personalizadas en WordPress

¬Ņ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.

Agregar fuentes personalizadas en WordPress

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

Vista previa de las 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.

Tipografía de personalizador

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.

Configuraciones de tipografía

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.

Sección de 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.

A√Īadir selectores CSS

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.

Opción de tipografía temática

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.

Seleccione los estilos de fuente que desea usar

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.

Obtenga el enlace para incrustar la fuente

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".

Agregue código de fuente a su sitio de WordPress

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 Adobe Fonts

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.

Agregar fuente typekit a 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.

Código de incrustación de fuente Typekit

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".

Agregar Typekit de Adobe Fonts en WordPress

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(https://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.