Extra Fonts

Custom Fonts & lokale fonts

Plugin; Custom Fonts van Brainstormforce

  1. Font Downloaden:
    Download het gewenste font van Google Fonts
  2. Font Converteren:
    Zet de fontbestanden om naar .woff en .woff2 via Transfonter
1️⃣ Uploaden van fonts

  • Fonts altijd via de Custom Fonts plugin uploaden, niet direct in de Media Library of /uploads.

  • De plugin accepteert .woff, .woff2, .ttf, .otf.

  • Probleem met WordPress uploadrechten? Voeg dit toe aan functions.php:

function custom_mime_types($mimes) {
$mimes[‘woff’] = ‘font/woff’;
$mimes[‘woff2’] = ‘font/woff2’;
$mimes[’ttf’] = ‘font/ttf’;
$mimes[‘otf’] = ‘font/otf’;
return $mimes;
}
add_filter(‘upload_mimes’, ‘custom_mime_types’);

Fonts  worden fysiek opgeslagen in:

/wp-content/uploads/custom-fonts/{font-id}/

Media Library items kunnen daarna verwijderd worden; de plugin gebruikt zijn eigen map en database.

2️⃣ Google Fonts vs. lokaal

  • Google Fonts via plugin = standaard extern (geladen vanaf Google).

  • Wil je lokaal → download het font zelf en upload via Custom Fonts.

  • Lokale fonts = betere performance + GDPR-proof.

3️⃣ Meerdere bestandsformaten per font

  • Voor elke font-weight/style upload je zowel .woff als .woff2.

  • Plugin maakt automatisch @font-face CSS met beide bestanden:

    • Browser kiest automatisch het meest geschikte formaat.

    • .woff2 = modern & snel

    • .woff = fallback voor oudere browsers

  • Je hoeft niks te verwijderen of extra instellingen te doen.

4️⃣ Performance & hygiëne

  • Upload alleen de weights/styles die je echt gebruikt (bijv. Regular, Bold, Italic).

  • Oude ongebruikte fonts = verwijderen via Custom Fonts plugin of Media Library.

5️⃣ Checken of fonts lokaal zijn

  • Open je site → Inspect → Network → Fonts

  • Als het pad /wp-content/uploads/custom-fonts/ is → lokaal ✅

  • Als het van fonts.googleapis.com of fonts.gstatic.com komt → extern ❌

Fonts variaties vanuit plugin Custom Fonts:

Werkt alleen voor paragraph, niet voor headers.

Averia normaal: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Averia light: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Averia vet: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Averia vet italic: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.