Cómo agregar fuentes personalizadas en WordPress

¬ŅQuieres agregar fuentes personalizadas de WordPress? Las fuentes personalizadas le permiten usar una buena combinaci√≥n de diferentes fuentes en su sitio para mejorar la tipograf√≠a y la experiencia del usuario.

Las fuentes personalizadas no solo se ven geniales, también pueden mejorar la legibilidad, crear una imagen de marca y aumentar el tiempo que los usuarios pasan en su sitio.

En este artículo, le mostraremos cómo agregar fuentes personalizadas en WordPress utilizando el método de fuente de Google, TypeKit y CSS3 @ Font-Face.

  

nota: Cargar demasiadas fuentes puede ralentizar su sitio. Recomendamos elegir dos fuentes y usarlas en su sitio. También le mostramos cómo cargarlos correctamente sin ralentizar su sitio.

Antes de ver cómo agregar fuentes personalizadas en WordPress, veamos las fuentes personalizadas que puede usar.

Cómo encontrar fuentes personalizadas para WordPress

Los pozos eran anteriormente caros, pero ya no. Hay muchos lugares donde puedes encontrar increíbles fuentes web gratuitas como Google Font, Typekit, FontSquirrel y fonts.com.

Si no sabe c√≥mo mezclar y combinar fuentes, pruebe Font Pair. Ayuda a los dise√Īadores a combinar hermosas fuentes de Google.

Al elegir sus fuentes, recuerde que usar demasiadas fuentes personalizadas ralentizar√° su sitio. Por esta raz√≥n, elija dos fuentes y √ļselas en todo el dise√Īo. Esto tambi√©n aporta consistencia a su dise√Īo.

Video tutorial

Suscríbase a WPBeginner

Si no le gusta el video o prefiere las instrucciones escritas, siga leyendo.

Agregue fuentes personalizadas de WordPress de las fuentes de Google

Explore 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: Agregue fuentes personalizadas con el complemento Google Easy Fonts

Para agregar y usar fuentes de Google en su sitio, este método es, con mucho, el más fácil y recomendado para principiantes.

Primero, instale y habilite el complemento Easy Google Fonts. Para obtener más información, consulte nuestra guía paso a paso para instalar un complemento de WordPress.

Despu√©s de la activaci√≥n puedes ir Apariencia ¬ĽPersonalizador Lado. Esto abre la interfaz de usuario para personalizar los temas, donde puede ver la nueva secci√≥n Estilo.

Tipografía de personalizador

Cuando hace clic en estilo, ve diferentes áreas de su sitio donde puede usar las fuentes de Google. Simplemente haga clic en "Editar fuente" en la sección que desea editar.

Configuraciones de estilo

En la secci√≥n Familia de fuentes, puede seleccionar cualquier fuente de Google que desee usar en su sitio. Tambi√©n puede elegir fuente, tama√Īo de fuente, relleno, margen y m√°s.

Dependiendo de su tema, el n√ļmero de secciones aqu√≠ puede ser limitado, y es posible que no pueda cambiar directamente la selecci√≥n de fuente para muchas √°reas diferentes de su sitio.

Para solucionar esto, también puede usar el complemento para crear sus propios controles y usarlos para cambiar las fuentes en su sitio.

Primero, visita Configuraci√≥n ¬ĽFuentes de Google P√°gina e ingrese un nombre para sus controles de fuente. Use algo para comprender r√°pidamente d√≥nde desea usar este control de origen.

Control de código fuente

Luego haga clic en el botón "Crear verificación de fuente" y 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 el área específica que desea cambiar.

Agregar votantes CSS

Ahora haga clic en el botón "Guardar verificación de código fuente" para guardar su configuración. Puede crear tantos controladores de fuente como necesite para diferentes áreas de su sitio.

Para usar estos controladores de fuente, debe ir Apariencia ¬ĽPersonalizador y haga clic en la pesta√Īa Estilo.

En Tipografía, ahora también verá la opción "Tipografía temática". Cuando hace clic en él, aparece la fuente personalizada que creó anteriormente. Ahora puede hacer clic en el botón Editar para seleccionar las fuentes y la apariencia de este control.

Posibilidad 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 las fuentes de Google a WordPress manualmente

Este m√©todo requiere que agregue c√≥digo a sus archivos de tema de WordPress. Si a√ļn no lo ha hecho, consulte nuestra gu√≠a para 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 para un uso rápido debajo de la fuente.

Elige las fuentes que quieres usar

La página Fuentes enumera los estilos disponibles para esta 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.

Descargue el enlace para incrustar la fuente

Luego vaya a la pesta√Īa Incrustar en la barra lateral para copiar el c√≥digo incrustado.

