Cómo agregar tipografía increíble en WordPress con Typekit

¿Alguna vez te has preguntado cómo los diseñadores pueden usar fuentes personalizadas y hermosas en sus sitios web? A menudo, agregan fuentes personalizadas a WordPress usando Typekit, un servicio de Adobe que te da acceso a fuentes de alta calidad. En este artículo, te mostraremos cómo agregar fuentes de Typekit en WordPress para mejorar tu tipografía.

¿Por qué usar fuentes de Typekit?

Typekit es un popular servicio de fuentes por suscripción que puede ahorrarte mucho dinero. En lugar de pagar por licencias de fuentes individuales, que pueden ser bastante caras, puedes acceder a toda su biblioteca de cientos de fuentes de forma gratuita o por una tarifa anual fija.

La biblioteca de Typekit es una colección masiva de más de 1,000 fuentes. Algunas de las fuentes más hermosas que puedes encontrar en la web están disponibles a través de Typekit, un servicio de Adobe.

Su plan básico gratuito viene con acceso a más de 230 fuentes, y puedes usar 2 familias de fuentes en un sitio web de forma gratuita. Otros planes van desde $49.99 hasta $99.99 por año.

Estas increíbles fuentes de Typekit se pueden agregar fácilmente a cualquier sitio web sin ralentizar la velocidad de carga de tu página. Las fuentes se sirven desde la CDN de Adobe y se cargan a velocidades mucho más rápidas que si las alojaras en tu propio sitio.

Tutorial en video de Typekit para WordPress

Si no te gusta el video o necesitas más instrucciones, puedes seguir leyendo a continuación.

¿Por qué usar fuentes personalizadas en WordPress?

La tipografía juega un papel crucial en el diseño de tu sitio.

Elegir las fuentes adecuadas comunicará claramente tu personalidad y mensaje a tus lectores. No importa qué tipo de imagen quieras proyectar —profesional, amigable, casual, experimentado— las fuentes de tu sitio web pueden ayudarte a proyectar la imagen correcta.

Al usar el conjunto de fuentes adecuado, puedes dejar una impresión duradera. En lugar de parecerte a cualquier otro sitio en la web, tu texto se verá notablemente diferente. Seleccionar la fuente adecuada para tu sitio de WordPress puede hacer que tu sitio web pase de un diseño simple a una obra de arte estéticamente agradable e impresionante.

Las fuentes web personalizadas adecuadas pueden:

• aumentar las tasas de conversión
• reducir la tasa de rebote de tu sitio
• aumentar el tiempo que se pasa en tu sitio web
• crear una experiencia memorable para los usuarios

¿Listo para empezar con las fuentes de Typekit? Aquí te explicamos cómo usar Typekit para personalizar el diseño de tu WordPress.

Cómo empezar con Typekit

Primero, necesitarás crear una cuenta de Typekit. Para hacerlo, simplemente visita Typekit.com para comparar los planes disponibles.

Deberás elegir el plan por el que deseas registrarte. El plan gratuito te limita a un sitio web e incluye acceso a fuentes limitadas. Es posible que desees empezar con el plan gratuito para probarlo y luego actualizar más adelante. La actualización te da una biblioteca más grande de fuentes y puedes usarlas en más sitios web.

El siguiente paso es crear un kit. El kit te permite agrupar una biblioteca específica de fuentes y configuraciones para tu sitio web, de modo que Typekit cargue solo los archivos y el código necesarios. Para crear tu kit, agrega el nombre de tu sitio y el nombre de dominio y luego haz clic en Continuar.

Después de que hayas terminado de completar tu información para tu kit, Typekit te proporcionará un poco de código JavaScript para agregar a tu sitio. Puedes copiar y pegar este código en un editor de texto como el Bloc de notas para guardarlo por ahora. Lo agregaremos a tu sitio en el siguiente paso de este tutorial.

Por ahora, puedes empezar a elegir tus fuentes. Puedes explorar la biblioteca de fuentes y filtrar por opciones como clasificación, peso, ancho, altura x, y más.

Cuando veas una fuente que te guste, puedes hacer clic en ella para obtener más detalles y ejemplos. Si deseas agregarla a tu kit web, haz clic en el botón Uso web: Agregar al kit en el lado derecho.

Esto abrirá una ventana emergente donde deberás agregar la fuente que seleccionaste al kit que acabas de crear.

Ahora puedes hacer clic en el botón Publicar para guardar los cambios en tu kit.

¡Eso es todo! Tu kit de fuentes ya está listo para usar.

Agregar tus fuentes de Typekit en WordPress

La forma más fácil de agregar tus nuevas fuentes web personalizadas a tu blog de WordPress es usando un plugin de WordPress para Typekit.

Recomendamos el plugin Typekit Fonts for WordPress. Después de instalar y activar el plugin, puedes visitar Ajustes » Fuentes Typekit para configurarlo.

Primero, necesitarás pegar el código JavaScript que guardaste anteriormente en el campo de código de inserción de Typekit. Después de eso, puedes agregar selectores CSS para especificar dónde quieres usar la fuente en tu sitio.

En la captura de pantalla anterior, agregamos la fuente al selector CSS h1.site-title.

Tu tema de WordPress puede usar diferentes clases para diferentes elementos. Necesitarás usar la herramienta Inspeccionar Elemento en tu navegador web para averiguar esas clases CSS. También podrías querer consultar nuestra hoja de trucos de CSS generada por WordPress para principiantes para ayudarte a empezar.

¡Eso es todo! Esperamos que este artículo te haya ayudado a aprender cómo agregar tipografía increíble en WordPress con Typekit. También podrías querer echar un vistazo a nuestra guía sobre cómo agregar fuentes web de Google en tus temas de WordPress.

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para tutoriales de WordPress en video. También puedes encontrarnos en Twitter y Facebook.