# 014: Polices personnalisées avec Typekit - Astuces CSS

Anonim

Nous avons mis en place un nouveau kit dans Typekit pour la v10. Pour la personnalisation, nous utiliserons Proxima Nova Soft pour le moment et d'autres polices qui ressemblent le plus possible aux polices HF&J de notre maquette.

Nous sommes un peu inquiets du poids du Kit (littéralement la taille du fichier de toutes les polices) mais nous pensons pouvoir faire un peu mieux avant la production.

Nous utilisons le JavaScript asynchrone fourni par Typekit, ce qui devrait être bon pour le temps de chargement de notre page et nous protéger contre d'éventuelles pannes de Typekit. Cela signifie que nous devons avoir un peu de fantaisie avec la façon dont les polices se chargent, ce que nous allons aborder.

Dans notre fichier bits.scss, où nous conservons actuellement des variables, nous créons un @mixin personnalisé pour nos piles de polices. Cela signifie qu'il sera très facile de changer les polices utilisées si jamais nous en avons besoin (changer en un seul endroit). Nous voulons que bits.scss ne génère absolument aucun CSS lors de la compilation, afin qu'il puisse être @importé sur n'importe quelle page qui en a besoin sans rien ajouter à cette page en l'important.

Nous informons Typekit de nos domaines de développement local personnalisés, que nous mettrons en place ensuite.