¿Quieres agregar fuentes personalizadas en WordPress? Las fuentes personalizadas le permiten utilizar una buena combinación de diferentes fuentes en su sitio web para mejorar la tipografía y la experiencia del usuario. Además de tener un aspecto excelente, las fuentes personalizadas también pueden ayudarlo a mejorar la legibilidad, crear una 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 utilizando el método Google Fonts, TypeKit y CSS3 @ Font-Face.
Notar: Cargar demasiadas fuentes puede ralentizar su sitio web. Le recomendamos que elija dos fuentes y las utilice 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 a la búsqueda de fuentes personalizadas que pueda usar.
Cómo encontrar fuentes personalizadas para usar en WordPress
Contents
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, 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 web. Es por eso que debe seleccionar dos fuentes y utilizarlas en todo su diseño. También aportará consistencia a su diseño.
Video tutorial
Suscríbase a MundoCMS Si no le gusta el video o prefiere la guía escrita, siga leyendo.
Agregar fuentes personalizadas a WordPress desde Google Fonts
Google Fonts es la biblioteca de fuentes más grande, gratuita y más utilizada por los desarrolladores de sitios web. Hay varias formas de agregar y usar Google Fonts en WordPress.
Método 1: agregar fuentes personalizadas mediante el complemento Easy Fonts de Google
Si desea agregar y utilizar Google Fonts en su sitio web, este método es, con mucho, el más fácil y el más 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 acceder Apariencia »Personalizador página. Esto abrirá la interfaz de personalización del tema en vivo donde verá la nueva sección Tipografía.
Al hacer clic en Tipografía, aparecerán diferentes secciones de su sitio web donde puede aplicar Google Fonts. Simplemente haga clic en «Cambiar fuente» en la sección que desea cambiar.
En la sección 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, etc. 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 resolver este problema, el complemento también le permite crear sus propios controles y usarlos para cambiar las fuentes de su sitio web. Primero que nada debes visitar Configuración »Google Fonts página e introduzca un nombre para su control policial. Utilice algo que le ayude a averiguar rápidamente dónde va a utilizar ese control policial.
A continuación, haga clic en el botón ‘Crear control de fuentes’ y luego se le pedirá que ingrese los selectores de CSS. Puede agregar cualquier elemento HTML que desee apuntar (por ejemplo, h1, h2, p, blockquote) o usar clases CSS. Puede utilizar la herramienta Inspeccionar en su navegador para averiguar qué clases de CSS se utilizan en el área particular que desea modificar.
Ahora haga clic en el botón «Guardar control de fuente» para guardar su configuración. Puede crear tantos controladores de fuentes como necesite para diferentes secciones de su sitio web. Para utilizar estos controladores de fuentes, debe dirigirse a Apariencia »Personalizador y haga clic en la pestaña Tipografía. En Tipografía, ahora verá la opción «Tipografía de tema». Haga clic en él para mostrar 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.
Recuerde 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 agregue código a sus 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 una fuente que desee utilizar. Luego haga clic en el botón de uso rápido debajo de la fuente.
En la página Fuentes, verá los estilos disponibles para esa fuente. Seleccione los estilos que desea usar en su proyecto, luego haga clic en el botón de la barra lateral en la parte superior.
Luego, deberá cambiar a la pestaña «Insertar» 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, puede editar el archivo header.php de su tema y pegar el código antes del
No olvide hacer clic en el botón Guardar para guardar sus cambios. El complemento ahora comenzará a cargar el código de inserción de fuentes de Google 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 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 puede usar en sus proyectos de diseño. Tienen una suscripción paga y un plan gratuito limitado que puede usar. Simplemente cree una cuenta de Adobe Fonts y visite la sección Examinar fuentes. Desde allí tienes que hacer clic en el para seleccionar una fuente y crear un proyecto.
Luego 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 en el
Hay dos formas de agregar este código a su sitio de WordPress. Primero, puede editar el archivo header.php de su tema y pegar el código antes del 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. Durante la activación, vaya a Configuración »Insertar encabezados y pies de página y pegue el código de inserción en el cuadro «Secuencias de comandos en el encabezado».
Eso es todo, ahora puede usar la fuente Typekit que seleccionó en la hoja de estilo de su tema de WordPress como esta: h1 .site-title {font-family: gilbert, sans-serif; } Para obtener instrucciones más detalladas, consulte nuestro tutorial sobre cómo agregar una tipografía impresionante 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 usando el método CSS3 @ font-face. Este método le permite utilizar cualquier fuente que desee en su sitio web. Lo primero que debe hacer es descargar la fuente que desee en 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, debe cargarlos en su servidor de alojamiento de WordPress. El mejor lugar para descargar fuentes es dentro de una nueva carpeta «fuentes» en su tema o directorio de temas secundarios. Puede usar FTP o el administrador de archivos de su cPanel para descargar 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); peso de fuente: normal; } Recuerde reemplazar la familia de fuentes y la URL por las suyas. Después de eso, puede usar esta 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, es mejor servir la fuente directamente desde su servidor para obtener el mejor rendimiento. 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 el uso de 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 tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
