Korte samenvatting:
Upload je woff of woff2 lettertype naar de Library en kopieer de link. Ga naar CMS > Website: Jouw website ⚙︎ > Ontwerp en plak de CSS-code onderaan. Voeg een @font-face blok toe met het pad naar je bestand en stel in :root in welke koppen het lettertype moeten gebruiken.
Wil je je website een unieke uitstraling geven? Dan kan een eigen lettertype helpen. Sapphire biedt standaard een set lettertypes, maar soms past een ander lettertype beter bij je huisstijl.
Wanneer kies je voor een eigen lettertype?
Bijvoorbeeld: je organisatie heeft in haar branding een speciaal lettertype dat niet in de standaardset zit. Of je wilt voor koppen een opvallend lettertype gebruiken dat je website onderscheidt van andere websites.
In dit artikel lees je hoe je een eigen lettertype toevoegt aan je Sapphire-website.
Sapphire heeft al een aantal professionele lettertypes ingebouwd. Controleer eerst of het lettertype dat je wilt gebruiken al beschikbaar is:
| Lettertype (font) | Omschrijving |
|---|---|
| Open Sans | Modern, goed leesbaar lettertype |
| Montserrat | Strak en geometrisch lettertype |
| Oswald | Krachtig lettertype voor koppen |
| Roboto Slab | Lettertype met schreven |
| Inter | Modern lettertype geoptimaliseerd voor schermen |
| Playfair Display | Elegante koppen |
| Source Serif 4 | Klassiek lettertype met schreven |
Tip: Deze lettertypes kun je instellen via CMS > Website: Jouw website ⚙︎ > Ontwerp > Typografie. Wanneer je gebruik maakt van deze standaard fonts, zijn de instellingen per pagina en per categorie te overschrijven.
Wat heb je nodig?
Voordat je begint, zorg dat je lettertype in het juiste formaat is. Websites kunnen alleen werken met woff of woff2 bestanden. Andere formaten zoals ttf of otf werken niet op het web.
Heb je alleen een ttf of otf bestand? Dan moet je dit eerst converteren naar woff of woff2. Dit kun je doen met gratis online tools zoals CloudConvert of FontSquirrel.
Eigen lettertype instellen
Stap 1: Upload het lettertype naar Library
- Ga naar Library in je Procurios omgeving
- Maak eventueel een nieuwe map aan voor lettertypes (bijvoorbeeld 'Fonts')
- Upload je woff of woff2 bestand(en)
- Klik op het bestand en kopieer de downloadlink (je hebt deze link later nodig)
Stap 2: Open de CSS-instellingen van je website
- Ga naar CMS en zorg dat je de website hebt geselecteerd waarop je het lettertype wilt instellen
- Klik in de website-structuur (de boomstructuur links) op het bovenste niveau: Website: Jouw website ⚙︎
- Klik op 'Ontwerp'
- Scroll helemaal naar beneden tot je het veld CSS ziet
Let op: Het CSS-veld zie je alleen op het bovenste niveau van je website. Bij losse pagina's of artikelen zie je dit veld niet.
Stap 3: Voeg de CSS-code toe
Plak onderstaande code in het CSS-veld. Pas de code aan met jouw gegevens:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Open Sans'),
url('/l/library/download/urn:uuid:e58b339f-15fc-4900-a803-4863e40ac5ce/open-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 200;
font-display: swap;
src: local('Montserrat'), local('montserrat'),
url('/l/library/download/urn:uuid:g88b333f-15fc-4970-b915-3574e45a655d/montserrat-latin-200-normal.woff2') format('woff2'),
url('/l/library/download/urn:uuid:q20f489a-04hf-0463-l640-03679n70h680s/montserrat-latin-200-normal.woff') format('woff');
}
:root {
--bodyFont: 'Open Sans';
--h1Font: 'Open Sans';
--headingsFont: 'Montserrat';
--quoteFont: Montserrat;
}In bovenstaand voorbeeld worden 2 eigen lettertypen (Open Sans en Montserrat) gebruikt. (Deze zijn al onderdeel van de vaste set, hier alleen als voorbeeld gebruikt om te tonen hoe je dat met eigen lettertypen doet).
Stap 4: Pas de code aan voor jouw lettertype
Dit moet je aanpassen in de code:
In het @font-face blok:
- font-family - Vul hier de naam van je lettertype in (bijv. 'Mijn Lettertype')
- font-style - Gebruik 'normal' voor een normaal lettertype of 'italic' voor cursief
- font-weight - Het gewicht van je lettertype:
- 200 = extra licht
- 400 = normaal
- 700 = vet
- url - Plak hier de downloadlink die je in stap 1 hebt gekopieerd
In het :root blok
Hier bepaal je waar het lettertype gebruikt wordt. Kies één of meer van deze opties:
- --bodyFont - Lettertype voor alle normale tekst op je website
- --headingsFont - Lettertype voor alle koppen (h1 tot h6)
- --h1Font - Lettertype alleen voor de grootste koppen (h1)
- --quoteFont - Lettertype voor citaten
Vul achter elke instelling de naam in die je bij font-family hebt gebruikt.
Tip: Laat opties die je niet gebruikt gewoon weg uit de :root blok.
Stap 5: Opslaan en controleren
- Klik op 'Opslaan'
- Open je website in een nieuw tabblad
- Controleer of het lettertype correct wordt weergegeven op de plekken waar je het verwacht
Belangrijk om te weten
Ontwerpinstellingen werken niet meer
Wanneer je een eigen lettertype via CSS toevoegt, overschrijf je de standaard lettertypes. Dit betekent:
- Je kunt het lettertype niet meer kiezen in Ontwerp > Typografie
- Het lettertype wordt altijd gebruikt, op alle pagina's
- Wil je toch terug naar de standaard lettertypes? Verwijder dan de CSS-code
Laadtijd van je website
Eigen lettertypes kunnen de laadtijd van je website iets vertragen. Gebruik daarom alleen de varianten die je echt nodig hebt (bijvoorbeeld alleen normaal en vet, niet ook nog extra licht, medium, etc.).
Veelgestelde vragen
Technisch wel, maar let op auteursrechten. Gebruik alleen lettertypes waar je een licentie voor hebt. Veel gratis lettertypes vind je op Google Fonts of Font Squirrel.
Controleer of:
- Het bestand het formaat woff of woff2 heeft
- De downloadlink correct is (kopieer deze opnieuw uit Library)
- De naam bij font-family overeenkomt met de naam in het :root blok
- Je op 'Opslaan' hebt geklikt en de pagina hebt ververst
- De artikelen die je bekijkt de juiste kop-instellingen hebben
Nee, CSS op website-niveau geldt voor de hele website.