Cómo Agregar Fuentes Personalizadas a WordPress de Manera Fácil

Agregar más fuentes a su computadora es bastante sencillo. Simplemente descargue los archivos a su directorio de fuentes y luego podrá comenzar a usarlos en el software y las aplicaciones de su elección.

Sin embargo, si desea utilizar fuentes personalizadas en su sitio web, especialmente aquellos tipos de letra que sus visitantes podrían no haber instalado en sus dispositivos, se vuelve un poco más complicado.

Afortunadamente, como usuario de WordPress, existen excelentes herramientas gratuitas que puede usar para agregar fuentes individuales o una biblioteca completa de ellas a su sitio web. Una vez que haya hecho que las fuentes estén disponibles para su tema, puede comenzar a aplicarlas a los diversos estilos en uso en su sitio web.

En este artículo, le mostraremos dónde puede encontrar fuentes gratuitas y premium de alta calidad, cómo agregarlas a su sitio web de WordPress, además de algunas herramientas para ayudarlo a elegir la configuración adecuada para cada tipo de letra en su sitio web.

Dónde encontrar fuentes para su sitio web

Antes de llegar a las instrucciones que cubren cómo puede agregar fuentes personalizadas a su sitio web de WordPress, echemos un vistazo a algunos de los lugares donde puede encontrar nuevos tipos de letra para modificar la apariencia del texto en su sitio.

Hay algunos excelentes recursos gratuitos en línea disponibles, donde puede encontrar fuentes de código abierto que se pueden usar libremente en todo su sitio web. Algunos recursos que le gustaría explorar incluyen:

• Google Fonts: explore más de 600 fuentes de código abierto que se han optimizado para la web. Usar estas fuentes en su sitio web de WordPress es muy fácil, como veremos en breve.
• Font Squirrel: otro gran repositorio de fuentes de uso gratuito.
• Edge Web Fonts: una colección de fuentes web gratuitas con tecnología de Adobe Typekit.
• Typekit: una colección profesional de más de 4000 fuentes gratuitas y premium de Adobe, para usar en la web e impresas.

Como puede ver, hay muchas fuentes legítimas en línea de fuentes gratuitas y premium que puede usar para personalizar la apariencia de su sitio web de WordPress.

Herramientas tipográficas para diseñadores web

Elegir el conjunto correcto de fuentes para su sitio web puede ser difícil. Hay más en el proceso que simplemente elegir una o dos fuentes que le gusten y luego agregarlas a su sitio web.

No solo debe tener en cuenta la apariencia de la fuente, sino también el tamaño que elegirá, el ancho del área de contenido de su sitio y cuál es la altura de línea óptima para cada tipo de letra.

Afortunadamente, hay algunas herramientas gratuitas en línea que puede usar para ayudarlo a aplicar las fuentes elegidas correctamente. Esto asegura que su contenido se vea lo mejor posible .

Un recurso en línea que definitivamente debería echar un vistazo rápido al personalizar las fuentes en su sitio web es la Calculadora de tipografía de proporción áurea. Esta herramienta de tipografía, del tipo detrás de Thesis Framework, le permite ingresar un tamaño de fuente, seguido del ancho de su área de contenido. La herramienta luego calculará la configuración tipográfica perfecta para la configuración específica de su sitio web.

Type Scale es otra herramienta en línea que facilita establecer qué tamaño deben tener los diferentes estilos de texto en su sitio web en relación entre sí. Después de ingresar el tamaño de fuente base, como el tamaño del texto del párrafo en su sitio, descubrirá en qué tamaño se debe configurar cada uno de los diferentes encabezados .

Hay una serie de escalas para elegir, incluida la proporción áurea anterior. Una vez que esté satisfecho con la configuración, puede copiar rápidamente el CSS para usarlo en su propio sitio web.

Complementos de fuentes personalizadas de WordPress

Así como hay muchos lugares para encontrar fuentes en línea, también hay muchas formas de integrarlas en su sitio web de WordPress. Sin embargo, para ayudarlo a comenzar lo más rápido posible , estos son algunos de los mejores complementos relacionados con las fuentes de WordPress:

Fuentes fáciles de Google

Easy Google Fonts es un complemento gratuito que le permite utilizar cualquiera de las más de 600 fuentes gratuitas del repositorio de Google en su sitio web de WordPress. El complemento funciona con la herramienta de personalización de WordPress. Esto le permite obtener una vista previa de sus cambios antes de tomar una decisión final sobre qué fuentes usar en su sitio.

Después de instalar y activar el complemento en su sitio web, puede comenzar a cambiar las fuentes utilizadas por su tema actual de WordPress. Para hacerlo, dirígete a la herramienta de personalización de WordPress y haz clic en la sección Tipografía.

Fuera de la caja, el complemento le permite cambiar la configuración de tipografía para los estilos principales que usa su tema. Esto podría incluir el párrafo y los títulos individuales. Sin embargo, a través de la página de configuración de Easy Google Fonts, puede crear controles de fuente personalizados . Luego se agregan a la interfaz del Personalizador, lo que le brinda una manera fácil de cambiar la fuente utilizada por elementos como listas, citas y más.

Después de agregar un control de fuente personalizado, puede acceder a él desde la configuración de Tipografía de tema en el Personalizador.

