Summary  
This chapter explains how to integrate custom web fonts by adding HTML <link> tags to fetch font resources (with preconnect and CORS considerations) and then applying them in CSS using font-family stacks and fallbacks to ensure consistent, performant typography.

General domain of usage  
Front-end web development

Learn how to add custom fonts to your website using Google Fonts. This video demonstrates how to select a font, embed it in your HTML, and apply it using CSS. You'll see the difference between default and custom fonts, and understand why proper font loading order is important for your site's appearance. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

Lettertypen bepalen in grote mate de uitstraling en het gevoel van een website. Hoogwaardige typografie verbetert de leesbaarheid en maakt een ontwerp memorabel. Veel lettertypen zijn gratis te gebruiken, terwijl voor andere een licentie vereist is; respecteer altijd de auteursrechten.

## Google Fonts Service
Er zijn veel interessante lettertypen gratis beschikbaar. Laten we de mogelijkheden verkennen die worden aangeboden door <a href="https://fonts.google.com/" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> https://fonts.google.com/</a>. Het toevoegen van een Google-lettertype aan de markup is eenvoudig.

Voer eerst het volgende voorbeeld uit, dat het standaardlettertype gebruikt. Het `p`-element heeft de volgende eigenschappen: `font-family` (naam van het lettertype), `font-size` (grootte van het lettertype) en `font-weight` (dikte van het lettertype).

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8cD4KICAgICAgQnVpbGRpbmcgZ3JlYXQgZXhwZXJpZW5jZXMgdGFrZXMgdGltZSwgY2xhcml0eSwgYW5kIGZvY3VzLiBUaGlzIHNwYWNlIGlzCiAgICAgIHJlc2VydmVkIGZvciBmdXR1cmUgY29udGVudCB0aGF0IHdpbGwgZ3VpZGUsIGluZm9ybSwgb3IgaW5zcGlyZS4gV2hldGhlcgogICAgICBpdCdzIGEgc3RvcnksIGEgcHJvZHVjdCBkZXNjcmlwdGlvbiwgb3IgYSBtZXNzYWdlIHRvIHlvdXIgYXVkaWVuY2UgLSBldmVyeQogICAgICB3b3JkIGhlcmUgd2lsbCBtYXR0ZXIuCiAgICA8L3A+CiAgICA8cD4KICAgICAgVW50aWwgdGhlbiwgdGhpbmsgb2YgdGhpcyBhcyBhIHF1aWV0IHBsYWNlaG9sZGVyLiBTb21ldGhpbmcgc2ltcGxlLgogICAgICBTb21ldGhpbmcgd2FpdGluZyB0byBiZWNvbWUgbWVhbmluZ2Z1bC4KICAgIDwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

cCB7CiAgZm9udC1mYW1pbHk6ICdETSBTYW5zJzsKICBmb250LXNpemU6IDI0cHg7CiAgZm9udC13ZWlnaHQ6IDQwMDsKfQ==

De eigenschap font-family werkt niet omdat ons project nog niet op de hoogte is van het "DM Sans"-lettertype. Laten we het lettertype toevoegen aan het project via <a href="https://fonts.google.com/" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> https://fonts.google.com/</a>.

Klik op de afbeelding om de details duidelijker te bekijken.

Typ in het invoerveld "Lettertypen zoeken" de naam van het gewenste lettertype. In dit geval is dat "DM Sans". Zodra het verschijnt, klik op de kaart voor "DM Sans".

Op de pagina van het lettertype, klik op de knop "Get font".

Klik vervolgens op de knop "Get embed code".

