Vincular uma folha de estilo de fonte externa a um sistema de marca

As folhas de estilo de fontes externas podem ser vinculadas a um sistema de marca.

Quem pode usar isso?

Planos:

Brandfolder

Permissões:

Os administradores podem vincular uma folha de estilo de fonte externa a um sistema de marca.

Descubra se essa capacidade está incluída em Smartsheet Regions ou Smartsheet Gov.

Este artigo se aplica apenas a modelos de Automação de Conteúdo, que são diferentes dos Modelos Personalizados da Brandfolder e do CI Hub.

Sua marca já pode ter suas fontes digitalmente acessíveis e prontas para a web por meio de uma CDN (Rede de Distribuição de Conteúdo). Neste caso, você pode simplesmente vincular a folha de estilo CSS que declara e acessa sua (s) fonte(s) hospedada (s) ao sistema de marca, pronto para usar em seus modelos.

Como vincular sua primeira folha de estilo

Na guia Tipografia, no sistema de marca, clique em Editar, no canto superior direito da página.
Podemos atualizar uma fonte declarada em uma fonte existente ou podemos começar do zero com uma nova fonte e lista de fontes.
Clique em Adicionar fonte em uma entrada de fonte desvinculada para abrir o modal de link de folha de estilo.
Com base nas@font-facefont-family declaradas em sua folha de estilo, você poderá especificar qual fonte deseja vincular na entrada Nome. Se existirem várias, confira a seção de várias fontes abaixo.
Clique em Adicionar fonte para finalizar o processo de vinculação.

Sua nova fonte agora será vinculada à sua CDN, portanto, sempre que você criar um modelo, ele estará disponível.

Formatação da folha de estilo

Ao vincular uma folha de estilo externa, o Brand System espera um arquivo CSS acessível ao público que contenha uma ou mais declarações @font-face para suas fontes.

Seu arquivo deve se parecer com o abaixo. Lembre-se de que a folha de estilo que você vincula ao Brand System ainda precisará acessar as fontes que você declara nos URLs do 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-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal; font-style: italic; }

Várias fontes em sua folha de estilo

Se a sua folha de estilo for semelhante ao exemplo abaixo (ou seja, várias declarações @font-facefont-family), você terá que configurar várias fontes com o mesmo link de CDN. Isso é para que você possa criar corretamente escalas de tipo com base em suas fontes recém-ligadas. Para ver como isso se parece em ação, confira o vídeo abaixo.

@font-face { font-family: 'Poppins'; src: url('poppins.woff2') format('woff2'), url('poppins.woff') format('woff2'); font-weight: normal; font-style: itálico; } @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; ital}

Aplica-se a

Recursos

Quem pode usar esse recurso?