¿Quieres añadir fuentes personalizadas en WordPress? Las fuentes personalizadas te permiten usar una hermosa combinación de diferentes fuentes en tu sitio web para mejorar la tipografía y la experiencia del usuario.
Además de tener un buen aspecto, las fuentes personalizadas también pueden ayudarle 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, te mostraremos cómo añadir fuentes personalizadas en WordPress usando Google Fonts, TypeKit y el método CSS3 @Font-Face.
Nota: Cargar demasiadas fuentes puede ralentizar tu sitio web. Recomendamos que elijas dos fuentes y las utilices en tu sitio web. También te mostraremos cómo cargarlas correctamente sin ralentizar tu sitio web.
Antes de ver cómo agregar fuentes personalizadas en WordPress, veamos cómo encontrar fuentes personalizadas que puedas usar.
Cómo encontrar fuentes personalizadas para usar en WordPress
Las fuentes solían ser caras, pero ya no. Hay muchos lugares donde encontrar grandes fuentes web gratuitas como Google Fonts, Typekit, FontSquirrel, y fonts.com.
Si no sabes cómo mezclar y combinar las fuentes, entonces prueba con Pareja de fuentes. Ayuda a los diseñadores a emparejar las hermosas fuentes de Google.
Mientras escoge las fuentes, recuerde que si usa demasiadas fuentes personalizadas, su sitio web será más lento. Por eso debes seleccionar dos fuentes y utilizarlas en todo tu diseño. Esto también aportará consistencia a su diseño.
Video Tutorial
Suscríbase a WPBeginner
Si no te gusta el video o prefieres la guía escrita, entonces por favor sigue leyendo.
Añadir 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 añadir y utilizar las fuentes de Google en WordPress.
Método 1: Añadir fuentes personalizadas usando el plugin de fuentes de Google
Si quieres añadir y usar las fuentes de Google en tu sitio web, entonces este método es de lejos el más fácil y recomendado para los principiantes.
Lo primero que tienes que hacer es instalar y activar el plugin Easy Google Fonts. Para obtener más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activada, puedes ir a la página de Apariencia » Personalizador . Esto abrirá la interfaz del personalizador del tema en vivo donde verás la nueva sección de Tipografía.
Al hacer clic en Tipografía, se mostrarán diferentes secciones de su sitio web donde podrá aplicar las fuentes de Google. Simplemente haz clic en «Editar fuente» debajo de la sección que quieras editar.
En la sección de la familia de fuentes, puedes elegir cualquier fuente de Google que quieras usar en tu sitio web. También puedes elegir el estilo y el tamaño de la fuente, el relleno y el margen, entre otras cosas.
Dependiendo del tema, el número de secciones aquí podría ser limitado y es posible que no pueda cambiar directamente la selección de fuentes para muchas áreas diferentes de su sitio web.
Para solucionar esto, el plugin también te permite crear tus propios controles y usarlos para cambiar las fuentes de tu sitio web.
Primero, debes visitar la página de configuración de » Fuentes de Google y proporcionar un nombre para tu control de fuentes. Utiliza algo que te ayude a entender rápidamente dónde vas a utilizar este control de fuentes.
A continuación, haz clic en el botón «Crear control de fuentes» y se te pedirá que introduzcas los selectores CSS.
Puedes añadir los elementos HTML que desees (por ejemplo, h1, h2, p, blockquote) o utilizar las clases CSS.
Puedes usar la herramienta Inspeccionar en tu navegador para saber qué clases de CSS son usadas por el área particular que quieres cambiar.
Ahora haz clic en el botón «Guardar el control de la fuente» para guardar la configuración. Puedes crear tantos controladores de fuentes como necesites para las diferentes secciones de tu sitio web.
Para usar estos controladores de fuentes, debes dirigirte a Apariencia » Personalizador y hacer clic en la pestaña Tipografía.
En la sección de Tipografía, ahora también verás una opción de «Tipografía temática». Al hacer clic en ella, se mostrarán los controles de fuente personalizados que creaste anteriormente. Ahora sólo tienes que hacer clic en el botón de edición para seleccionar las fuentes y el aspecto de este control.
No olvides hacer clic en el botón de guardar o publicar para guardar los cambios.
Método 2: Añadir manualmente fuentes de Google en WordPress
Este método requiere que añadas código a tus archivos de temas de WordPress. Si no lo has hecho antes, entonces consulta nuestra guía sobre cómo copiar y pegar código en WordPress.
Primero, visita la biblioteca de fuentes de Google y selecciona una fuente que quieras usar. A continuación, haz clic en el botón de uso rápido que se encuentra debajo de la fuente.
En la página de fuentes, verás los estilos disponibles para esa fuente. Selecciona los estilos que quieres usar en tu proyecto y luego haz clic en el botón de la barra lateral en la parte superior.
A continuación, tendrá que cambiar a la pestaña «Incrustar» en la barra lateral para copiar el código de incrustación.
Hay dos formas de añadir este código a tu sitio de WordPress.
Primero, puedes simplemente editar el archivo header.php de tu tema y pegar el código antes de la etiqueta.
Sin embargo, si no estás familiarizado con la edición de código en WordPress, puedes usar un plugin para añadir este código.
Simplemente instale y active el plugin Insert Headers and Footers. Para obtener más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Al activarse, vaya a la página de configuración » Insertar encabezados y pies de página y pegue el código de incrustación en el cuadro «Scripts en el encabezado».
No te olvides de hacer clic en el botón Guardar para guardar los cambios. El plugin comenzará a cargar el código de incrustación de Google Font en todas las páginas de su sitio web.
Puedes usar esta fuente en la hoja de estilos de tu tema, así:
123.h1site-title { font-family: $0027Open Sans$0027, Arial, sans-serif; }
Para obtener instrucciones más detalladas, consulta nuestra guía sobre cómo añadir fuentes de Google en los temas de WordPress.
Añadir fuentes personalizadas en WordPress usando el Typekit
Typekit de Adobe Fonts es otro recurso gratuito y de primera calidad para fuentes impresionantes que puede utilizar en sus proyectos de diseño. Tienen una suscripción de pago y un plan gratuito limitado que puede utilizar.
Simplemente regístrate en una cuenta de Adobe Fonts y visita la sección de fuentes de navegación. Desde aquí tienes que hacer clic en el botón para seleccionar una fuente y crear un proyecto.
A continuación, verá el código de incrustación con su identificación de proyecto. También te mostrará cómo usar la fuente en el CSS de tu tema.
Necesitas copiar y pegar este código dentro de la sección de tu página web.
Hay dos formas de añadir este código a tu sitio de WordPress.
Primero, puedes simplemente editar el archivo header.php de tu tema y pegar el código antes de la etiqueta.
Sin embargo, si no estás familiarizado con la edición de código en WordPress, puedes usar un plugin para añadir este código.
Simplemente instale y active el plugin Insert Headers and Footers.
Al activarse, vaya a la página de configuración » Insertar encabezados y pies de página y pegue el código de incrustación en el cuadro «Scripts en el encabezado».
Eso es todo, ahora puedes usar la fuente Typekit que seleccionaste en la hoja de estilos de tu tema de WordPress de esta manera:
123h1.site-title { font-family: gilbert, sans-serif;}
Para obtener instrucciones más detalladas, consulta nuestro tutorial sobre cómo añadir una tipografía impresionante en WordPress utilizando Typekit.
Añadir fuentes personalizadas en WordPress usando CSS3 @font-face
La forma más directa de añadir fuentes personalizadas en WordPress es añadiendo las fuentes usando el método CSS3 @font-face. Este método te permite usar cualquier fuente que te guste en tu sitio web.
Lo primero que tienes que hacer es descargar la fuente que te gusta en un formato web. Si no tienes el formato web para tu fuente, entonces puedes convertirla usando el generador de fuentes FontSquirrel Webfont.
Una vez que tengas los archivos de fuentes web, necesitarás subirlos a tu servidor de alojamiento de WordPress.
El mejor lugar para subir las fuentes es dentro de una nueva carpeta de «fuentes» en el directorio de tu tema o tema infantil.
Puedes usar el FTP o el Administrador de Archivos de tu cPanel para subir la fuente.
Una vez que hayas subido la fuente, debes cargarla en la hoja de estilos de tu tema usando la regla CSS3 @font-face de esta manera:
12345@font-face { font-family: Arvo; src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); font-weight: normal; }
No te olvides de sustituir la familia de fuentes y la URL por la tuya propia.
Después de eso puedes usar esa fuente en cualquier parte de la hoja de estilo de tu tema como esto:
123.h1site-title { font-family: «Arvo», Arial, sans-serif; }
Cargar las fuentes directamente usando CSS3 @font-face no es siempre la mejor solución. Si estás usando 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 añadir fuentes personalizadas en WordPress. También puedes consultar nuestra guía sobre cómo usar fuentes de iconos en WordPress y cómo cambiar el tamaño de la fuente en WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver los video tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.
Deja una respuesta