Font

Lettertypes toevoegen.

Benodigde stappen:

  1. Voeg de lettertypes toe aan het project.
  2. Voeg de benodigde bestanden toe aan het project.

Lettertype(s) toevoegen aan het project

Overzicht van de stappen om een eigen lettertype toe te voegen.

  1. Voeg de gewenste lettertypes toe aan het project. Bijvoorbeeld binnen een fonts-map.
  2. Maak een css of scss-bestand aan waarbinnen het font aangeroepen kan worden. Zie voor CSS-voorbeelden.
  3. Vul het voorbeeldbestand in met de gekozen lettertypes. Voeg bij src: het pad toe naar de toegevoegde lettertypes binnen het project. Voor meer informatie zie: Voorbeelden lettertypes toevoegen.

Voorbeelden

Lettertype

CSS-voorbeeld
@font-face {
  font-family: "Naam van het font";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/fontnaam.woff2") format("woff2"),
    url("../fonts/fontnaam.woff") format("woff");
}

Lettertype met verschillende varianten

/* Naam van het font */
@font-face {
  font-family: "Naam van het font";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/fontnaam.woff2") format("woff2"),
    url("../fonts/fontnaam.woff") format("woff");
}

@font-face {
  font-family: "Naam van het font";
  font-weight: normal;
  font-style: italic;
  src: url("../fonts/fontnaam-italic.woff2") format("woff2"),
    url("../fonts/fontnaam-italic.woff") format("woff");
}

Icoonlettertype

/* Manon icon font */
@font-face {
  font-family: "Naam van het icon font";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/fontnaam.eot");
  src: url("../fonts/fontnaam.woff") format("woff"),
    url("../fonts/fontnaam.ttf") format("truetype"),
    url("../fonts/fontnaam.svg") format("svg");
}

Lettertype gebruiken

Lettertype applicatiebreed toevoegen

Op een hoog niveau het lettertype toevoegen zodat alle onderliggende tekst-elementen het lettertype gebruiken. Deze optie is fijn als basis-instelling of om de hele applicatie in een keer van hetzelfde lettertype te voorzien.

Visueel voorbeeld:

Lorem ipsum

CSS-voorbeeld:

Het toevoegen van een fallback is mogelijk. Manon heeft een standaard fallback van "sans-serif" als er geen eigen lettertype is ingevuld.

--application-base-font-family: "Naam van het font";

HTML-Voorbeeld:

<p>Lorem ipsum</p>

Uitzonderingen toevoegen

Het is mogelijk om voor specifieke elementen het ingestelde lettertype te overschrijven. Een veel voorkomend voorbeeld is het lettertype voor titels.

Veel componenten hebben ook variabelen beschikbaar om een lettertype toe te voegen per component.

Het toevoegen van een fallback is mogelijk. Manon heeft een standaard fallback van "sans-serif" als er geen eigen lettertype is ingevuld.

Visueel voorbeeld:

Voorbeeld om een lettertype in te stellen voor alle titels.

Lorem ipsum

CSS-voorbeeld:

--headings-font-family: "Naam van het font";

HTML-Voorbeeld:

<h1>Lorem ipsum</h1>

Visueel voorbeeld:

Voorbeeld om een lettertype in te stellen voor een specifieke titel. In dit geval een h1.

Lorem ipsum

CSS-voorbeeld:

--h1-font-family: "Naam van het font";

HTML-Voorbeeld:

<h1>Lorem ipsum</h1>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

Lettertype doorvoeren op applicatieniveau.

Voor meer informatie zie: Stijlkeuzes op applicatie-niveau.

@use "@minvws/manon/application-base";
Lettertype doorvoeren op titels.

Voor meer informatie zie: Titels en Titel basisset.

/* Headings set */
@use "@minvws/manon/headings-base-set";

/* Headings */
@use "@minvws/manon/headings";

Beschikbare Headingsets

Heading-sets kunnen gebruikt worden om op een centrale plek de stijlkeuzes vast te leggen voor de beschikbare titel-weergaven.

Beschikbare styling sets voor headings zijn: