Lettertype downloaden en gebruiken van DaFont

1. Download een Halloween-lettertype

• Ga naar DaFont – Halloween categorie.
• Kies een font dat past bij jouw ontwerp, bijvoorbeeld Creepster, October Crow of You Murderer.
• Klik op Download. Je krijgt een ZIP-bestand (bijv. creepster.zip).
• Open het ZIP-bestand en kopieer het .ttf of .otf-bestand naar je projectmap:

assets/
├─ css/
│   └─ custom.css
└─ fonts/
    └─ creepster.ttf

Gebruik geen spaties of hoofdletters in de bestandsnaam. Bijvoorbeeld: youmurderer.ttf in plaats van You Murderer.ttf.

2. Koppel het lettertype met @font-face

In je custom.css koppel je het lettertype aan een zelfgekozen familienaam. Met de regel @font-face vertel je aan de browser:

1. Welke naam het lettertype krijgt in de CSS (font-family).
2. Waar het lettertypebestand zich bevindt (src: url(...)).
3. Welk type bestand het is (format("truetype") of format("opentype")).

@font-face {
  font-family: "Creepster";                /* Naam die jij aan het font geeft */
  src: url("../fonts/creepster.ttf")       /* Pad naar het echte fontbestand */
       format("truetype");                 /* Type van het fontbestand */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Je mag de familienaam zelf kiezen (bijv. "Halloweens-spooky" of "Mijn-font"), maar de bestandsnaam in url(...) moet exact overeenkomen met de naam van het fontbestand in je map.

Daarna gebruik je de gekozen familienaam in je eigen CSS-stijlen:

h1, h2 {
  font-family: "Creepster", cursive;
  color: #ff4d00;
  text-shadow: 0 0 10px #ff4d00, 0 0 20px #ff7700;
}

Elke @font-face hoort bij één fontvariant (bijv. Regular, Bold, Italic). Wil je ook Bold of Italic gebruiken? Download dan die variant en voeg er een tweede @font-face voor toe met font-weight: 700 of font-style: italic.

3. Toepassen in HTML

Gebruik het lettertype op echte tekst — niet op afbeeldingen:

<header class="hero-halloween text-center text-light">
  <h1>Happy Halloween</h1>
  <p>Durf jij binnen te komen?</p>
</header>

Als je de CSS correct hebt gekoppeld, wordt deze tekst weergegeven met jouw DaFont-lettertype.

4. Veelgemaakte fouten

• ❌ Verkeerd pad → controleer of de map fonts/ naast css/ staat.
• ❌ Geen aanhalingstekens rond de fontnaam.
• ❌ Bestand niet uitgepakt (nog in .zip).
• ✅ Controleer in de browserconsole (F12) of het font correct geladen wordt.

Extra: sfeer en afwerking

Je kunt met kleur en schaduw de sfeer versterken:

h1{
  color: #ff5500;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 10px #ff5500, 0 0 20px #ff8800;
}

Experimenteer met text-shadow en color om een griezelig effect te maken.

Tip — Gebruik de juiste format() waarde

In je @font-face geef je aan welk type lettertypebestand je gebruikt. De waarde in format() moet overeenkomen met de extensie van het fontbestand. Hieronder zie je de meest gebruikte formaten:

Een correcte koppeling ziet er zo uit:

@font-face {
  font-family: "MijnFont";
  src: url("../fonts/mijnfont.otf") format("opentype");
}

Betrouwbare websites voor gratis fonts

Download alleen lettertypes van veilige en legale bronnen. Let op de licentie — sommige fonts zijn enkel gratis voor persoonlijk gebruik.

• DaFont — veel thematische fonts, o.a. Halloween-stijl
• Google Fonts — volledig vrij te gebruiken, via CDN of download
• Font Squirrel — enkel 100 % commerciële licenties
• 1001 Free Fonts — groot aanbod, let op licenties
• Behance — ontwerpers delen gratis fonts met bronvermelding

✅ Controleer altijd of het font in jouw project mag gebruikt worden voor school of publicatie.

Samenvatting

Je hebt geleerd hoe je een lettertype van DaFont kunt downloaden, koppelen via @font-face en toepassen op echte HTML-tekst. Zo gebruik je typografie als expressief onderdeel van je webdesign — zonder afbeeldingen.

Extra oefening — Lichtflikkering toevoegen

Met een eenvoudige @keyframes animatie kun je de titel een flikkerend “neon” effect geven. Zo lijkt de tekst alsof hij even uitvalt of oplicht.

@keyframes flicker {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 10px #ff4d00, 0 0 20px #ff7700;
  }
  50% {
    opacity: 0.7;
    text-shadow: 0 0 25px #ff8800, 0 0 40px #ffaa00;
  }
}

/* Animatie toepassen op de titel */
h1 {
  animation: flicker 2s infinite;
}

Je kunt de duur (2s) aanpassen of de animatie subtieler maken door met de opacity en text-shadow waarden te experimenteren.

Tip: gebruik dit effect enkel op titels of korte woorden, anders wordt de tekst onrustig.

Font converteren naar WOFF2 (aanbevolen) en WOFF

@font-face {
  font-family: "Halloween Spooky";
  src: url("../fonts/halloween-spooky.woff2") format("woff2"),
       url("../fonts/halloween-spooky.woff")  format("woff"),
       url("../fonts/halloween-spooky.otf")   format("opentype"); /* optioneel */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

<link rel="preload" href="/assets/fonts/halloween-spooky.woff2"
      as="font" type="font/woff2" crossorigin>