In Sapphire wordt een vaste set aan lettertypen aangeboden. Als je een lettertype buiten deze set wilt gebruiken, dan is het toch mogelijk om dat op jouw website te gebruiken. Hieronder leggen we uit hoe je dit doet.
Lettertype op het web moeten in het formaat "woff" en/of "woff2" zijn (geen "ttf", "otf" etc.).
Eigen lettertype implementeren
In onderstaand 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).
- Upload de
woffen/ofwoff2bestanden in een map naar keuze in Library. - Kopieer de link van het bestand, deze heb je in stap 5D 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-stylefont-weighturl: 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.
Door gebruik te maken van eigen lettertypen, overschrijf je de lettertypen in de ontwerpinstellingen. Maatwerk lettertypen zijn dus niet te kiezen in de ontwerpinstellingen en worden dus altijd gebruikt.
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';
--quoteFont: Montserrat;
}
Klik om te kopiëren