Half oktober 2017 heeft Elegant Themes de wens van veel Divi gebruikers verhoord en zijn de lettertype mogelijkheden enorm verbeterd. Zo zijn alle Google Fonts (600+) toegevoegd in zowel alle modules als in de Customizer, en is het op module niveau mogelijk om de kopteksten H1 tot en met H6 in te stellen. Dit laatste werkt op het moment dat ik dit bericht schrijf helaas nog niet in de Customizer, maar ik ben ervan overtuigd dat dat niet lang op zich zal laten wachten.

Font upload

Een andere mogelijkheid die deze update ons biedt is het uploaden van ‘eigen’ fonts, in TTF, OTF, WOFF, EOT formaat. Hoe geweldig is dat? De dagen dat we scripts moesten uploaden, en/of CSS moesten gebruiken om eigen fonts te plaatsen in Divi liggen achter ons. Of toch nog niet helemaal?

Laten we eens kijken hoe deze font upload werkt. Het is bijna Halloween, dus ik maak voor dit voorbeeld gebruik van het ‘Ghastly Panic’ lettertype, dat gratis te downloaden is van de website 1001fonts.

Na download bevat het pakketje een .ttf of True Type Font bestand. De .zip wordt uitgepakt op een plek waar hij makkelijk te vinden is en ik ga naar de module waar ik Ghastly Panic wil gebruiken. Ik typ mijn tekst, geef die een H3 tag en ga naar de ontwerp tab van de module. Bij de Koptekst zie je direct dat er H-tags zijn toegevoegd:


Ik klik op H3 en daarna op ‘upload’, geef het nieuwe lettertype een naam en browse naar waar ik de .ttf van Ghastly Panic heb toegevoegd. Het nieuwe lettertype is toegevoegd en kan gebruikt worden.

Wat als het uploaden niet direct werkt?

Ik heb even gespeeld met deze optie, en kwam erachter dat niet alle lettertypes even eenvoudig laden. Dit is een kleine ‘bug’ in versie 3.083 van Divi, en is eenvoudig op te lossen. Er zijn 2 methoden.

Als je toegang hebt tot de FTP van je website, ga je naar wp-content -> themes -> Divi -> includes -> builder en zoek daar de functions.php.
Let op, je vindt dit pad niet in je Child Theme!

Vervolgens open je functions.php en zoekt naar deze code: esc_attr( $font_src ), en vervangt die door sanitize_text_field( $font_src ). Voordat je dit doet, altijd een backup van je site maken uiteraard. Nu laden alle lettertypes met de extensies  TTF, OTF, WOFF, EOT.

 

 

Als je geen toegang hebt tot de FTP, gebruik dan de (tijdelijke) plugin WP File Manager. Hiermee kun je op dezelfde wijze het juiste file vinden, aanpassen en opslaan. Vervolgens kun je de plugin weer verwijderen.

Conclusie

Al met al ben ik erg blij met deze toevoeging van Divi. Het biedt enorm veel mogelijkheden, en je hoeft niet meer met CSS te knoeien om het juiste lettertype op je website te zetten. Het is erg jammer dat de tags nog niet in de Customizer, dus voor de gehele site, kunnen worden ingesteld, maar daar zal ongetwijfeld in de nabije toekomst een update voor komen. Voorlopig is dit een mooie toevoeging en ik ben er blij mee!