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

¿Alguna vez se ha preguntado cómo los diseñadores usan 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 de fuentes basado en suscripción que puede ahorrarle mucho dinero. En lugar de pagar licencias de fuentes individuales, que pueden resultar bastante 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 gran colección de más de 1000 fuentes. Algunas de las fuentes más hermosas 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 2 familias de fuentes en un sitio web de forma gratuita. Otros planes comienzan en $ 49,99 a $ 99,99 por año.

Estas impresionantes fuentes de Typekit se pueden agregar fácilmente a cualquier sitio web sin disminuir la velocidad de carga de la página. Las fuentes son proporcionadas por Adobe CDN y se cargan a velocidades mucho más rápidas que cuando las aloja en su sitio.

Video tutorial de Typekit para WordPress

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 mensaje a sus lectores. Independientemente del tipo de imagen que desee representar (profesional, amigable, informal, informado), las fuentes en su sitio web pueden ayudarlo a proyectar la imagen correcta.

Si utiliza el conjunto de caracteres adecuado, puede dejar una impresión duradera. En lugar de verse como cualquier otro sitio en la web, su texto se ve notablemente diferente. Seleccionar la fuente adecuada para su sitio de WordPress puede hacer que su 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 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.

Empezando con Typekit

Primero deberá crear una cuenta de Typekit. Para hacer esto, visite Typekit.com para comparar planes disponibles.

Deberá elegir el plan al que desea suscribirse. El plan gratuito lo limita a un sitio web e incluye acceso a caracteres limitados. Es posible que desee comenzar con el plan gratuito para probarlo y luego actualizarlo más tarde. La actualización ofrece una biblioteca de fuentes más grande y puede usarlas en más sitios web.

Planes de suscripción de Typekit

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

Creando un kit para su sitio

Una vez que haya completado la información del kit, Typekit le proporcionará 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 y más.

Elija una fuente de la biblioteca de Typekit

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 Uso de la web: añadir al kit botón en el lado derecho.

agregue una fuente typekit a su kit web

Aparecerá una ventana emergente donde debe agregar el personaje seleccionado al kit recién creado.

agregar su propia fuente web personalizada a un kit

Ahora puedes hacer clic A publicar para guardar los cambios en su kit.

publica tu kit para guardar cambios

¡Eso es todo! Tu kit de personaje ahora está listo para usar.

Agregue sus fuentes Typekit en WordPress

La forma más fácil de agregar sus nuevas fuentes web personalizadas a su blog de WordPress es usar un plugin de WordPress Typekit.

Recomendamos el Fuente Typekit para WordPress conectar. Después de instalar y activar el plugin, puede visitar Configuración »Fuentes Typekit para configurar el plugin.

usando un plugin de wordpress typekit para personalizar fuentes

Primero, deberá pegar el código JavaScript que guardó anteriormente en el campo de código de inserción de Typekit. A continuación, puede agregar selectores CSS para especificar dónde desea usar la fuente en su sitio.

En la captura de pantalla de arriba, hemos agregado la fuente al archivo. h1.site-title Selector de CSS.

Su tema de WordPress puede usar diferentes clases para diferentes elementos. Deberá utilizar la herramienta Inspeccionar elemento en su navegador web para descubrir esas clases de CSS. Es posible que también desee consultar nuestra hoja de trucos CSS generada por WordPress para principiantes para ayudarlo a comenzar.

Uso de la herramienta Inspeccionar elemento en Google Chrome para encontrar clases CSS

¡Eso 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 a sus temas de WordPress.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir