Diseño, Tutoriales, WordPress | 9 de diciembre de 2014

Implementar Adobe Typekit en WordPress

En un artículo anterior referente al rediseño de FranciscoAMK.com, te había hablado acerca de la elección de fuentes tipográficas que pretendía usar en el sitio, en donde el diseño se basaría en el uso de Crimson TextRoboto. Sin embargo, llegado el momento de maquetar el HTML y CSS del sitio, me di la oportunidad de probar algunas opciones para ver como funcionan directamente en el navegador.

Recordé que tenemos una cuenta en Adobe Typekit a la cual nunca hemos sacado provecho, y pensé que quizá ya sería momento de sacarle el jugo. Así que busqué en su catálogo y encontré una combinación que me dejó bien satisfecho.

Mas adelante te mostraré cuales son las fuentes que elegí, pero por ahora, creo que es una buena oportunidad para mostrarte cómo implementar Adobe Typekit en WordPress.

Qué es Typekit

¿Has usado alguna vez Google Fonts?, pues bien, Typekit es un servicio muy similar proveído por Adobe, que posee una tremenda galería de fuentes profesionales de un altísimo nivel.

Puesto en otras palabras, Typekit es un servicio de hosting de tipografías, que permite utilizar fuentes especiales en tus sitios web, sin la necesidad de cargarlas directamente en tu servidor, sino invocándolas desde su propia biblioteca.

Las fuentes que ofrece typekit son de nivel profesional y son de una calidad estética de primera. Si quieres darle una apariencia profesional y elegante a un sitio, sin dudas te recomendaría dar un vistazo a su biblioteca de tipografías.

Este no es un servicio gratuito, sus costos están divididos en planes de acuerdo al uso que quieras darle, y parten desde los USD $2 mensuales.

Cómo seleccionar tus fuentes

Ok, basta de introducciones, vamos al detalle de cómo implementar Typekit. Lo primero que tenemos que saber es cómo seleccionar las fuentes que vas a utilizar.

1. Filtra las fuentes

Una vez que ya has entrado con tu cuenta, verás al lado izquierdo un listado de fuentes y al lado derecho una serie de criterios para filtrarlas de acuerdo a tus necesidades. Juega con estas opciones hasta encontrar la fuente más adecuada para tu proyecto, (en mi caso la fuente que quiero usar es “Kepler Std“). Sólo haz click sobre ella y verás el detalle.

Filtrar fuentes typekit
Filtrar fuentes Typekit

2. Crea un kit

Desde la página de detalle de la fuente haz click en el botón que dice “+ Use fonts” y eso abrirá una ventana preguntándote si quieres usarla en la web o en la computadora. Selecciona la pestaña “web” y desde allí tendrás la posibilidad de crear un nuevo kit o añadir la fuente a algún kit si es que ya has creado uno antes.

Crear kit typekit
Crear kit

Una vez que haces click en el link para crear un kit, te pedirá asignarle un nombre y te preguntará en qué dominios usarás las fuentes. Si estás trabajando tu sitio en local, recuerda añadir localhost, o cualquiera sea el dominio bajo el que veas tu sitio local.

Información del kit Typekit
Información del kit

Una vez que hayas creado el kit, el sistema te mostrará cierto código JavaScript necesario para implementar Typekit en tu sitio. Por ahora solo copia ese texto y tenlo a la mano. Lo usaremos más adelante.

Código de Implementación Typekit
Código de Implementación Typekit

3. Edita el kit

Dale click a “Continue” y verás una ventana con el editor del kit, que te permitirá seleccionar en qué grosores quieres utilizar la fuente y qué set de caracteres quieres utilizar.

Una vez que hagas tus cambios siempre debes hacer click en “Publish“. Eventualmente te saldrá una ventana emergente si es que el set de fuentes ha quedado muy pesado, ahí tú decides si continuar o hacer más cambios.

Typekit Editor
Typekit Editor

4. Añade más fuentes

Si quieres usar más de una tipografía de Typekit en tu sitio, vuelve al catálogo, repite el paso 1, y añade la fuente al kit que acabamos de crear. Recuerda hacer click en “Publish” para que se apliquen tus cambios.

Bien, ahora que ya tienes tus fuentes, es momento de llevarlas a WordPress.

Implementando typekit en WordPress

La implementación de tus fuentes necesita de 2 partes importantes, la primera es la implementación de código JavaScript que vimos anteriormente y la segunda es la utilización directamente en CSS.

Integrando el código javaScript

Abre el archivo de funciones de tu tema y añade el siguiente código al final:

Lo que hace este código es crear una función llamada “apk_cargar_typekit“, cuya única funcionalidad es imprimir el código JavaScript en el HTML, luego, en la línea 18, asociamos esta función a la acción “wp_head“. Dicho en otras palabras: le damos a WordPress la instrucción de imprimir ese código en la cabecera del HTML.

Por cierto, sería mucho más sencillo haber abierto header.php y simplemente pegar el código ahí, pero este método es mucho más elegante y responde a las buenas prácticas de WordPress.

Usando las fuentes en CSS

Si vuelves a ver la ventana del editor de kit, verás que arriba a la izquierda hay un link que dice “Using fonts in CSS“. Haz click sobre ese texto y verás las instrucciones para usar las fuentes.

Usando Typekit en CSS
Usando Typekit en CSS

Hay 2 opciones, la primera es aplicar una clase a cualquier elemento del sitio. Por ejemplo, si quieres usar la fuente “Kepler Std” en un div en particular, solo debes añadir esa clase. De la siguiente forma:

Ahora bien, la segunda opción, es llamar a la fuente directamente desde CSS en la propiedad font-family, de esta forma:

El resultado final

Luego de implementar Typekit en mi sitio, el diseño está quedando así:

Resultado de usar Typekit
Resultado de usar Typekit

Bastante mejor que el resultado que obtenía con Google Fonts. Las fuentes que estoy usando son “Kepler Std” (serif) y “JAF Bernino Sans” (sans serif).


Espero que este tutorial te haya resultado útil.

Un abrazo,
@FranciscoAMK

También te podría interesar:

No eres tan genial como crees

Era un día normal de trabajo, tenías algunos problemas creativos que resolver y estabas en ello. Probaste diferentes ideas, algunas conservadoras, unas más atrevidas. Algunas más tradicionales otras más creativas. Al cabo de unas cuantas horas sentiste cierta incomodidad y decidiste que era momento de tomar un descanso, así que saliste a caminar y aprovechaste […]

Seguir leyendo...

Usar reset CSS o normalizar

Cada navegador tiene su propia interpretación de las etiquetas de HTML, y aunque en gran medida son muy similares siempre hay pequeños detalles que hacen la diferencia, además existe la posibilidad que que cada usuario asigne estilos por defecto a sus preferencias de navegación, cambiando tipografías, colores, etc. En el caso de la imagen asociada […]

Seguir leyendo...

Estudio de caso: Creando la plataforma “AMK Pro”

Hace unas semanas escribí un estudio de caso acerca de cómo creé la plataforma AMK Pro, en la cual se publican mis cursos y lo envíe a WooThemes dado que sus productos juegan un rol muy relevante. Después de algunos correos de ida y vuelta con ideas y mejoras al artículo, ayer finalmente fue publicado en […]

Seguir leyendo...

Hay 4 opiniones

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 10.903 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.