feat: Add section on installing custom themes and fonts, including Fontsource installation via NPM and best practices for font usage. #3111
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…ntsource installation via NPM and best practices for font usage.
veslav3
force-pushed
the
feat/font-documentatie
branch
from
b276e77 to
f650089
Compare
|
| <link rel="stylesheet" href="<jouw-thema>.css" /> | ||
| ``` | ||
|
|
||
| Mocht je nog geen eigen thema hebben, dan kun je een thema maken op basis van het [start-thema](https://nldesignsystem.nl/handboek/huisstijl/themas/start-thema/). Het [voorbeeld-thema](https://nldesignsystem.nl/handboek/huisstijl/themas/voorbeeld-thema/#voorbeeld-thema) is hierop gebaseerd en dient als voorbeeld hoe je dit ook zou kunnen bereiken met je eigen thema. |
There was a problem hiding this comment.
Goede verwijzing naar documentatie, maar het blijft abstract wanneer je welk thema kiest (start vs voorbeeld). Gebruik het start thema als je vanaf nul begint, en het voorbeeld thema als je een compleet uitgewerkt referentiepunt wilt
|
|
||
| Daarom is het beter om fonts lokaal te hosten of via een NPM package te installeren, mits je NPM gebruikt. | ||
|
|
||
| Soms worden fonts bijgewerkt, daar moet je ook op voorbereid zijn. |
There was a problem hiding this comment.
Verbind dit expliciet aan versioning of testing, bijvoorbeeld: “Door versiebeheer (zoals via NPM) voorkom je onverwachte wijzigingen in productie.”
| import "@fontsource/fira-sans/700.css"; // Bold | ||
| ``` | ||
|
|
||
| 3. Gebruik het font in je CSS variabelen (in je thema configuratie): |
There was a problem hiding this comment.
Geef aan of --font-family-base een NLDS token is of een eigen variabele, en hoe dit doorwerkt in componenten.
| - **Google Translate**: Als een gebruiker de pagina vertaalt, kunnen er karakters nodig zijn die niet in je standaard subset zitten. | ||
| - **Internationale tekens**: Voor talen als Japans worden karakters vaak pas geladen als ze nodig zijn. Door de juiste definities te hebben, zorg je voor een goede weergave in alle scenario's. | ||
|
|
||
| ## Heb je feedback? |
There was a problem hiding this comment.
Misschien nog uitleg over token naming & overrides?
| - **Google Translate**: Als een gebruiker de pagina vertaalt, kunnen er karakters nodig zijn die niet in je standaard subset zitten. | ||
| - **Internationale tekens**: Voor talen als Japans worden karakters vaak pas geladen als ze nodig zijn. Door de juiste definities te hebben, zorg je voor een goede weergave in alle scenario's. | ||
|
|
||
| ## Heb je feedback? |
There was a problem hiding this comment.
Het document zegt wat je moet laden, maar niet in welke volgorde en waarom dat belangrijk is?
No description provided.