Por que usar uma fonte personalizada?

Preservar a consistência e o ritmo da experiência de adoção de um produto só é possível se você conseguir integrar todo o conteúdo de integração com os elementos e o estilo da interface do usuário do seu próprio site.

Como adicionar uma fonte personalizada a um tema?

Você só precisa seguir 3 passos:

1. Defina

Primeiro, você precisa descobrir qual tipo de fonte é usada em sua plataforma web. Se você não sabe como inspecionar o código-fonte, pode seguir os passos aqui .

2. Configurar

• Faça login no seu painel UserGuiding e acesse Temas em Engajamento para criar um novo tema ou atualizar o tema padrão.
• Clique na seção Tipografia ; aqui, você pode alterar a cor, o tamanho e o alinhamento da fonte do texto.
• Aqui, no menu suspenso, você pode selecionar facilmente sua fonte personalizada ou incorporar o CSS e o URL da sua fonte em Fonte Personalizada .
  

3. Configurar ao vivo

• Quando estiver satisfeito com o tema que criou, você pode salvar e publicar as alterações.
  

Formato de fonte personalizado

Ao usar uma fonte personalizada , preencha os dois campos desta forma:

CSS da fonte: font-family: 'Lora';
URL da fonte:  https://fonts.googleapis.com/css2?family=Lora

CSS de fontes — uma única declaração font-family :

 font-family: 'YourFontName';

URL da fonte — um URL público para um arquivo .css (não um link direto para .woff2 / .otf / .ttf ). O arquivo CSS deve conter uma regra @font-face que registre o mesmo nome de fonte:

 @font-face {
  font-family: 'YourFontName';
  src: url('https://your-cdn.com/font.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
 }

O nome no CSS da fonte ( 'YourFontName' ) deve corresponder exatamente ao nome na regra @font-face .

Exemplo:

CSS da fonte: font-family: 'Brandon';

URL da fonte: https://cdn.example.com/fonts.css

Onde fonts.css contém:

 @font-face {
  font-family: 'Brandon';
  src: url('https://cdn.example.com/Brandon-Regular.woff2') format('woff2');
 }

Observação: Para que a fonte seja carregada corretamente, seus arquivos CSS e de fonte devem ser servidos com:

• Content-Type: text/css no arquivo .css
• Access-Control-Allow-Origin: * (ou a origem do seu site) tanto no arquivo .css quanto no binário da fonte.

Teste rápido: abra o URL da sua fonte em uma nova aba do navegador. Se ele for exibido como texto CSS legível, está tudo certo. Se o navegador baixar o arquivo ou exibi-lo como texto simples, o Content-Type está incorreto. Entre em contato com o administrador da sua CDN para corrigir.