--- title: "Como configurar uma fonte de cabeçalho personalizada na base de conhecimento" slug: "how-to-configure-a-custom-header-font-in-the-knowledge-base" description: "Get the header 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" updated: 2026-06-22T08:58:57Z published: 2026-06-22T08:58:57Z canonical: "docs.document360.com/how-to-configure-a-custom-header-font-in-the-knowledge-base" excludeFromExternalSearch: true --- > ## 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 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](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 código** para copiar o código de incorporação, depois volte para Document360. ![Selecting a font and copying the embed code from Google Fonts](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Google%20fonts%20GIF.gif) --- ### Passo 2 - Adicionar o link da fonte ao HTML Personalizado 1. No portal Document360, navegue até **Conexões** > **Integrações**. 2. **Selecione 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** > **personalização do site** > **CSS & JavaScript personalizados** no portal da base de conhecimento. ![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) 2. A aba **CSS personalizada** é selecionada por padrão. Clique no **botão Adicionar trechos de código** . 3. 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*/ } ``` 1. 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. 2. Atualize o `color` valor com a cor da fonte desejada. 3. Clique **em Salvar**. ![Custom CSS tab showing the font family and colour settings applied for the custom Google Font](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Heading%20font%20-%20custom%20css.png) --- ## 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. ![Side-by-side comparison showing the knowledge base before and after applying a custom Google Font](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Before%20After%20Header%20font%20change.png) --- ## 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.