--- title: "Hoe configureer je een aangepaste header-lettertype in de kennisbank" 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" tags: ["CSS Snippets", "Custom font"] updated: 2026-06-22T09:03:37Z published: 2026-06-22T09:03:37Z 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. # Hoe configureer je een aangepaste header-lettertype in de kennisbank Document360 bevat een set ingebouwde headerlettertypen, maar je kunt verder gaan dan de standaardopties door elk lettertype uit Google Fonts in je kennisbank te laden. Dit gebeurt in twee delen: het lettertypebestand laden via Custom HTML, en het vervolgens toepassen op je content via Custom CSS. Het proces duurt ongeveer vijf minuten en geeft je toegang tot de volledige Google Fonts-bibliotheek, meer dan 1.500 lettertypen, om bij je merk of documentatiestijl te passen. --- ## Wanneer dit te gebruiken Gebruik deze aanpassing wanneer je wilt: - Pas een specifiek Google-lettertype toe dat niet in de standaardlettertypelijst van Document360 staat. - Stem je documentatietypografie af op de richtlijnen van je product of merk. - Verbeter de visuele consistentie tussen je kennisbasis en je website of productinterface. --- ## Voordat je begint - Je hebt toegang nodig tot **Connections** > **Integrations** > **Custom HTML** in het Knowledge Base-portaal om Stap 2 te voltooien. - Je hebt toegang nodig tot **Instellingen** ( ) > **Knowledge Base-site** > **site-aanpassing** > **Custom CSS & JavaScript** om Stap 3 te voltooien. - Deze gids gebruikt Google Fonts als voorbeeldbron, maar dezelfde aanpak werkt met elk weblettertype dat een HTML-embed-link en een CSS-declaratie `font-family` biedt. - Het proces bestaat uit drie opeenvolgende stappen: haal de lettertypecode op, voeg deze toe aan Custom HTML, en pas deze toe in Custom CSS. Alle drie de stappen zijn vereist om het lettertype correct te laten weergeven. --- ## Hoe configureer je een Google Font in Document360 ### Stap 1 - Haal de Google Font embed-code op 1. Ga naar [Google Fonts](https://fonts.google.com/). 2. Selecteer het gewenste lettertype. De lettertypepagina verschijnt met beschikbare stijlen. 3. Klik rechtsboven op **Font krijgen** en selecteer vervolgens **'Embed code' opstellen**. In de **websectie** verschijnt de embed-code voor het door jou gekozen lettertype. 4. Klik **op Code kopiëren** om de embed-code te kopiëren en keer dan terug naar 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) --- ### Stap 2 - Voeg de lettertypelink toe aan Custom HTML 1. Navigeer in het Document360-portaal naar **Verbindingen** > **Integraties**. 2. Selecteer **Aangepaste HTML** en klik op **Toevoegen**. De `Header (above </head>)` optie is standaard geselecteerd, behoud deze selectie. 3. Plak de embed-code die in stap 4 is gekopieerd in het **Header-gedeelte** . 4. Klik **op Toevoegen**. ![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) --- ### Stap 3 - Pas het lettertype toe in Custom CSS 1. Navigeer naar **Instellingen** ( ) > **Kennisbanksite** > **Site-aanpassing** > **Custom CSS & JavaScript** in het kennisbankportaal. ![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. Het tabblad **Custom CSS** is standaard geselecteerd. Klik op de **knop 'Code snippets toevoegen** '. 3. Selecteer de optie ' **Hoofdstuk lettertype wijzigen** '. Het volgende codesjabloon verschijnt: ``` body {  font-family: "Source Sans Pro", sans-serif;    /*Replace your body font family*/  color: #222222;    /*Font color*/ } ``` 1. Vervang `font-family: "Source Sans Pro", sans-serif;` door de CSS-regels om families te specificeren uit de embed-code die je in stap 4 hebt gekopieerd. 2. Werk de `color` waarde bij met de gewenste lettertypekleur. 3. Klik **op Opslaan**. ![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) --- ## Uitkomst Het aangepaste lettertype wordt nu toegepast in je kennisbank. Het voor- en naverhaal hieronder toont het verschil in typografie na het voltooien van alle drie de stappen. ![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) --- ## Best practices - **Voltooi alle drie de stappen in volgorde.** Het laden van het lettertype in Custom HTML zonder het toe te passen in Custom CSS heeft geen zichtbaar effect; Het lettertype is beschikbaar voor de browser, maar niet toegewezen aan een enkel element. Evenzo zal het toevoegen van een `font-family` declaratie in CSS zonder eerst het lettertypebestand te laden, ervoor zorgen dat de browser terugvalt naar het standaardlettertype. - **Gebruik precies de `font-family` waarde van de embed-code.** Google Fonts levert de precieze CSS-string `font-family` in de embedcode onder "CSS-regels om families te specificeren." Kopieer deze waarde exakt, inclusief de fallback-stack, om te voorkomen dat er inconsistenties tussen browsers worden weergegeven. - **Test in browsers na het opslaan.** De lettertypeweergave kan iets variëren tussen Chrome, Safari, Firefox en Edge. Bekijk je kennisbank in minstens twee browsers om te bevestigen dat het lettertype correct laadt en wordt weergegeven. - **Houd het fallback-lettertype.** De `sans-serif` fallback zorgt `font-family: "Your Font", sans-serif;` ervoor dat lezers nog steeds een leesbaar lettertype zien als het Google Font niet laadt (bijvoorbeeld in omgevingen die externe verzoeken blokkeren). Neem altijd een generieke fallback mee. - **Houd rekening met lettertypegewicht en prestaties.** Google Fonts laat je specifieke gewichten selecteren (Regular, Vet, enz.) bij het genereren van de embed-code. Laad alleen de gewichten die je nodig hebt — het laden van alle beschikbare gewichten verlengt de laadtijd van de pagina.