Cómo usar TypeKit en su sitio paso a paso

Varias opciones han surgido recientemente para agregar fuentes personalizadas a su sitio web utilizando el selector @ font-face. TypeKit es un nuevo jugador emocionante en este juego porque se destaca en dos áreas clave: facilidad de uso y riqueza de fuentes disponibles. Este tutorial lo llevará a través de varios pasos pequeños y super sencillos para que TypeKit esté en funcionamiento en su sitio. Aquí no encontrará técnicas avanzadas ni scripts, por lo que incluso si es un diseñador web novato, ¡esto debería ser un juego de niños!

Primero: las malas noticias

Si navega por el sitio web de TypeKit, verá que solo tiene la opción de registrarse para recibir una invitación. Esto no significa que obtendrás uno de inmediato, por lo que es posible que tengas que esperar un rato antes de registrarte. Afortunadamente, pude atrapar una invitación del propietario del sitio de Design Shack, David Appleyard, para que pudiera mostrarte todo.

Registrarse

Cuando te registras, te enfrentas a elegir entre uno de los cuatro planes. Mientras sacudes tu cabeza en decepción, déjame explicarte por qué no es solo un servicio gratuito. En pocas palabras, las fuentes cuestan dinero. Hay algunas fundiciones de mega fuentes que crean y venden fuentes de calidad que no descargan las personas de forma gratuita. Antes, si bien, siendo el buen ciudadano que eres, pagabas el precio completo por una fuente de calidad, aún no podías poner esa fuente en tu sitio debido a problemas de licencia. En resumen, incrustar la fuente significaba que los usuarios podían robarla por sí mismos. TypeKit evita este problema en virtud de los acuerdos que ha realizado con las principales fundiciones para otorgar licencias de fuentes para uso web únicamente. Lo que esto significa es que no te quedas atascado con fuentes feas y de baja calidad para tu sitio, sino con una gran selección de fuentes profesionales de primer nivel como las que verías en el mundo de la impresión. Larga historia corta, la calidad tiene un precio. Estos son los planes que puede elegir:

Tenga en cuenta que para este tutorial usaré la demostración gratuita, por lo que veremos una selección de fuentes recortada y estará limitado a dos fuentes personalizadas en nuestro sitio. Con esto en mente, echemos un vistazo a nuestro campo de pruebas.

El sitio de prueba

Para este tutorial he creado un sitio de una sola página rápido y sucio con toneladas de texto. Necesitarás saber que he diseñado el encabezado principal con el? H1? etiqueta y el texto del párrafo utilizando un simple? p? etiqueta. Para ver el sitio de prueba en vivo (y mucho más grande), haga clic aquí o simplemente eche un vistazo a la captura de pantalla a continuación.

Configuración del kit

Después de elegir un plan, su próximo paso es crear su primer kit y configurar una URL. Tenga en cuenta que no necesita insertar una dirección de página específica, sino la url para el sitio en su totalidad. Por ejemplo, puedes ver que acabo de escribir la URL principal de Design Shack.

Al registrarse, también debe recibir una secuencia de comandos para incrustar en su sitio. A continuación veremos qué hacer con esto.

Código de inserción

La clave para que TypeKit anule tu CSS es el siguiente fragmento de código que te dan para insertar en tu html:

Simplemente coloque este código en la sección del encabezado de la página HTML que desea cambiar. ¡Esa es toda la codificación que tienes que hacer! Solo tienes que copiar y pegar, y listo. Asegúrese de publicar la página HTML actualizada en su sitio antes de comenzar a agregar fuentes.

Agregando Fuentes

Lo creas o no, ya casi terminamos. Todo lo que queda es elegir algunas fuentes y decirles dónde ir. Como mencioné anteriormente, TypeKit le ofrece una gran selección de fuentes de alta calidad para elegir si selecciona uno de los planes pagados. Recuerde que el plan gratuito tiene una selección mucho más limitada (aunque de ninguna manera es mala). Para reemplazar nuestro encabezado principal, seleccionaremos una fuente angustiada. En el lado derecho de la lista de fuentes, verá una serie de etiquetas. Haga clic en el? Angustiado? etiqueta para ver sólo las fuentes en dificultades.

Siéntete libre de navegar y elegir el que más te guste. Cuando encuentres uno que te guste, haz clic en? Agregar? Botón (elegí Bodedo). Después de hacer clic en? Agregar? botón, la ventana del editor de kit debería aparecer.

