Diseña y publica tus sitios rápidamente

Agrega tipografías de Typekit a tu sitio Breezi

Es muy útil agregar TypeKit a tu sitio Breezi. De esta forma podrás usar una tipografía personalizada cuando le agregues etiquetas H (de títulos y subtítulos) a tus textos. Con este tutorial, aprenderás a hacerlo en unos cuantos pasos. Dividiremos esta publicación en dos secciones:

  • Pasos en TypeKit
  • Pasos en Breezi

Pasos en TypeKit

Los primeros pasos se llevarán a cabo en TypeKit. Si tienes preguntas sobre esta sección del tutorial, contacta a TypeKit para que te asistan o escribe un comentario al final de este artículo.

Crea un Kit de TypeKit

Accede a tu cuenta de TypeKit y crea un Kit propio. Ponle el nombre que quieras que aparezca en el código.

Página de Create a Kit

Nombre y dominio en el que se usará

El código

Una vez que hayas creado un Kit, la página te redirigirá a un lugar donde podrás copiar el código que necesitarás pegar en Breezi. Copia el código que te proveerán.

Código de TypeKit

Copia el código que te proveerán en TypeKit

Selecciona la tipografía

Ha llegado el momento de agregar algunas fuentes. Busca entre las opciones de la biblioteca del sitio.

Alguna de las fuentes que puedes elegir en TypeKit

Alguna de las fuentes que puedes elegir en TypeKit

Agrégale una etiqueta

Una vez que hayas seleccionado la tipografía que quieres usar, asígnale una etiqueta. Asegúrate de que dicha etiqueta sea fácil de recordar porque deberás agregarla en el código que usarás para tu sitio Breezi (el que copiaste en el paso anterior).

Selector

Agrega una etiqueta a la tipografía que quieras usar en tu sitio Breezi

Reemplaza el código

Busca el nombre CSS de la tipografía y reemplázalo en el código que copiaste (o en este code) en la sección que te indicaremos a continuación. Reemplaza la etiqueta y la tipografía que escogiste.

CSS

Este es un ejemplo del código que necesitarás copiar y pegar en el código predeterminado que copiaste primero

De regreso en Breezi

Ahora debemos de trabajar en tu sitio Breezi. Haz clic en “More” de la barra inferior y luego selecciona la ocpión de “URL/Custom Tracking Code”. Pega el código que obtuviste de Typekit en Custom Analytics. También deberás pegar la versión modificada de este código con los espacios de la etiqueta (tag) y del nombre de la fuente (font name) personalizados. El código debe ser parecido al de la imagen a continuación. Haz clic en “Save Changes” para guardar los cambios. La página se cargará de nuevo.

Custom Analytics

Las flechas indican al código de TypeKit y los espacios que tendrás que reemplazar con la etiqueta y el nombre de la fuente que escogiste

Tu sitio

De regreso en tu sitio, una vez que hayas reemplazado y guardado el código, selecciona una de las etiquetas para el encabezado en el editor y parecerá como si no hubiera hecho nada. Sin embargo, al publicar el sitio, podrás ver que la tipografía de Breezi será reemplazada por la que tu seleccionaste en TypeKit.

Menú desplegable que muestra la etiqueta para el encabezado que se seleccionó en ese ejemplo

Menú desplegable que muestra la etiqueta para el encabezado que se seleccionó en ese ejemplo

Así es como se verá la tipografía una vez que hayas publicado tu sitio.

Este es un ejemplo de cómo se verá la tipografía que seleccionamos con TypeKit

Este es un ejemplo de cómo se verá la tipografía que seleccionamos con TypeKit

Y eso es todo por hoy

Lee nuestros otros tutoriales para tu sitio Breezi. Siéntete libre de hacer preguntas en la sección de comentarios.