WordPress is al een hele tijd op weg naar een echte Web Fonts API – met de release van Gutenberg 12.8 op 16 maart 2022 is het zover. Leer hoe je de WordPress Web Fonts API kunt gebruiken en wat er eindelijk zal veranderen dankzij de Web Fonts API.
Met de WordPress Web Fonts API kun je onder andere dynamisch aangepaste lettertypen aan je WordPress themes toevoegen, waardoor je meer controle krijgt over de tekst op je WordPress website.
Wat is een API eigenlijk?
API is de afkorting van Application Programming Interface. Dit betekent dat je programma's met elkaar laat communiceren, zodat zij op een beperkte en gecontroleerde manier gegevens kunnen uitwisselen.
Wat is de nieuwe WordPress Web Fonts API?
In september 2021 werd een voorstel van WordPress ontwikkelaar Ari Stathopoulos voor een Web Fonts API besproken in de community. De WordPress Web Fonts API is een grote doorbraak voor jou als webontwikkelaar of ontwerper. Met de WordPress Web Fonts API kun je lettertypes in je WordPress websites integreren zonder dat je je zorgen hoeft te maken over de font-face regel of het cross domain beleid.
De WordPress Web Fonts API is geïntegreerd in de nieuwe Gutenberg versie 12.8 en het is de bedoeling dat die in de Core komt met WordPress 6.0. "Het feit dat het zo lang heeft geduurd om zover te komen is een bewijs van hoe complex webfonts kunnen zijn" – zoals Héctor Prieto uitlegt in de officiële blogpost voor Gutenberg 12.8 op WordPress.org.
Nu dit franework er is, kunnen er verdere tools en optimalisaties bovenop worden gebouwd om ervoor te zorgen dat WordPress de best mogelijke ervaring (en privacy) biedt voor eindgebruikers.
"*" geeft verplichte velden aan
Waarom is een Core API noodzakelijk?
Standaarden maken een routinematige toepassing van lettertypen mogelijk. Het is een standaard, zodat elke ontwikkelaar naar een paar regels code kan kijken en kan begrijpen wat de code doet. Door de invoering van een API wordt een stabiele basis voor toekomstige ontwikkelingen mogelijk gemaakt.
Het Gutenberg project
De Gutenberg editor werd ontwikkeld. Naast de mogelijkheid om globale stijlen te gebruiken, moesten ontwikkelaars in Gutenberg ook kunnen specificeren welke lettertypes op de pagina gebruikt moesten worden. Dankzij het feit dat het een API is, kunnen andere toepassingen of delen van dezelfde toepassing ook de gegevens van de WordPress Web Fonts API ophalen.
Een toepassingsscenario: je hebt een ontwikkelaar opdracht gegeven om een aangepaste cookiebanner te maken. Op je WordPress website gebruik je de WordPress Web Fonts API om aan te geven welke lettertypes gebruikt moeten worden. De ontwikkelaar kan dezelfde webfonts gebruiken die op de andere website worden gebruikt.
Je kunt dezelfde API gebruiken om de lettertypes op de website te beheren. Je hoeft de instellingen niet op meerdere plaatsen te beheren. Maar de eerste versie is slechts een fundament waarop het WordPress team zal voortbouwen.
De weg naar een Web Fonts API in WordPress is voor ontwikkelaars een rollercoaster aan emoties geweest. Nadat het werd verwijderd uit WordPress 5.9, werd het verplaatst naar het Gutenberg project waar het kon worden ontwikkeld samen met verwante functies die er op berustten.
Dit betekent dat je je lettertypes vanaf dezelfde plaats kunt gebruiken en instellen en dat de wijzigingen worden gesynchroniseerd met alle plaatsen waar je de WordPress Web Fonts API gebruikt. Het is het vermelden waard dat de eerste versie slechts een basis is waarop het WordPress team verder zal bouwen.
In dit artikel laten we je zien hoe je de WordPress Web Fonts API kunt gebruiken, van het installeren tot het toevoegen van lettertypes aan de API. Laten we beginnen.
Wat doet de WordPress Web Fonts API?
Deze API is de eerste stap om het laden van lettertypes op een krachtige, privacyvriendelijke en toekomstbestendige manier mogelijk te maken – iets wat zonder een dergelijk framework erg moeilijk is.
Met de WordPress Web Fonts API kunnen thema-ontwikkelaars opgeven welke lettertypefamilies in WordPress moeten worden gebruikt, samen met de bijbehorende bestanden. WordPress laadt automatisch de lettertypes met de juiste CSS in de editor en frontend. In de eerste versie van de WordPress Web Fonts API, worden scripts en stijlen in een wachtrij geplaatst. De reden hiervoor is de behoefte aan een uniforme oplossing.
De Web Font API functie fungeert als een omhulsel voor de stylesheet API. Dit komt omdat om een webfont in een wachtrij te plaatsen, het font-bestand zelf in een wachtrij moet worden geplaatst door het stylesheet in een wachtrij te plaatsen (of een inline-stijl toe te voegen).
Aanvankelijk kun je alleen lokale lettertypen gebruiken. In de toekomst zal het WordPress team zeker ondersteuning toevoegen voor meer lettertype aanbieders.
In plaats van ze te verwijderen, kunnen we ze misschien goed implementeren en lokaal gehoste webfonts afdwingen om de prestaties en privacy te verbeteren? Op deze manier zouden we het goede voorbeeld geven en een aanzienlijke verbetering van de prestaties en privacy in het WordPress ecosysteem zien, omdat themes en plugins die momenteel Google fonts, Adobe fonts, enz. gebruiken, de API zullen overnemen.
Citaat van GitHub
Het kan leiden tot prestatieproblemen wanneer de downloads van themes groter worden als alleen lokale lettertypes worden ondersteund. Voor veel thema's zou dit echter geen probleem moeten zijn – één, twee of drie lettertypepakketten zouden voldoende moeten zijn voor de meeste themes. Maar als globale stijlvariaties populair worden, zouden we themes kunnen zien met veel lettertypes voor verschillende voorgedefinieerde designs.
Hoe gebruik je de WordPress Web Fonts API
Laten we nu eens kijken hoe de nieuwe WordPress Web Fonts API in de praktijk kan worden gebruikt.
Er zijn twee methoden om webfonts bij WordPress te registreren: via je "theme.json" bestand, wat standaard is sinds WordPress 5.8, of via de @font-face methode. De sleutels en waarden van de theme.json komen meestal overeen met de CSS @font-face regel. Als je ze niet kent, moet je je kennis opfrissen. De @font-face regel is een CSS stijl waarmee je het lettertype kunt specificeren dat je op je website wilt gebruiken.
Je kunt een lettertype gebruiken dat al op de computer van de gebruiker is geïnstalleerd of je kunt een lettertype laden van een externe server. Het bestand theme.json bevat de lijst van lettertypes die je op je website wilt gebruiken. Het bevat de naam van het lettertype, de URL van het lettertypebestand en het gewicht en de stijl van het lettertype.
We zullen nu bekijken hoe je de lettertypes kunt veranderen met behulp van het theme.json bestand. Om dit te doen, moet je verbinding maken met je WordPress website via SFTP. Dit is hoe je toegang krijgt tot de bestanden op je website. Gebruik een FTP-client naar keuze. (Merk op dat Raidboxes alleen SFTP ondersteunt en geen onversleutelde FTP). Ik gebruik Termius.
Zodra je verbinding hebt gemaakt met je server en in de home-map bent, zie je een map met de naam "disk". Klik hierop.
In de map "disk" zie je twee mappen (dit kan er in sommige gevallen anders uitzien), maar je moet klikken op de map "WordPress". Onder de map "WordPress" zie je de gebruikelijke WordPress bibliotheek van bestanden. Klik op de map "wp-content" en onder deze map op de map "themes".
We zijn nu in de map waar alle geïnstalleerde WordPress thema's zijn opgeslagen. Ik klik op twentytwentytwo voor kleine demonstratie. Op de afbeelding zie je het bestand dat je naar je computer moet downloaden om het bestand te kunnen bewerken.
Nadat je het bestand "theme.json" hebt geopend met de normale editor of je favoriete IDE, voeg je de webfonts toe als onderdeel van een speciale lettertypefamilie definitie onder settings.typography.fontfamily.
},
„typography“: {
"customFontSize": true,
"dropCap": false,
"fontFamilies": [
{
}, "fontFamily": "Outfit", "sans-serif",
„name“: „Outfit“,
„slug“: „primary“
},
{
„fontFamily“: „monospace“,
„name“: „Monospace“,
„slug“: „monospace“
}
Nadat je het bestand "theme.json" hebt geopend in een willekeurige teksteditor.
Je kunt de tag "typografie" vinden als je door de code kijkt. Dan zie je de tag "fontFamilies", waaronder je de lettertypen invoert die je aan je WordPress website wilt toevoegen. Op de foto zie je rode markeringen. Zoals op de foto hierboven.
Afhankelijk van welk theme je gebruikt, kan de code er anders uitzien. In een ander voorbeeld gebruik ik het standaardthema twentytwentytwo zonder wijzigingen. Zoals je onder de eerste "fontfamily" kunt zien, zie je de code voor System Font Stack (De systeem- en standaardlettertypen worden gebruikt op computers en mobiele telefoons). Lees hier meer over lettertypen.
Gebruiksvoorbeelden
Met de WordPress Web Fonts API voor de nieuwste versie van WordPress, kunnen ontwikkelaars aangeven welke lettertypes ze willen gebruiken in de Theme Editor. Stel dat een ontwikkelaar een lettertypecombinatie wil gebruiken volgens de wensen van de klant.
Dan is het voor de redacteur erg gemakkelijk om een artikel te publiceren. De redacteur hoeft niet na te denken over lettertypecombinaties, die zijn al vooraf ingesteld. Dit voorbeeld laat zien wat het idee achter de Font API is.
Conclusie over de WordPress Web Fonts API
De WordPress Web Fonts API is voor jou als webdesigner een beslissende stap naar voren. Door theme-ontwikkelaars toe te staan om lettertypefamilies en bijbehorende bestanden te definiëren, zorgt WordPress voor het laden van de lettertypes in zowel de editor als de frontend. Dit maakt ontwikkeling en ontwerp veel gemakkelijker en efficiënter.
In dit artikel heb ik beschreven hoe de WordPress Web Fonts API werkt. Heb je al geprobeerd om het te gebruiken? Ik zou graag jouw mening horen.
Jouw vragen over de WordPress Web Fonts API
Welke vragen heb je voor Noel? Voel je vrij om de commentaarfunctie te gebruiken. Wil je op de hoogte blijven van nieuwe artikelen over het onderwerp online marketing? Volg ons dan op Twitter, Facebook, LinkedIn of via onze nieuwsbrief.
