Como configurar uma fonte de cabeçalho personalizada na base de conhecimento

O Document360 inclui um conjunto de fontes de cabeçalho embutidas, mas você pode ir além das opções padrão carregando qualquer fonte do Google Fonts na sua base de conhecimento. Isso é feito em duas partes: carregar o arquivo de fonte via HTML Personalizado e depois aplicá-lo ao seu conteúdo via CSS Personalizado. O processo leva cerca de cinco minutos e dá acesso à biblioteca completa do Google Fonts, mais de 1.500 fontes, para combinar com sua marca ou estilo de documentação.

Quando usar isso

Use essa personalização quando quiser:

• Aplique uma fonte específica do Google que não esteja incluída na lista padrão de fontes do Document360.
• Ajuste a tipografia da sua documentação com as diretrizes do seu produto ou marca.
• Melhore a consistência visual entre sua base de conhecimento e seu site ou interface de produto.

Antes de começar

• Você precisa de acesso às Conexões > Integrações > HTML Personalizado no portal da Base de Conhecimento para completar o Passo 2.
• Você precisa de acesso às Configurações (
  ) > site da base de conhecimento > Personalização do site > CSS & JavaScript personalizados para completar o Passo 3.
• Este guia usa o Google Fonts como fonte de exemplo, mas a mesma abordagem funciona com qualquer fonte web que forneça um link de embed HTML e uma declaração CSS font-family .
• O processo envolve três etapas sequenciais: obter o código da fonte, adicioná-lo ao HTML Personalizado e então aplicá-lo no CSS Personalizado. Todos os três passos são necessários para que a fonte seja renderizada corretamente.

Como configurar uma fonte Google no Document360

Passo 1 - Obtenha o código de embed do Google Font

1. Vá para o Google Fonts.

2. Selecione a fonte desejada. A página da fonte aparece com os estilos disponíveis.

3. No canto superior direito, clique em Obter fonte e depois selecione Incorporar código.

   Na seção Web , o código de incorporação da fonte escolhida aparece.

4. Clique em Copiar código para copiar o código de incorporação, depois volte para Document360.

Passo 2 - Adicionar o link da fonte ao HTML Personalizado

5. No portal Document360, navegue até Conexões > Integrações.
6. Selecione HTML Personalizado e clique em Adicionar. A Header (above </head>) opção é selecionada por padrão, mantenha essa seleção.
7. Cole o código de incorporação copiado no passo 4 na seção Cabeçalho .
8. Clique em Adicionar.

Passo 3 - Aplicar a fonte no CSS personalizado

9. Navegar até Configurações (

   ) > site da base de conhecimento > personalização do site > CSS & JavaScript personalizados no portal da base de conhecimento.

   

10. A aba CSS personalizada é selecionada por padrão. Clique no botão Adicionar trechos de código .

11. Selecione a opção Alterar fonte do título . O seguinte modelo de código aparece:

body {
  font-family: "Source Sans Pro", sans-serif;    /*Replace your body font family*/ 
  color: #222222;    /*Font color*/ 
}

12. Substitua font-family: "Source Sans Pro", sans-serif; pelas regras CSS para especificar famílias do código embeded que você copiou no passo 4.
13. Atualize o color valor com a cor da fonte desejada.
14. Clique em Salvar.

Desfecho

A fonte personalizada agora é aplicada em toda a sua base de conhecimento. O antes e o depois abaixo mostram a diferença na tipografia após completar as três etapas.

Melhores práticas

• Complete as três etapas em ordem. Carregar a fonte em HTML Personalizado sem aplicá-la no CSS Personalizado não terá efeito visível; A fonte estará disponível para o navegador, mas não será atribuída a nenhum elemento. Da mesma forma, adicionar uma font-family declaração no CSS sem carregar o arquivo de fonte primeiro fará com que o navegador volte à fonte padrão.
• Use exatamente o font-family valor do código de incorporação. O Google Fonts fornece a string CSS font-family precisa no código embed, sob "CSS rules to specify families." Copie esse valor exatamente, incluindo a pilha de reserva, para evitar inconsistências entre navegadores.
• Teste em vários navegadores após salvar. A renderização das fontes pode variar um pouco entre Chrome, Safari, Firefox e Edge. Visualize sua base de conhecimento em pelo menos dois navegadores para confirmar que a fonte carrega e exibe corretamente.
• Mantenha a fonte de reserva. O sans-serif recurso de remédio font-family: "Your Font", sans-serif; garante que os leitores ainda vejam uma fonte legível caso a fonte do Google não carregue (por exemplo, em ambientes que bloqueiam requisições externas). Sempre inclua um plano B genérico.
• Considere o peso da fonte e o desempenho. O Google Fonts permite que você selecione pesos específicos (Regular, Negrito, etc.) ao gerar o código de incorporação. Carregue apenas os pesos que você precisa — carregar todos os pesos disponíveis aumenta o tempo de carregamento da página.