Kopieer ten slotte de link en plak deze in het HTML-bestand van je project binnen het `<head>`-element. Het is belangrijk om de link **voor** de link naar je eigen stijlen toe te voegen. Hierdoor laadt de browser eerst de aangepaste lettertypen voordat stijlen die deze lettertypen gebruiken worden toegepast. Nadat je de link hebt toegevoegd, is "DM Sans" beschikbaar als aangepast lettertype voor je project. Voer nu het project uit om te controleren of alles correct werkt.

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0icHJlY29ubmVjdCIgaHJlZj0iaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbSIgLz4KICAgIDxsaW5rIHJlbD0icHJlY29ubmVjdCIgaHJlZj0iaHR0cHM6Ly9mb250cy5nc3RhdGljLmNvbSIgY3Jvc3NvcmlnaW4gLz4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vZm9udHMuZ29vZ2xlYXBpcy5jb20vY3NzMj9mYW1pbHk9RE0rU2FuczppdGFsLG9wc3osd2dodEAwLDkuLjQwLDEwMC4uMTAwMDsxLDkuLjQwLDEwMC4uMTAwMCZkaXNwbGF5PXN3YXAiCiAgICAgIHJlbD0ic3R5bGVzaGVldCIKICAgIC8+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9InN0eWxlcy5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHA+CiAgICAgIEJ1aWxkaW5nIGdyZWF0IGV4cGVyaWVuY2VzIHRha2VzIHRpbWUsIGNsYXJpdHksIGFuZCBmb2N1cy4gVGhpcyBzcGFjZSBpcwogICAgICByZXNlcnZlZCBmb3IgZnV0dXJlIGNvbnRlbnQgdGhhdCB3aWxsIGd1aWRlLCBpbmZvcm0sIG9yIGluc3BpcmUuIFdoZXRoZXIKICAgICAgaXQncyBhIHN0b3J5LCBhIHByb2R1Y3QgZGVzY3JpcHRpb24sIG9yIGEgbWVzc2FnZSB0byB5b3VyIGF1ZGllbmNlIC0gZXZlcnkKICAgICAgd29yZCBoZXJlIHdpbGwgbWF0dGVyLgogICAgPC9wPgogICAgPHA+CiAgICAgIFVudGlsIHRoZW4sIHRoaW5rIG9mIHRoaXMgYXMgYSBxdWlldCBwbGFjZWhvbGRlci4gU29tZXRoaW5nIHNpbXBsZS4KICAgICAgU29tZXRoaW5nIHdhaXRpbmcgdG8gYmVjb21lIG1lYW5pbmdmdWwuCiAgICA8L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

We kunnen het verschil waarnemen tussen het **aangepaste lettertype** en het **standaardlettertype**. Daarnaast heeft elke browser zijn eigen standaardlettertypen. Daarom is het essentieel om te weten hoe aangepaste lettertypen op een website gebruikt kunnen worden.

Beheers de basisprincipes van CSS, de opmaakt taal die het uiterlijk en de uitstraling van webpagina's transformeert. Verken kernconcepten zoals tekststijlen, kleuren, afstand, het boxmodel, Flexbox en decoratieve effecten. Ontwikkel vaardigheden om visueel aantrekkelijke en goed gestructureerde webpagina's te creëren.

Begrijpen hoe CSS wordt gekoppeld aan HTML en hoe stijlen worden toegepast via selectors.
Toepassen van kleuren, tekststijlen en hover-effecten om de visuele presentatie te beheersen.

Verbeter typografie met behulp van regelhoogte, afstand, lettertype-eigenschappen en aangepaste lettertypen. Beheer lettertypefamilies, gewicht, stijl en grootte voor betere leesbaarheid.

Beheer de lay-outstructuur met behulp van margin-, padding-, border- en width-eigenschappen. Inzicht in het gedrag van box-sizing en elementweergavetypen zoals block, inline en inline-block.

Beheer horizontale en verticale lay-outs met behulp van Flexbox-eigenschappen. Pas richting, uitlijning en afstand aan om UI-componenten te structureren.

Verbeter lay-outs met achtergrondkleuren, afbeeldingen, pseudo-elementen en schaduwen. Stijl visuele componenten voor diepte en contrast.

Aangepaste Lettertypen Toevoegen

Google Fonts Service