Hay dos formas de agregar este código a su sitio de WordPress.

Primero, simplemente puede editar el archivo header.php en su tema y pegar el código por adelantado

Día.

Sin embargo, si no está familiarizado con la edición de código en WordPress, puede agregar este código usando un complemento.

Simplemente instale y habilite el complemento "Insertar encabezados y pies de página". Para obtener más información, consulte nuestra guía paso a paso para instalar un complemento de WordPress.

Despu√©s de la activaci√≥n, vaya a Configuraci√≥n ¬ĽInsertar encabezados y pies de p√°gina Pagina y pega el c√≥digo de inserci√≥n en el campo "Scripts en el encabezado".

Agregue código fuente a su sitio de WordPress

No olvide hacer clic en el botón Guardar para guardar sus cambios. El complemento ahora carga el código de inserción de Google Font en cada página de su sitio.

Puede usar esta fuente en la hoja de estilo de su tema de la siguiente manera:

.h1 site-title { 
 font-family: 'Open Sans', Arial, sans-serif; 
 }
 

Para obtener instrucciones más detalladas, consulte nuestra guía para agregar fuentes de Google a los temas de WordPress.

Agregue fuentes personalizadas de WordPress con Typekit

Fuentes de Adobe Typekit

Adobe Fonts Typekit es otro recurso gratuito y premium para excelentes fuentes que puede usar en sus proyectos de dise√Īo. Tiene una suscripci√≥n paga y un plan gratuito limitado que puede usar.

Simplemente regístrese para obtener una cuenta de Adobe Font y vaya a la sección Font Font. Desde aquí, haga clic en el botón para seleccionar una fuente y crear un proyecto.

Agregar fuentes de kit de tipos a un proyecto

A continuación, verá el código de inserción con su ID de proyecto. También aprenderá a usar la fuente en CSS para su tema.

Necesita copiar y pegar este código en

Sección de su sitio.

Integrar código en fuentes Typekit

Hay dos formas de agregar este código a su sitio de WordPress.

Primero, simplemente puede editar el archivo header.php en su tema y pegar el código por adelantado

Día.

Sin embargo, si no está familiarizado con la edición de código en WordPress, puede agregar este código usando un complemento.

Simplemente instale y habilite el complemento "Insertar encabezados y pies de p√°gina".

Despu√©s de la activaci√≥n, vaya a Configuraci√≥n ¬ĽInsertar encabezados y pies de p√°gina Pagina y pega el c√≥digo de inserci√≥n en el campo "Scripts en el encabezado".

Agregue Adobe Fonts Typekit a WordPress

Ahora puede usar la fuente Typekit que eligi√≥ en su hoja de estilo de dise√Īo de WordPress de la siguiente manera:

h1 .site-title { 
 font-family: gilbert, sans-serif;
 } 
 

Para obtener instrucciones más detalladas, consulte nuestro tutorial sobre cómo agregar excelentes fuentes en WordPress con Typekit.

Agregue fuentes personalizadas de WordPress con CSS3 @ font-face

La forma más directa de agregar fuentes personalizadas en WordPress es agregar las fuentes usando el método CSS3 @ font-face. Este método le permite usar cualquier fuente que desee en su sitio.

Primero, descargue la fuente deseada en un formato web. Si no tiene el formato web para su fuente, puede convertirlo usando el generador de fuentes web FontSquirrel.

Una vez que tenga los archivos de fuentes web, c√°rguelos en su servidor de alojamiento de WordPress.

El mejor lugar para cargar las fuentes es en una nueva carpeta de fuentes en su tema o biblioteca secundaria.

Puede usar FTP o administración de archivos desde su cPanel para cargar la fuente.

Después de cargar la fuente, cárguela en la hoja de estilo para su tema usando la siguiente regla de fuente CSS3 @:

@font-face {
 	font-family: Arvo;  
 	src: url(https://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);  
 	font-weight: normal;  
 }
 

No olvide reemplazar la familia de fuentes y la URL con la suya.

Luego puede usar esta fuente en cualquier lugar de la hoja de estilo de su tema de la siguiente manera:

.h1 site-title { 
 font-family: "Arvo", Arial, sans-serif; 
 }
 

Cargar fuentes directamente con CSS3 @ font-face no siempre es la mejor solución. Si está utilizando una fuente de Google o una fuente Typekit, es mejor especificar la fuente directamente desde su servidor para obtener el mejor rendimiento.

Esperamos que este art√≠culo te haya ayudado a agregar fuentes personalizadas de WordPress. Tambi√©n puede leer nuestra gu√≠a sobre el uso de fuentes de s√≠mbolos en WordPress y cambiar el tama√Īo de fuente en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook.