Fonts op eigen server in Divi 5
Het lokaal hosten van Google Fonts op je website kan een geweldige manier zijn om de prestaties en de gebruikerservaring te verbeteren. Wanneer je Google Fonts gebruikt, wordt het daadwerkelijke lettertypebestand op de servers van Google gehost, wat je website kan vertragen en de gebruikerservaring negatief kan beïnvloeden. Door de lettertypebestanden lokaal te hosten, kun je dit probleem voorkomen en ervoor zorgen dat je website snel en soepel laadt. Wanneer je Google Fonts lokaal host, profiteer je ook van meer flexibiliteit en aanpassingsmogelijkheden.
De video van DiviCoaching is voor een oudere divi versie maar werkt ook voor Divi 5. https://www.youtube.com/watch?v=cJ5r0qQ6xgo
TIP: Zet de taalmodule van je wordpress op engels. De meeste Youtube tutorials zijn engels.
1e stap:
Schakel eerst het gebruik van Google fonts uit in Divi 5.
Dashboard > Divi > Theme options > Use Google Fonts > uitschakelen > Save Changes
2e stap:
Heb je een probleem om fonts te kiezen voor je website ga dan naar: https://fontpair.co/
Volgens ingewijden is 2 fonts per website genoeg. Een font voor je koptekst en een font voor je bodytekst
Ga naar "Google Webfonts Helper" om de lettertypen te downloaden. https://gwfh.mranftl.com/fonts
Kies in de linkerkolom een lettertype. In de rechterkolom.
1. Select charsets: (default is latin) en vink latin aan.
2. Select styles: (default is regular) en vink je keuze van fontweight aan.
3. Copy CSS: (default is Modern Browsers) en select Modern Browsers
4. Download files: Klik op de blauwe button en download de zipfile.
Eenmaal gedownload extract de zipfile op je computer om de files te uploaden naar divi.
WordPress en Divi 5 laten niet toe om wolf2 lettertype te uploaden vanwege beveilingsmaatregelen. Deze is te om zeilen door de volgende code in de functions.php van je child theme te plaatsen. (Zoek in Google op child theme generator om een child theme te generen.)
Dashboard > Appearance > Theme File Editor > Een venster verschijnt en kies voor button I understand > Selecteer functions.php en kopieer onderstaande code in de functions.php. Dan klik op update file.
Download de script via de onderstaande button.
Lettertypebestanden uploaden
- Open een op tekst gebaseerde module in Divi 5 Visual Builder.
- Ga naar het tabblad Design en selecteerText of Heading Text.
- Klik op het vervolgkeuzemenu met lettertypen en selecteer de knop Upload.
- Typ een naam voor uw lettertype in het promptvenster.
- Klik op Choose Font File om uw .ttf of .otf file (upload afzonderlijke bestanden voor vet, cursief of andere weights).
- Bevestig de upload en sla deze op.
- Zet de lettertype/Heading op Default
Om de Fonts te installeren zodat je de fonts kunt makkelijk kunt aanpassen voor de gehele site.
Dashboard > Divi > Theme Customizer > General Settings > Typography > Verander Headerfont en Bodyfont.