El editor de kit

Después de agregar una fuente, debe aparecer la siguiente ventana:

Aquí es donde aplicará la fuente que eligió a su sitio. Observe que en la parte superior izquierda del editor le dan un selector personalizado para usar en su código (en nuestro caso, .tk-bodedo). Puede ingresar el código en su sitio y reemplazar cualquier selector que desee con el que se proporciona aquí para reemplazar la fuente. Sin embargo, lo que vamos a hacer en cambio es decirle a TypeKit las etiquetas existentes que hemos usado en nuestro sitio. Como dije antes, nuestro encabezado principal es simplemente un? H1? etiqueta, así que todo lo que tenemos que hacer es escribir? h1? (sin comillas) en el campo bajo? selectores? y pulsa añadir.

Ahora pulsa el botón publicar. ¡Eso es! TypeKit hará el resto. Después de un minuto o dos, actualice su página y debería ver aparecer la fuente.

Ajustando tu CSS

Una de las mejores cosas de TypeKit es que solo reemplaza la fuente. Todas las configuraciones relacionadas con la fuente aún son controlables dentro de su CSS. Revise mi página de prueba después de agregar una fuente personalizada a la copia del párrafo.

Observe que la nueva fuente se ve realmente rara con mi configuración de altura de línea actual. Está demasiado extendido y ahora está consumiendo mucho más espacio vertical. Para solucionar este problema, simplemente ingresé a mi archivo CSS y marqué la altura de la línea de mi copia de párrafo. Cualquier cambio que realice en mi CSS aparte de la fuente en sí afectará a la nueva fuente en mi sitio. ¡Así que puedes personalizar tu contenido y tu fuente personalizada permanecerá en su lugar! Aquí está mi altura de línea ajustada.

El producto terminado

Echa un vistazo al sitio terminado aquí para ver TypeKit en acción. A pesar de que el sitio era mucho más atractivo antes de comenzar, puede ver fácilmente los beneficios de TypeKit. Tenga en cuenta que las fuentes personalizadas que ve no residen en su computadora y, sin embargo, tienen una vista previa perfecta y son fácilmente seleccionables.¡Lo mejor de todo es que todo esto se hizo con una GUI fácil de usar y solo un fragmento de código que no tuvimos que escribir! Sin embargo, no soy todo un elogio y cumplido cuando se trata de TypeKit. Antes de concluir, discutamos brevemente lo que encontré como menos que perfecto.

La critica

Primero vamos a discutir errores técnicos. Mencioné anteriormente que cuando llegas a la? Publicar? botón tienes que esperar un minuto antes de que se actualice el sitio. Cuando estás acostumbrado a ver que los cambios codificados se actualizan inmediatamente, esto puede ser muy frustrante. La parte frustrante es la inconsistencia. A veces, los cambios surten efecto casi instantáneamente, mientras que otros lo dejan pulsando el botón de actualización durante unos minutos y esperando a que se produzca el cambio. También experimenté algunos problemas con el sitio en sí. La ventana del editor del kit se niega a iniciarme aproximadamente el 50% del tiempo, en lugar de eso, aparece una ventana en blanco con una animación de carga sin fin. Cerrar la ventana y volver a abrir el editor del kit soluciona el problema, pero sigue siendo una molestia. Finalmente, la estructura de costos no es fácil de justificar para todos los diseñadores. Claro, tener un texto seleccionable en su sitio es genial, pero por $ 250 al año, muchas personas probablemente se limitarán a insertar titulares extravagantes como imágenes.

Conclusión

Eso es todo lo que necesita saber para comenzar a utilizar TypeKit. Revisamos y seleccionamos un plan, configuramos su primer kit, agregamos fuentes a su sitio, publicamos sus cambios y ajustamos su CSS después de implementar fuentes personalizadas. Este es un artículo extenso, pero solo porque dividí el proceso en pasos tan pequeños y manejables. En realidad, puede tener TypeKit en funcionamiento en su sitio en minutos. Regístrese para recibir su invitación y asegúrese de decirnos lo que piensa de TypeKit y otras soluciones de fuentes personalizadas que ha encontrado. Siéntase libre de hacer cualquier pregunta utilizando los comentarios a continuación o vía Twitter.