In Sapphire wordt een vaste set aan lettertypen aangeboden. Als een lettertype niet ondersteund wordt in Sapphire, dan is het toch mogelijk om op jouw website een eigen lettertype te gebruiken. Hieronder leggen we uit hoe je dit doet. Via onderstaande manier overschrijf je de lettertypen in de ontwerpinstellingen. Maatwerk lettertypen zijn dus niet te kiezen in de ontwerpinstellingen.
Let op: Lettertype op het web moeten in het formaat "woff" en/of "woff2" zijn (geen "ttf", "otf" etc.).
Stappenplan
In onderstaand voorbeeld worden 2 eigen lettertypen (Open Sans en Montserrat) gebruikt.
- Upload de
woffen/ofwoff2bestanden in een map naar keuze in Library. - Kopieer de link van het bestand, deze heb je in stap 5c weer nodig.
- Ga naar CMS.
- Ga naar het bovenste niveau in de website tree (Website: Jouw website ⚙︎). Klik hier op "Ontwerp". Alleen daar zie je onderaan de instellingen een CSS veld.
- Plaats onderstaand code voorbeeld in het CSS veld. Pas de nodige instellingen (selectors) aan naar informatie van het lettertype.
font-familyfont-weight-
url: plak hier de link uit stap 2. - Als je het lettertype van de website tekst (bodyFont) wilt aanpassen, vul daar dezelfde
font-familyin als bij 5a. - Als je het lettertype van alle titels (headingsFont) wilt aanpassen, vul daar dezelfde
font-familyin als bij 5a. - Als je het lettertype van alleen kop 1 (h1Font) wilt aanpassen, vul daar dezelfde
font-familyin als bij 5a.
- Sla de instellingen op en bekijk de website met de nieuwe lettertypen.
Code voorbeeld
@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';
}
Klik om te kopiëren