Lier une feuille de style de police externe à un système de marque

Cet article s'applique uniquement aux modèles d'automatisation de contenu, qui sont différents des modèles personnalisés Brandfolder et de CI Hub. 

Votre marque peut déjà avoir vos polices numériquement accessibles et prêtes pour le Web via un CDN (Content Delivery Network). Dans ce cas, vous pouvez simplement lier la feuille de style CSS qui déclare et accède à vos polices hébergées dans un système de marque, prêt à être utilisé dans vos modèles.

Liaison de votre première feuille de style

1. Dans l'onglet typographie du système de marque, cliquez sur Modifier dans le coin supérieur droit de la page.
2. Nous pouvons soit mettre à jour une police déclarée dans une police existante, soit recommencer à zéro avec une nouvelle police et une nouvelle liste de polices.
3. Cliquer Ajouter une source sur une entrée de police non liée pour ouvrir le mode de liaison de la feuille de style. 
4. Basé sur le@font-facefont-familyest déclaré dans votre feuille de style, vous pouvez spécifier la police que vous souhaitez lier dans le Nom entrée. S'il en existe plusieurs, consultez la section polices multiples ci-dessous.
5. Cliquer Ajouter une source pour finaliser le processus de liaison.

Votre nouvelle police sera désormais liée à votre CDN, de sorte que chaque fois que vous créez un modèle, il sera disponible. 

Mise en forme de la feuille de style

Lorsque vous liez une feuille de style externe, Brand System attend un fichier CSS accessible au public qui contient un ou plusieurs@font-facedéclarations à vos polices. 

Votre fichier devrait ressembler à ce qui suit. N'oubliez pas que la feuille de style que vous liez à Brand System devra toujours accéder aux polices que vous déclarez dans lesrcURL.

@font-face { famille de polices : 'Helvetica'; src : url('helvetica-bold.woff2') format('woff2'), url('helvetica-bold.woff') format('woff'); épaisseur de police : bold ; style de police : normal ; } @font-face { famille de polices : 'Helvetica'; src : url('helvetica.woff2') format('woff2'), url('helvetica.woff') format('woff'); épaisseur de police : normal ; style de police : normal ; } @font-face { famille de polices : 'Helvetica'; src : url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight : normal ; font-style : italic ; }

Polices multiples dans votre feuille de style

Si votre feuille de style ressemble à l'exemple ci-dessous (c.-à-d. plusieurs@font-facefont-familydéclarations) vous devrez configurer plusieurs polices avec le même lien CDN. Cela vous permet de créer correctement des échelles de type en fonction de vos polices nouvellement liées. Pour voir à quoi cela ressemble en action, regardez la vidéo ci-dessous. 

@font-face { famille de polices : 'Poppins'; src : url('poppins.woff2') format('woff2'), url('poppins.woff') format('woff'); font-weight : normal ; font-style : italic ; } @font-face { font-family : 'Helvetica'; src : url('helvetica-bold.woff2') format('woff2'), url('helvetica-bold.woff') format('woff'); font-weight : bold ; font-style : normal ; } @font-face { font-family : 'Helvetica'; src : url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight : normal ; font-style : normal ; } @font-face { font-family : vetica'; src : format url('helvetica-italic.woff2')('woff2'), format url('helvetica-italic.woff')('woff'); épaisseur de police : normale; style de police : italique; }

Autres ressources

• MDN Web Docs : @font-face
• Digital Ocean : Comment définir des polices personnalisées en CSS avec @font-face et font-display