Cómo agregar fuentes Typekit a WordPress

La tipografía es un elemento del diseño de su sitio web del que se habla con frecuencia y que bien merece su atención. La fuente correcta puede hacer o deshacer un diseño, pero encontrarla puede ser difícil. Hay muchas  fuentes gratuitas y premium  para elegir, pero a menudo tendrás que buscar entre ellas para encontrar una joya.

Adobe Typekit le permite omitir parte de este proceso gracias a su compilación masiva de tipos de letra de alta calidad. En este artículo, repasaremos las razones por las que tiene sentido agregar fuentes personalizadas a WordPress en general. Luego, discutiremos qué es Typekit, cómo publicar un ‘kit de fuentes’ y, finalmente, cómo agregarlo a WordPress.

Por qué debería agregar fuentes personalizadas en su sitio web de WordPress

Las fuentes personalizadas (o ‘fuera del sistema’) son tipos de letra que no vienen con nuestras computadoras de forma predeterminada. WordPress solo admite fuentes del sistema listas para usar (piense en Times New Roman y Arial), pero hay muchas otras opciones de fuentes disponibles para elegir.

Agregar fuentes personalizadas a su sitio no es estrictamente necesario, pero es una excelente manera de diferenciar su sitio  de sus competidores. La fuente correcta en el papel correcto permitirá que su contenido se destaque y capte la atención de sus lectores. Además, el uso de fuentes personalizadas puede ayudarlo a mejorar el estilo de sus temas de WordPress mucho más allá de lo que ofrecen los tipos de letra predeterminados.

Si el presupuesto es un problema, la web está repleta de fuentes gratuitas y configurarlas en WordPress es fácil. Si bien Divi incluye una gran cantidad de fuentes como estándar, también funcionará bien con cualquier tipo de letra adicional que elija agregar. Además, agregar nuevas opciones de fuente  toma unos minutos.

Ahora, averigüemos más sobre uno de los mejores lugares para encontrar fuentes en línea: Typekit.

Qué son las fuentes Typekit (y por qué debería usarlas)

Typekit es un servicio de Adobe , donde se asocia con algunas de las mejores fundiciones tipográficas del mundo para ofrecerle una gran cantidad de fuentes de alta calidad.

La plataforma basada en suscripción también viene con un nivel gratuito, que le permite acceder a una cantidad limitada de fuentes, así como la opción de comprarlas individualmente. Por el contrario, los miembros de pleno derecho pueden utilizar cualquiera de las fuentes de la biblioteca de Typekit, incluidas opciones populares como Fira Sans y Acumin .

Usar un servicio de suscripción para obtener acceso a las fuentes puede parecer un gasto innecesario, pero puede valer la pena si eres diseñador. Para empezar, buscar la fuente correcta en la web puede ser una gran pérdida de tiempo si no está seguro de dónde buscar. Typekit simplifica el proceso al brindarle acceso directo a una gigantesca biblioteca de opciones de alta calidad.

Además, siempre puede probar el servicio de forma gratuita antes de comprometerse para averiguar si es adecuado para usted. Por ahora, analicemos cómo funciona el servicio y cómo agregar sus fuentes a WordPress.

Cómo crear y publicar un ‘Kit de fuentes’ en Typekit

Para usar cualquier fuente personalizada en su sitio web de WordPress, primero deberá cargarla, y lo mismo se aplica a las fuentes Typekit. Sin embargo, antes de eso, tendrás que registrarte en el servicio. Cuando se le pregunte qué tipo de cuenta desea abrir, le recomendamos que se quede con la opción gratuita hasta que haya decidido que es algo por lo que desea pagar.

Una vez que se haya registrado, puede comenzar a crear un kit de fuentes, una colección de fuentes cuidadosamente seleccionadas, para su uso. Simplemente navegue por la biblioteca hasta que encuentre una opción que se adapte a sus necesidades, haga clic en ella y luego elija la opción <> Uso web: Agregar al kit :

La primera vez que haga esto, la plataforma le pedirá que elija un nombre para su kit y especifique qué dominios lo usarán:

Desde aquí, se le proporcionará un código JavaScript incrustable, que es la forma en que agrega fuentes Typekit a su sitio web de WordPress. Siéntase libre de anotar ese código ahora, lo necesitará más tarde.

Después de guardar el código, haga clic en Continuar  y será enviado al panel de control de Typekit. Esto mostrará todas las fuentes de su kit, y dentro de cada kit puede elegir entre varios pesos y estilos de fuente diferentes según su selección:

Además, también puede configurar una ‘fuente alternativa’. Este tipo de letra solo aparecerá si uno de sus visitantes usa un navegador que no admite la regla @font-face y el valor predeterminado es Sans Serif .

En la siguiente sección, cubriremos cómo usar su kit en WordPress. Sin embargo, antes de continuar, asegúrese de haber agregado todas las fuentes que desea usar, luego haga clic en  Publicar verde en su tablero. Esto propagará los cambios a cualquier sitio web que esté usando el kit.

Cómo agregar fuentes Typekit a WordPress (de 2 maneras)

Hay dos formas de agregar fuentes Typekit a WordPress, y ambas requieren el código JavaScript que copió anteriormente. Si necesita volver a encontrarlo, simplemente acceda al tablero de su kit de fuentes y busque el enlace del código de inserción en la parte superior derecha de la página.

Una vez que lo tenga, deberá seguir uno de los dos métodos a continuación.

1. Use el complemento Typekit Fonts to WordPress

La forma más sencilla de agregar sus fuentes Typekit a WordPress es usar este complemento . Esta herramienta es particularmente sencilla, pero viene con varias características útiles, como la compatibilidad con WordPress Multisite y soporte para reglas CSS personalizadas.

Después de instalar y activar el complemento, aparecerá una nueva opción de Typekit Fonts en Configuración en su panel de WordPress. Al hacer clic aquí, se le presenta una nueva sección donde puede pegar el código de inserción de su kit y también agregar reglas CSS personalizadas para mostrar sus fuentes:

Para que sus fuentes aparezcan en su sitio web, deberá configurar reglas específicas usando CSS, normalmente usando la familia de fuentes y las etiquetas de encabezado . Aquí hay un ejemplo en el que configuramos nuestros encabezados H2 para que se muestren usando una fuente Typekit:

01
h2 { font-family: "proxima-nova-1"; }

Una vez que haya configurado sus reglas, haga clic en  Guardar cambios y verifique que sus nuevas fuentes se muestren en la parte frontal de su sitio web.

2. Agregue el código de incrustación de Typekit a su archivo header.php

Si no desea instalar otro complemento en su sitio, siempre puede agregar sus fuentes Typekit a WordPress manualmente. Para hacerlo, deberá modificar el archivo header.php de su tema activo . Por supuesto, antes de jugar con los archivos principales de WordPress, asegúrese de estar  usando un tema secundario (para conservar sus cambios cuando se actualice su tema) y  haga una copia de seguridad de su sitio en caso de que suceda lo peor.

La forma más fácil de modificar su archivo header.php implica ir a la pestaña Apariencia de WordPress y elegir la opción Editor . Una vez dentro, ubique su archivo header.php en la sección Plantillas , luego seleccione el archivo y busque las etiquetas <head> . Coloque su código de incrustación de Typekit entre ellos, luego guarde sus cambios:

También podría lograr el mismo resultado accediendo a su sitio a través de FTP , ubicando la carpeta de su tema y modificando su encabezado . php usando un editor de texto dedicado ( como Atom ).

En cualquier caso, también deberá editar su archivo style.css para especificar cuándo y cómo deben mostrarse sus fuentes nuevas. El método para hacerlo sigue el mismo camino que la edición de su archivo header.php , junto con las pautas del código CSS descritas en la sección anterior.

Conclusión

Encontrar la fuente perfecta para tus diseños puede ser como buscar una aguja en un pajar. Sin embargo, no tiene por qué serlo. Si bien hay muchos recursos para elegir la fuente correcta,  Typekit  es una buena opción para agregar fuentes de alta calidad a su sitio web. Es esencialmente una proverbial caja de agujas en su cajón, lejos del heno y de fácil acceso para mejorar el diseño de su sitio.

Además, agregar fuentes Typekit a WordPress es muy fácil, y puede hacerlo de dos maneras:

  1. Use el complemento Typekit Fonts to WordPress  .
  2. Agregue el código de inserción de Typekit a su archivo header.php de WordPress .

¿Qué cree que hace que Typekit se destaque entre otros repositorios de fuentes? ¡Suscríbase y comparta sus pensamientos con nosotros en la sección de comentarios a continuación!

Imagen en miniatura del artículo por howcolour / shutterstock.com