--- title: "Como configurar uma fonte personalizada na base de conhecimento" slug: "how-to-configure-a-custom-font-in-the-knowledge-base" description: "Get the font details and add the font link to the header section in Custom HTML. Then, add the font family details in the Custom CSS. Get the Google font code details → Append the code in custom HTML → Append the code in custom CSS" tags: ["Font", "CSS Snippets", "Custom font"] updated: 2026-06-22T08:58:57Z published: 2026-06-22T08:58:57Z canonical: "docs.document360.com/how-to-configure-a-custom-font-in-the-knowledge-base" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Como configurar uma fonte personalizada na base de conhecimento O Document360 inclui um conjunto de fontes padrão embutidas, mas você pode aplicar qualquer fonte do Google ou qualquer outra fonte web ao texto do corpo da 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 lhe dá acesso à biblioteca completa do Google Fonts para combinar com sua marca ou estilo de documentação. > [!NOTE] > NOTA > > > > > Você também pode configurar fontes personalizadas além das Google Fonts usando o link de embeding HTML apropriado e a declaração CSS `font-family` do seu provedor de fonte. --- ## Quando usar isso Use essa personalização quando quiser: - Aplique uma fonte específica do Google ao texto principal 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 a Etapa 2. - Você precisa de acesso às **Configurações** ( ) > **site de base de conhecimento** > **Personalização do site** > **CSS & JavaScript personalizados** para completar o Passo 3. - Todos os três passos são necessários para que a fonte seja renderizada corretamente. Carregar a fonte sem aplicar o CSS, ou aplicar o CSS sem carregar a fonte, não terá efeito visível. --- ## Como configurar uma fonte personalizada de texto do corpo ### Passo 1 - Obtenha o código de embed do Google Font 1. Vá para [o Google Fonts](https://fonts.google.com/). 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** para copiar o código de incorporação, depois volte para o Document360. --- ### Passo 2 - Adicionar o link da fonte ao HTML Personalizado 1. Navegue até **Conexões** > **Integrações** na barra de navegação da esquerda do portal da Base de Conhecimento. 2. Navegue até a seção **HTML Personalizado** e clique **em Adicionar**. A `Header (above </head>)` opção é selecionada por padrão, mantenha essa seleção. 3. Cole o código de incorporação copiado no passo 4 na seção **Cabeçalho** . 4. Clique **em Adicionar**. ![Adding the Google Font embed code to the Custom HTML Header section in Document360](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Configuring%20custom%20header%20font.gif) --- ### Passo 3 - Aplicar a fonte no CSS personalizado 1. Navegar até **Configurações** ( ) > **Site da base de conhecimento** na barra de navegação da esquerda no portal da base de conhecimento. 2. No painel de navegação à esquerda, navegue até **Personalização do Site** > **CSS & JavaScript Personalizados**. ![Custom CSS and JavaScript settings panel in the Document360 Knowledge base portal](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png) 3. No painel de navegação à esquerda, selecione a aba **CSS** . 4. Clique **em adicionar trechos de código** no canto superior direito do espaço de código. 5. Selecione a **opção Alterar a fonte do texto do corpo** . O seguinte modelo de código aparece: ``` body, article {  font-family: "Source Sans Pro", sans-serif;    /*Replace your body font family*/  color: #222222;    /*Font color*/ } ``` ![Add code snippets panel showing the Change body text font option selected](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Change%20body%20text%20font.png) 1. Certifique-se de que o `article` seletor esteja incluído junto com o `body` seletor no trecho; ambos são necessários para aplicar a fonte em todo o conteúdo do artigo, bem como na página mais ampla. 2. Substitua `font-family: "Source Sans Pro", sans-serif;` pelas regras CSS para especificar famílias a partir do código de embed, copiado no passo 4. 3. Atualize o `color` valor com a cor da fonte desejada. 4. Clique **em Salvar** no canto superior direito. A fonte selecionada agora é aplicada à sua base de conhecimento. Visite o site da base de conhecimento para pré-visualizar as mudanças. --- ## Melhores práticas - **Complete as três etapas em ordem.** Carregar a fonte em HTML Personalizado a torna disponível para o navegador, mas ela não a aplica. O CSS no Passo 3 indica ao navegador onde usá-lo. Ambas as etapas são necessárias e devem referenciar o mesmo nome de fonte. - **Inclua ambos `body` e `article` os seletores.** O `article` seletor garante que a fonte se aplique dentro do conteúdo do artigo, não apenas nos elementos da página ao redor. Sem ele, o texto principal dos artigos pode não mudar. - **Use exatamente o `font-family` valor do código de incorporação.** O Google Fonts fornece a string CSS `font-family` precisa sob "Regras CSS para especificar famílias." Copie esse valor exatamente, incluindo a pilha de reserva, para evitar inconsistências entre navegadores. - **Mantenha a fonte de reserva.** O `sans-serif` recurso de remédio `font-family: "Your Font", sans-serif;` garante que os leitores vejam uma fonte legível mesmo que a fonte do Google não carregue. Sempre inclua um plano B genérico. - **Carregue apenas os pesos de fonte que você precisa.** Ao copiar o código de incorporação do Google Fonts, selecione apenas os pesos específicos que sua documentação usa (por exemplo, Regular 400 e Bold 700). Carregar todos os pesos disponíveis aumenta o tempo de carregamento da página sem benefício. - **Teste na sua base de conhecimento ao vivo depois de salvar.** Mudanças na fonte se aplicam em todo o site. Abra vários tipos de artigos após salvar para confirmar se a fonte carrega e exibe corretamente.