Al usar esta función del complemento, puede modificar las fuentes utilizadas por cualquiera de los elementos o estilos de su tema de WordPress. Los controles que se agregan al Personalizador también cubren el peso de la fuente, la decoración del texto y las propiedades de transformación, así como el color de la fuente, el color de fondo, el tamaño, la altura de la línea y el espaciado entre letras.

Al combinar los controles de fuente personalizados con las configuraciones detalladas que se ofrecen, el complemento Easy Google Fonts abre todo un mundo de posibilidades cuando se trata de modificar la apariencia del texto en su sitio web de WordPress, todo sin la necesidad de editar ningún código directamente.

Usar cualquier fuente

El complemento Easy Google Fonts anterior es muy recomendable. Sin embargo, tiene un inconveniente: solo puede usar los tipos de letra de la colección Google Fonts. Si ninguna de esas 686 fuentes le atrae, o si desea usar un tipo de letra personalizado , entonces el complemento Use Any Font, igualmente gratuito, es una buena alternativa.

Después de instalar y activar el complemento, puede cargar una o más fuentes en su sitio web, directamente desde su computadora. Sin embargo, antes de comenzar, debe registrarse para obtener la clave API gratuita (o hacer una donación), que conectará el complemento a la herramienta de conversión de fuentes.

Una vez que haya cargado al menos una fuente, puede asignarla a los elementos específicos de su sitio web. Esto incluye la lista de elementos predeterminados, así como cualquier elemento personalizado que defina.

El complemento también agrega algunos controles de fuente al editor de publicaciones de WordPress . Esto facilita el cambio de las fuentes utilizadas en sus publicaciones y páginas, de forma individual, en lugar de globalmente.

Después de asignar una fuente, puede ver los cambios en su tipografía visitando el front-end de su sitio web. Si bien los controles de este complemento no se comparan con los que se ofrecen en el complemento Easy Google Fonts, si solo desea cambiar las fuentes utilizadas por los elementos específicos de su tema a una fuente personalizada de su elección, entonces Use Any Font lo hace. el trabajo bien.

Fuentes Typekit para WordPress

Si desea utilizar las fuentes gratuitas y premium del servicio Adobe Typekit en su sitio web de WordPress, entonces el complemento gratuito Typekit Fonts for WordPress es para usted.

Con este complemento, puede usar los selectores predefinidos o agregar sus propias reglas CSS personalizadas . Esto garantiza que cualquier parte de su sitio web que desee personalizar con una fuente Typekit, puede hacerlo con este complemento.

Agregar fuentes personalizadas a WordPress a mano

Si por alguna razón, la idea de usar uno de los complementos gratuitos anteriores no le atrae, siempre puede cambiar las fuentes utilizadas en su sitio web de WordPress a mano. Si la fuente que desea utilizar se puede encontrar en el repositorio de Google Fonts, agregarla a su sitio web es muy fácil.

Todo lo que tiene que hacer es seleccionar la fuente en el sitio web de Google y luego copiar el código relevante en la sección principal y la hoja de estilo CSS de su sitio web.

Sin embargo, si la fuente de su elección no está alojada en un repositorio como Google Fonts, donde simplemente puede vincularla, entonces deberá alojar la fuente usted mismo. Esto cambia ligeramente el proceso y agrega algunos pasos adicionales, como cargar la fuente a su servidor.

Puede cargar el archivo de fuente utilizando el software FTP o la herramienta de administración de archivos en el panel de control de su proveedor de alojamiento web. Es una buena idea cargar la fuente en un directorio de fuentes dedicado , preferiblemente en la carpeta de temas de su hijo para ayudar a mantener las cosas organizadas.

Una vez que el archivo de fuente esté en su servidor, abra el archivo de hoja de estilo CSS de su tema para editarlo. Esto se puede hacer desde el panel de administración de WordPress, en la pantalla Apariencia > Editor.

Una vez que haya agregado el CSS anterior a la hoja de estilo para cargar la fuente, puede usarlo en cualquier parte de ese archivo CSS para modificar la apariencia del texto como se muestra a continuación:

Por razones de rendimiento, siempre que sea posible, debe intentar vincular a un repositorio de fuentes externo como Google Fonts. Sin embargo, si no puede encontrar la fuente que desea usar en línea, es posible que deba sacrificar parte de la velocidad de su página alojando el archivo usted mismo.

Conclusión

Esperemos que ahora sepa dónde encontrar fuentes personalizadas y cómo comenzar a agregarlas a su sitio de WordPress. Al usar uno de los complementos gratuitos, como Easy Google Fonts, puede comenzar a cambiar no solo las fuentes que se usan en su sitio web, sino también cómo se presentan esos tipos de letra .

Gracias a la herramienta de personalización de WordPress, ahora puede realizar fácilmente cambios en la apariencia del texto de su sitio web. Todo esto se lleva a cabo a través de un conjunto de menús visuales, completo con una vista previa en vivo.

Si su tema actual no le da mucho control sobre qué fuentes se usan en su sitio, al usar uno de los métodos anteriores, ahora tiene una manera fácil de hacer esos cambios, sin editar usted mismo ninguno de los CSS subyacentes.

¿Cuáles son tus fuentes favoritas? ¿Qué configuración de tipografía en su sitio web desea cambiar? Si tiene alguna pregunta sobre fuentes, tipografía o WordPress en general, compártala en los comentarios a continuación.