Een eigen font inladen op de shop

Wil je een eigen font gebruiken op je Rood Fluweel ticket site? Dat kan! In dit artikel leggen we je uit hoe je een eigen font kunt inladen via de CSS en wat je moet doen als je een foutmelding krijgt vanwege CORS-instellingen.

Let op bij het copieren van de code voorbeelden hieronder. Sommige programma's veranderen de afkappingstekens naar speciale tekens. Hou er dus rekening mee dat je ze mogelijk manueel opnieuw moet tijpen.

Stap 1: je eigen font inladen via CSS

Om een eigen font te gebruiken op je ticket site, voeg je eerst het font toe via CSS met de @font-face regel. Dit ziet er als volgt uit:

@font-face {
    font-family: 'MijnEigenFont';
    src: url('https://jouwfontserver.com/fonts/mijneigenfont.woff2') format('woff2'),
         url('https://jouwfontserver.com/fonts/mijneigenfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Vervang 'MijnEigenFont' door de naam die je wilt gebruiken voor je font.
Pas de URL's aan naar de locatie waar jouw fontbestanden zijn gehost.
Zorg ervoor dat je alle benodigde formaten van het font (zoals .woff2 en .woff) aanbiedt voor de beste browserondersteuning.
Gebruik HTTPS

Stap 2: CORS-instellingen configureren

Als je het font op een externe server host, kan het zijn dat je de volgende foutmelding krijgt:

Reason: CORS header 'Access-Control-Allow-Origin' missing

Dit betekent dat de server waarop je font gehost is, de toegang vanaf jouw Rood Fluweel ticket site blokkeert. Om dit op te lossen, moet je de CORS-instellingen op de server waar het font gehost is aanpassen.

CORS configureren via .htaccess

Als je server Apache gebruikt, kun je de CORS-header toevoegen in de .htaccess-file:

Open de .htaccess-file op de server waar het fontbestand staat.
Voeg de volgende code toe:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://tickets.roodfluweel.be"
</IfModule>

Hiermee geef je expliciet toestemming aan je Rood Fluweel ticket site om het font te laden.

Waarom specifiek tickets.roodfluweel.be?

De CORS-header moet het exacte subdomein specificeren waar je site wordt gehost (in dit geval https://tickets.roodfluweel.be). Dit zorgt ervoor dat alleen verzoeken van dat subdomein het font mogen laden, wat een goede veiligheidsmaatregel is.

Een wildcard gebruiken (niet aanbevolen)

Als je om bepaalde redenen alle domeinen toegang wilt geven, kun je een wildcard gebruiken:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Let op: Het gebruik van een wildcard (*) is meestal niet aanbevolen omdat het een veiligheidsrisico kan vormen. Het is beter om specifieke domeinen toe te staan.

Stap 3: Gebruik het font in je CSS

Nu je het font correct hebt geïmporteerd en de CORS-instellingen hebt geconfigureerd, kun je het font toepassen op elementen op je website:

body {
    font-family: 'MijnEigenFont', sans-serif;
}

Vervang 'MijnEigenFont' door de naam van het font zoals je die in de @font-face hebt gedefinieerd.

Extra tips

Controleer of de module mod_headers actief is op je server. Zonder deze module werken de CORS-instellingen niet.
Als je blijft tegen problemen aanlopen, controleer dan of er geen typfouten in de URL's of in de @font-face declaratie zitten.

Met deze stappen zou je je eigen font succesvol moeten kunnen laden op je Rood Fluweel ticket site. Mocht je toch nog problemen tegenkomen, neem gerust contact op met onze support 👍