---
title: "Hoe configureer je een aangepast lettertype in de kennisbank"
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: ["CSS Snippets", "Custom font", "Font"]
updated: 2026-06-22T09:03:37Z
published: 2026-06-22T09:03:37Z
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.

# Hoe configureer je een aangepast lettertype in de kennisbank

Document360 bevat een set standaard ingebouwde lettertypen, maar je kunt elk Google Font of elk ander weblettertype toepassen op de hoofdtekst van je kennisbank. Dit gebeurt in twee delen: het lettertypebestand laden via Custom HTML, en het vervolgens toepassen op je content via Custom CSS. Het proces geeft je toegang tot de volledige Google Fonts-bibliotheek die aansluit bij jouw merk of documentatiestijl.

> [!NOTE]
> OPMERKING
> 
> 
> 
> 
> Je kunt ook aangepaste lettertypen configureren anders dan Google Fonts door de juiste HTML-embed-link en CSS-declaratie `font-family` van je fontprovider te gebruiken.

---

## Wanneer dit te gebruiken

Gebruik deze aanpassing wanneer je wilt:

- Pas een specifiek Google Font toe op de hoofdtekst die 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.
- Alle drie de stappen zijn vereist om het lettertype correct te laten weergeven. Het laden van het lettertype zonder CSS toe te passen, of het toepassen van de CSS zonder het lettertype te laden, heeft geen zichtbaar effect.

---

## Hoe configureer je een aangepaste hoofdtekstlettertype

### 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 Kopiëren** om de embed-code te kopiëren en ga daarna terug naar Document360.

---

### Stap 2 - Voeg de lettertypelink toe aan Custom HTML

1. Navigeer naar **Connections** > **Integrations** in de linker navigatiebalk van het Knowledge Base-portaal.
2. Ga naar de sectie **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** in de linker navigatiebalk in het kennisbankportaal.
2. Navigeer in het linker navigatiepaneel naar **Site-aanpassing** > **Custom CSS & JavaScript**.

![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. Selecteer in het linker navigatiepaneel het **tabblad CSS** .
4. Klik rechtsboven in de coderuimte **op 'Voeg codefragmenten toe'.**
5. Selecteer de optie om **lettertype van de hoofdtekst wijzigen** . Het volgende codesjabloon verschijnt:

```
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. Zorg ervoor dat de `article` selector naast de `body` selector in het fragment is opgenomen; beide zijn nodig om het lettertype toe te passen op de inhoud van het artikel en op de bredere pagina.
2. Vervang `font-family: "Source Sans Pro", sans-serif;` door de CSS-regels om families te specificeren uit de embed-code die in stap 4 is gekopieerd.
3. Werk de `color` waarde bij met de gewenste lettertypekleur.
4. Klik rechtsboven **op Opslaan** .

Het geselecteerde lettertype wordt nu toegepast op je kennisbasis. Bezoek de kennisbanksite om de wijzigingen te bekijken.

---

## Best practices

- **Voltooi alle drie de stappen in volgorde.** Het laden van het lettertype in Custom HTML maakt het beschikbaar voor de browser, maar het wordt niet toegepast. De CSS in Stap 3 vertelt de browser waar hij het moet gebruiken. Beide stappen zijn vereist en moeten dezelfde lettertypenaam vermelden.
- **Neem zowel `body` als `article` selectors op.** De `article` selector zorgt ervoor dat het lettertype wordt toegepast binnen de inhoud van het artikel, niet alleen op de omliggende pagina-elementen. Zonder deze tekst verandert de inhoud in artikelen mogelijk niet.
- **Gebruik precies de `font-family` waarde van de embed-code.** Google Fonts levert de precieze CSS-string `font-family` 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.
- **Houd het fallback-lettertype.** De `sans-serif` fallback `font-family: "Your Font", sans-serif;` zorgt ervoor dat lezers een leesbaar lettertype zien, zelfs als het Google Font niet laadt. Neem altijd een generieke fallback mee.
- **Laad alleen de lettertypegewichten die je nodig hebt.** Bij het kopiëren van de embed-code van Google Fonts, selecteer dan alleen de specifieke gewichten die je documentatie gebruikt (bijvoorbeeld Regular 400 en Bold 700). Het laden van alle beschikbare gewichten verhoogt de laadtijd van de pagina zonder voordeel.
- **Test in je live kennisbank nadat je hebt opgeslagen.** Lettertypewijzigingen gelden op de hele site. Open verschillende artikeltypes na het opslaan om te bevestigen dat het lettertype correct laadt en wordt weergegeven.