Hoe voeg je een lettertype toe in Elementor?

Auteur foto

Geschreven door Arjan Wendt (van trendt)

In dit artikel

In Elementor heb je standaard de beschikking over meer dan 1700 lettertypen uit het aanbod van Google Fonts. Wil je een ander lettertype gebruiken, bijvoorbeeld omdat je deze toepast in je huisstijl? Dan biedt Elementor de mogelijkheid om dit lettertype handmatig toe te voegen. In dit artikel lees je hoe je dat doet.

Let op: deze functie is alleen beschikbaar in Elementor Pro. Heb je nog geen Elementor Pro? Voor nog geen 5 euro per maand heb je al een licentie. Bekijk hier de mogelijkheden voor Elementor Pro.

Soorten bestanden van lettertypen

Om een lettertype toe te kunnen voegen, heb je een bestand nodig dat dit lettertype bevat. In Elementor kun je vijf verschillende bestandstypen uploaden:

  • WOFF (Web Open Font Format, voor moderne browsers)
  • WOFF2 (Web Open Font Format 2, voor supermoderne browsers)
  • TTF (TrueType Fonts, voor Safari, Android en iOS)
  • SVG (met SVG-lettertypen kan SVG worden gebruikt als symbolen bij het weergeven van tekst, bijvoorbeeld voor oudere iPhones)
  • EOT (Embedded OpenType, werkt alleen in Internet Explorer)

Zorg dus dat je het lettertype van je huisstijl in één van deze bestandstypen beschikbaar hebt. Je kunt het beste gebruik maken van een WOFF-bestand, want dit wordt ondersteund door alle populaire browsers.

Heb je het lettertype alleen beschikbaar als bijvoorbeeld een OTF-bestand, dan kun je dit bestand met behulp van online tools omzetten naar WOFF, WOFF2 of TTF.

Een lettertype uploaden in Elementor

Een lettertype uploaden in Elementor is heel simpel:

  1. Ga in het dashboard van je WordPress met je muis op het item Elementor staan en klik in het menu dat verschijnt op Aangepaste lettertypes (dit heet Custom Fonts als je de Engelse versie hebt geïnstalleerd)
  2. Klik bovenin op Nieuwe toevoegen (Add New)
  3. Voer de naam van het lettertype in en klik op Statisch letterype toevoegen (Add static font)
  4. Selecteer het ‘gewicht’ van de variant die je uploadt. De meeste lettertypen hebben verschillende gewichten, waarbij 100 staat voor heel dun en 900 voor heel dik. Ter indicatie: de meest gebruikte varianten zijn 400 (normaal) en 700 (vetgedrukt). Het gewicht staat vermeld in de bestandsnaam
  5. Selecteer een stijl (normaal of schuin – italic, dit staat vermeld in de bestandsnaam van het lettertype)
  6. Klik op Publiceren (Publish) om je lettertype meteen toe te voegen aan de lettertypenbibliotheek van je website, of klik op Statisch lettertype toevoegen (Add font variation) als je nog mee varianten van het lettertype wilt uploaden

Lettertype bekijken in Elementor

Wil je checken of het lettertype succesvol is toegevoegd aan de lettertypenbibliotheek van je website? Ga dan naar de bewerkmodus van één van je pagina’s, klik onder het stijltabje op typografie en als het goed is verschijnt het lettertype dat je zojuist hebt toegevoegd bovenaan in de lijst. Nu kun je er mee aan de slag!

Lettertype wordt niet goed weergegeven

Het kan gebeuren dat het lettertype niet goed wordt geupload. Als je het dan aanklikt in de editor, wordt het standaard lettertype van het thema dat je gebruikt weergegeven. In het geval van Hello is dat bijvoorbeeld Roboto.

Leeg allereerst de cache van je website zodat je kunt uitsluiten dat het een caching issue is.

Wordt het lettertype nog steeds niet (goed) weergegeven?

De meest voorkomende fout is dat het lettertype is geupload als http-bestand in plaats van als https. Je kunt dit eenvoudig oplossen door naar het overzicht van de Aangepaste lettertypes te gaan (zie stap 1 uit de handleiding hierboven), vervolgens met je muis op het lettertype dat je wilt aanpassen te staan en dan op ‘Bewerken’ klikken. Daarna klik je bij een variant die je hebt geupload op ‘Bewerk’, ga je met je muis in het witte vak staan waar de link naar het lettertype wordt weergegeven en voeg je na http simpelweg een s toe. Dit herhaal je bij eventuele andere varianten die je hebt geupload en je sluit af door op de knop ‘Updaten’ te klikken. Als het goed is wordt het lettertype nu wel goed weergegeven.

Nog steeds niet goed? Leeg dan eerst weer de cache. Als het probleem zich blijft voordoen, dan zit er waarschijnlijk een fout in het bestand dat je hebt geupload. Probeer het lettertype dan ergens anders te downloaden, of vraag bij de maker van het lettertype of dit probleem vaker voorkomt.

Video tutorial voor het toevoegen van lettertypen in Elementor

Wil je het proces liever op beeld zien? Bekijk dan deze korte video van de makers van Elementor:

deel dit bericht.