Gebruik variabele lettertypen

Variabele lettertypen zijn een geavanceerde lettertypetechnologie waarmee een enkel lettertypebestand meerdere stijlen en variaties kan bevatten, zoals verschillende gewichten, breedtes en optische groottes. In tegenstelling tot traditionele lettertypen, die aparte bestanden vereisen voor elke stijl (bijv. vet, cursief, gecondenseerd), kan een variabel lettertype deze kenmerken dynamisch aanpassen binnen een enkel bestand.

Variabele lettertypen hebben verschillende voordelen ten opzichte van traditionele lettertypen:

• Controle: Met traditionele lettertypen ben je beperkt tot vooraf bepaalde kenmerken. Je moet bijvoorbeeld misschien kiezen tussen een gewicht van 400 of 600. Met variabele lettertypen heb je volledige controle, waardoor je een gewicht van 475 kunt kiezen als dat het beste is voor je ontwerp.
• Prestaties: Door gebruik te maken van een enkel lettertypebestand dat alle variaties bevat, kunnen variabele lettertypen het aantal HTTP-verzoeken en de totale bestandsgrootte die nodig is om verschillende lettertypestijlen te laden verminderen, waardoor de websiteprestaties verbeteren.
• Responsieve typografie: Variabele lettertypen maken dynamische aanpassingen aan typografie mogelijk op basis van schermgrootte, resolutie of gebruikersvoorkeuren. Een lettertype kan bijvoorbeeld meer gecondenseerd worden op kleinere schermen om ruimte te besparen of het contrast vergroten bij kleinere groottes voor betere leesbaarheid.
• CSS-integratie: Variabele lettertypen kunnen worden bestuurd met CSS. Eigenschappen zoals `font-weight`, `font-stretch` en `font-style` kunnen worden aangepast met waarden buiten de gebruikelijke vaste set, wat meer gedetailleerde controle biedt. Dit betekent ook dat je animaties kunt toevoegen aan variabele lettertypen.

Variabele lettertypen toevoegen

Voordat je variabele lettertypen kunt gebruiken, moet je ze importeren via WP Admin. 

Opmerking: Variabele lettertypen hebben verschillende variabelen die je kunt gebruiken om ze aan te passen. Breedte en gewicht zijn de twee meest gebruikte en deze twee worden ondersteund in Elementor.  

Om een variabel lettertype toe te voegen:

1. Zoek een variabel lettertype dat je wilt gebruiken en download het naar je pc. Mogelijk moet je het bestand uitpakken.
   Variabele lettertypen zijn beschikbaar bij verschillende aanbieders, waaronder Google Fonts. In Google Fonts kun je het minimum en maximum gewicht en breedte controleren door op Type Tester te klikken en de schuifregelaars te gebruiken om de minimum en maximum waarden te bepalen.
   
   Noteer het minimum en maximum gewicht en breedte van het lettertype. Je hebt dat later nodig.
   
2. Ga naar WP Admin en navigeer naar Elementor>Custom fonts.
   Het Custom Fonts scherm verschijnt.
   
3. Klik op Add new.
   
4. Klik op Add Variable Font.
   Het uploadscherm verschijnt.
   
5. Klik op Upload en navigeer naar de locatie van het lettertypebestand.
   
6. Selecteer het variabele lettertypebestand en klik rechtsonder op Select ttf file.
   
7. Geef het lettertype een naam in het tekstvak Enter Font Family.
   
8. Vink Width aan en voer de minimum en maximum breedte van je lettertype in. Deze informatie is beschikbaar bij de lettertypemaker.
9. Vink Weight aan en voer het minimum en maximum gewicht van je lettertype in. Deze informatie is beschikbaar bij de lettertypemaker.
   
   Note

   Je moet een minimum en maximum gewicht en/of breedte instellen om ervoor te zorgen dat het lettertype correct werkt. Niet alle lettertypen bevatten zowel de breedte- als gewichtvariabele. In deze gevallen vink je alleen de relevante variabele aan.
   
   
10. Klik op Publish/Update.
    Je kunt dit lettertype nu gebruiken in de Elementor Editor.

Variabele lettertypen gebruiken in de elementor editor

Zodra je de variabele lettertypen hebt geïnstalleerd, kun je ze gebruiken in elke widget die een typografie-optie heeft. In het onderstaande voorbeeld gebruiken we een variabel lettertype in de Heading widget.

Om variabele lettertypen in een widget te gebruiken:

1. Sleep een widget met tekst naar het canvas.
   
2. Selecteer in het paneel de optie Typography. Deze optie is meestal te vinden in het tabblad Style.
3. Klik op het potloodpictogram .
   Een lijst met lettertypen en lettertypeopties verschijnt.
   
4. Selecteer een variabel lettertype. Deze lettertypen bevinden zich bovenaan de lettertypelijst in een sectie met het label Variable fonts.
   
5. Gebruik de schuifregelaars Width en/of Weight om het uiterlijk van het lettertype te bepalen.
   Je tekst verschijnt nu precies zoals je het wilt.