Configurar Fontes Personalizadas para Uso em an App Builder aplicativo

Este artigo explica como configurar fontes personalizadas para uso em an App Builder aplicativo. No cenário em que você deseja usar um tipo de fonte específico que não está disponível no Google Fonts, App Builder suporta a capacidade de trabalhar com um tipo de fonte personalizado.

Veja Configurar Google Fonts para uso em App Builder artigo para obter informações sobre como configurar o Google Fonts.

Caso de Uso

As empresas geralmente têm um tipo de fonte específico declarado como parte de suas diretrizes de marca, e essa fonte pode não estar disponível no Google Fonts. Neste cenário, App Builder suporta a capacidade de carregar os arquivos de fonte como parte de um widget e referenciá-los em um arquivo CSS usando o @font-face funcionalidade.

Configurar Fontes Personalizadas

Siga os passos descritos no CSS Loader artigo para recuperar a pasta CSS Loader.zip
Extraia o conteúdo da pasta .zip
Copie os arquivos de fonte personalizados que você usará para seu App Builder app no diretório superior do CSS Loader
- Por exemplo: SuisseIntl-Regular.otf, SuisseIntl-Light.otf, SuisseIntl-Bold.otf, SuisseIntl-SemiBold.otf
Use um programa editor de código, como o Visual Studio Code, para abrir o styles.css arquivo para edição
Configure as seguintes informações no styles.css arquivo para especificar informações para a fonte personalizada desejada usando o @font-face regra:
- O font-weight regular deve ser especificado primeiro no arquivo styles.css. Veja a sintaxe de exemplo abaixo.
- Os valores do font-weight devem estar no formato numérico (por exemplo, 300, 400, 500, 600, etc.). Usar lighter, normal, bold, bolder não funcionará para vários pesos.
- Os valores de font-weight (por exemplo, 300, 400, 500, 600, etc.) que você definir para cada arquivo de fonte serão os valores de font-weight que você usa em Temas para alterar o peso e só podem existir uma vez por peso (por exemplo, você não pode ter 2 arquivos de fonte definidos com o mesmo valor de font-weight)
Exemplo de sintaxe Styles.css
```
/* Suisse Font */

@font-face {
    font-family: "SuisseIntl";
    src: url("SuisseIntl-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "SuisseIntl";
    src: url("SuisseIntl-Bold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: "SuisseIntl";
    src: url("SuisseIntl-SemiBold.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "SuisseIntl";
    src: url("SuisseIntl-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}
```
Salve todas as alterações no styles.css arquivo
Siga os passos descritos no CSS Loader para carregar o widget CSS Loader para uma coleção que seu aplicativo está usando
Siga as etapas descritas para adicionar o CSS Loader como um widget do site
Por fim, você precisa configurar o tema do seu aplicativo para especificar a fonte personalizada
- Navegue até o tema do seu aplicativo
- Adicione um estilo direcionado à área do site, selecione Fonte como o tipo de estilo e defina o valor Nome para o nome da fonte personalizada. Por exemplo: "SuisseIntl"