Cómo agregar una tipografía impresionante en WordPress con Typekit

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

¿Por qué utilizar fuentes Typekit?

Typekit es un popular servicio policial basado en suscripción que puede ahorrarle mucho dinero. En lugar de pagar licencias de fuentes individuales, que pueden resultar muy caras, puede 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 1000 fuentes. Algunas de las fuentes más bonitas que puede encontrar en la web están disponibles a través de Typekit, un servicio de Adobe. Su plan básico gratuito incluye acceso a más de 230 fuentes, y puede usar 2 familias de fuentes gratis en un sitio web. Los otros planes comienzan desde $ 49,99 a $ 99,99 por año. Estas impresionantes fuentes Typekit se pueden agregar fácilmente a cualquier sitio web sin reducir la velocidad de carga de la página. Las fuentes se sirven desde el CDN de Adobe y se cargan a velocidades mucho más rápidas que si las alojara en su propio sitio.

Video tutorial de Typekit para WordPress

Suscríbase a MundoCMS Si no le gusta el video o necesita más instrucciones, puede continuar leyendo a continuación.

¿Por qué utilizar fuentes web personalizadas en WordPress?

La tipografía juega un papel crucial en el diseño de su sitio. Elegir las fuentes adecuadas comunicará claramente su personalidad y su mensaje a sus lectores. Independientemente del tipo de imagen que desee representar (profesional, amigable, relajado, experimentado), las fuentes de su sitio web pueden ayudarlo a proyectar la imagen correcta. Si utiliza el conjunto de fuentes adecuado, puede dejar una impresión duradera. En lugar de parecerse a cualquier otro sitio en la web, su texto es significativamente diferente. Seleccionar la fuente correcta para su sitio de WordPress puede llevar su sitio web de un diseño simple a una obra de arte estética e impresionante. Las buenas fuentes web personalizadas pueden:

• aumentar las tasas de conversión
• reducir la tasa de rebote de su sitio
• aumentar el tiempo dedicado a su sitio web
• crea una experiencia memorable para los usuarios

¿Listo para comenzar con las fuentes Typekit? Aquí le mostramos cómo usar Typekit para personalizar su diseño de WordPress.

Cómo empezar con Typekit

Primero deberá crear una cuenta de Typekit. Para hacer esto, simplemente visite Typekit.com para comparar los planes disponibles. Deberá elegir el plan al que desea suscribirse. El plan gratuito lo limita a un sitio web e incluye acceso a fuentes limitadas. Es posible que desee comenzar con el plan gratuito para probarlo y luego actualizarlo más tarde. La actualización le brinda una biblioteca más grande de fuentes y puede usarlas en más sitios web.

El siguiente paso es crear un kit. El kit le permite crear una biblioteca específica de fuentes y configuraciones para su sitio web, por lo que Typekit solo carga los archivos y el código que necesita. Para crear su kit, agregue el nombre de su sitio y el nombre de dominio y luego haga clic en Seguir adelante.

Una vez que haya terminado de completar su información para su kit, Typekit le dará un código JavaScript para agregar a su sitio. Puede copiar y pegar este código en un editor de texto como el Bloc de notas para guardarlo por ahora. Lo agregaremos a su sitio en el siguiente paso de este tutorial. Por ahora, puede comenzar a elegir sus fuentes. Puede navegar por la biblioteca de fuentes y filtrar por opciones como clasificación, peso, ancho, x alto, etc.

Cuando vea una fuente que le guste, puede hacer clic en ella para obtener más detalles y ejemplos. Si desea agregarlo a su kit web, haga clic en el botón Uso web: agregar al kit botón en el lado derecho.

Aparecerá una ventana emergente en la que debe agregar la fuente que seleccionó al kit que acaba de crear.

Ahora puede hacer clic en el Publicar para guardar los cambios en su kit.

¡Es todo! Su kit de fuentes ya está listo para usar.

Agregar sus fuentes Typekit a WordPress

La forma más fácil de agregar sus nuevas fuentes web personalizadas a su blog de WordPress es utilizar un plugin de WordPress Typekit. Recomendamos el plugin Typekit Fonts para WordPress. Después de instalar y activar el plugin, puede visitar Configuración »Fuentes Typekit para configurar el plugin.

Primero debe pegar el código JavaScript que guardó anteriormente en el campo Código de inserción de Typekit. Después de eso, puede agregar selectores de CSS para especificar dónde desea usar la fuente en su sitio. En la captura de pantalla anterior, agregamos la fuente al selector CSS h1.site-title. Su tema de WordPress puede usar diferentes clases para diferentes elementos. Deberá utilizar la herramienta Inspeccionar elementos en su navegador web para descubrir estas clases de CSS. También puede consultar nuestra hoja de trucos CSS generada por WordPress para principiantes para ayudarlo a comenzar.

¡Es todo! Esperamos que este artículo te haya ayudado a aprender cómo agregar una tipografía increíble en WordPress con Typekit. También puede consultar nuestra guía sobre cómo agregar fuentes web de Google en sus temas de 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.