# 014: Fuentes personalizadas con Typekit - Trucos CSS

Anonim

Configuramos un nuevo kit en Typekit para v10. Para la marca, usaremos Proxima Nova Soft por ahora y algunas otras fuentes que se parecen lo más posible a las fuentes HF&J en nuestra maqueta.

Estamos un poco preocupados por el peso del kit (literalmente, el tamaño del archivo de todas las fuentes) pero creemos que podemos hacerlo un poco mejor antes de la producción.

Usamos el JavaScript asincrónico que proporciona Typekit, que debería ser bueno para el tiempo de carga de nuestra página y protege contra posibles interrupciones de Typekit. Esto significa que tenemos que ser un poco sofisticados con la carga de las fuentes, a lo que llegaremos.

En nuestro archivo bits.scss, donde estamos guardando las variables en este momento, creamos un @mixin personalizado para nuestras pilas de fuentes. Esto significará que será muy fácil cambiar las fuentes en uso si alguna vez lo necesitamos (cambiar en un solo lugar). Queremos que bits.scss no genere absolutamente ningún CSS cuando se compile, por lo que se puede @importar en cualquier página que lo necesite sin que agregue nada a esa página que lo importa.

Le contamos a Typekit sobre nuestros dominios de desarrollo local personalizados locales, que configuraremos a continuación.