Cómo agregar Tipografía Impresionante en WordPress con Typekit

¿Alguna vez se ha preguntado cómo los diseñadores son capaces de utilizar fuentes web personalizadas en sus sitios? A menudo están añadiendo fuentes personalizadas a WordPress usando Typekit, un servicio de Adobe que le da 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é usar fuentes Typekit?

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

La biblioteca Typekit es una colección masiva de más de 1.000 fuentes. Algunas de las fuentes más bellas 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 utilizar dos familias de fuentes en un sitio web de forma gratuita. Otros planes comienzan desde $49.99 hasta $99.99 por año.

Estas increíbles fuentes Typekit pueden ser agregadas fácilmente a cualquier sitio web sin disminuir la velocidad de carga de su página. Las fuentes se sirven desde la CDN de Adobe y se cargan a velocidades mucho mayores que si se alojaran en su propio sitio.

Tutorial de Video Typekit para WordPress

Suscribirse a AprenderWP

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

¿Por qué usar fuentes web personalizadas en WordPress?

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

La elección de las fuentes adecuadas comunicará claramente su personalidad y su mensaje a sus lectores. Independientemente del tipo de imagen que desee representar (profesional, amigable, casual, experimentada), las fuentes de su sitio web pueden ayudar a proyectar la imagen correcta.

Al utilizar el conjunto de fuentes adecuado, puede dejar una impresión duradera. En lugar de parecerse a cualquier otro sitio de la web, su texto se ve notablemente diferente. Seleccionando la fuente adecuada para su sitio WordPress puede hacer que su sitio web vaya de un diseño simple a una obra de arte estéticamente agradable e impresionante.

Las fuentes web personalizadas adecuadas pueden hacerlo:

• aumentar las tasas de conversión
• reducir el porcentaje de rebotes de su sitio
• aumentar el tiempo de permanencia en su sitio web
• crear una experiencia memorable para los usuarios

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

Cómo comenzar con Typekit

Primero tendrá que crear una cuenta Typekit. Para hacer esto, sólo visite Typekit.com para comparar los planes disponibles.

Tendrá que elegir el plan en el que desea inscribirse. El plan gratuito le 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 adelante. La actualización le ofrece una mayor biblioteca de fuentes y puede utilizarlas 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 carga sólo los archivos y el código necesario. Para crear su kit, añada el nombre de su sitio y el nombre de dominio y haga clic en Continuar .

Después de que termine de llenar su información para su kit, Typekit le dará un poco de 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 añadiremos a su sitio en el siguiente paso de este tutorial.

Por ahora, puedes empezar a elegir tus fuentes. Puede examinar la biblioteca de fuentes y filtrar por opciones como clasificación, peso, anchura, 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 desea agregarlo a su kit web, haga clic en Uso web: Añadir al kit en el lado derecho.

Esto mostrará una ventana emergente en la que deberá añadir la fuente que ha seleccionado al kit que acaba de crear.

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

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

Cómo agregar sus fuentes Typekit en WordPress

La manera más fácil de añadir tus nuevas fuentes web personalizadas a tu blog de WordPress es usando un plugin de WordPress Typekit.

Recomendamos las fuentes Typekit para el plugin WordPress. Después de instalar y activar el plugin, puede visitar Configuración " Fuentes Typekit para configurar el plugin.

Primero tendrá que pegar el código JavaScript que guardó anteriormente en el campo de código para incrustar Typekit. Después de eso, puede agregar selectores CSS para especificar dónde desea utilizar la fuente en su sitio.

En la captura de pantalla de arriba hemos añadido la fuente al selector CSS de h1.site-title.

Su tema de WordPress puede usar diferentes clases para diferentes elementos. Necesitará utilizar la herramienta Inspeccionar elemento en su navegador web para encontrar esas clases CSS. También puedes consultar nuestra hoja de trucos de CSS generada por WordPress para principiantes para ayudarte a empezar.

Eso es todo! Esperamos que este artículo le haya ayudado a aprender a añadir una tipografía impresionante en WordPress con Typekit. También puedes echar un vistazo a nuestra guía sobre cómo añadir fuentes web de Google en tus temas de WordPress.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.