Collegare un foglio di stile di carattere esterno a un sistema di brand

Questo articolo si applica solo ai modelli di automazione dei contenuti, che sono diversi da Brandfolder modelli personalizzati e dall'hub CI. 

Il tuo marchio potrebbe già avere i tuoi font accessibili digitalmente e pronti per il web tramite una CDN (Content Delivery Network). In questo caso, puoi semplicemente collegare il foglio di stile CSS che dichiara e accede ai tuoi font ospitati nel sistema del marchio, pronto per l'uso nei tuoi modelli.

Collegamento del primo foglio di stile

1. Dalla scheda tipografia nel sistema del marchio, fai clic su Modifica nell'angolo in alto a destra della pagina.
2. Possiamo aggiornare un carattere dichiarato in un carattere esistente o possiamo iniziare da zero con un nuovo carattere tipografico e un nuovo elenco di caratteri.
3. Fai clic su Aggiungi sorgente su un tipo di carattere non collegato per aprire il link modale del foglio di stile.
4. In base alla@font-facefont-family dichiarata nel tuo foglio di stile, sarai in grado di specificare quale font vuoi collegare nell'input Nome. Se ne esistono diversi, consulta la sezione Font multipli di seguito.
5. Fai clic su Aggiungi origine per finalizzare il processo di collegamento.

Il tuo nuovo font sarà ora collegato alla tua CDN, quindi ogni volta che crei un modello sarà disponibile. 

Formattazione del foglio di stile

Quando si collega un foglio di stile esterno, Brand System prevede un file CSS accessibile pubblicamente che contenga una o più dichiarazioni @font-faceai tuoi font. 

Il tuo file dovrebbe essere simile al seguente. Ricorda che il foglio di stile che colleghi a Brand System dovrà comunque accedere ai font che dichiari negliURL src.

@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.woff2') format('woff2'), url('helvetica.woff') format('woff'); font-weight: normal; 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: italic; }

Più font nel tuo foglio di stile

Se il tuo foglio di stile assomiglia all'esempio seguente (cioè dichiarazioni multiple@font-facefont-family) dovrai configurare più font con lo stesso link CDN. In questo modo è possibile creare correttamente scale di caratteri in base ai caratteri appena collegati. Per vedere come appare in azione, guarda il video qui sotto. 

@font-face { font-family: '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: 'Helvetica'; src: url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal; font-style: italic; }

Altre risorse

• MDN Web Docs: @font-face
• Digital Ocean: Come definire caratteri personalizzati in CSS con @font-face e font-display