Hoe Awesome Typography in WordPress met Typekit toe te voegen

Heb je je ooit afgevraagd hoe ontwerpers in staat zijn om mooie aangepaste weblettertypen op hun sites te gebruiken? Vaak voegen ze aangepaste lettertypen toe aan WordPress met Typekit, een Adobe-service die u toegang geeft tot hoogwaardige lettertypen. In dit artikel laten we u zien hoe u Typekit-lettertypen kunt toevoegen in WordPress om uw typografie te verbeteren.

Waarom Gebruik typekit lettertypen?

Typekit is een populaire op abonnementen gebaseerde fontservice die u veel geld kan besparen. In plaats van te betalen voor individuele lettertypelicenties, die behoorlijk duur kunnen worden, heeft u gratis toegang tot hun hele bibliotheek met honderden lettertypen of tegen een vast jaarlijks tarief.

De Typekit-bibliotheek is een enorme verzameling van meer dan 1.000 lettertypen. Enkele van de mooiste lettertypen die u op internet kunt vinden, zijn beschikbaar via Typekit, een Adobe-service.

Hun eenvoudige gratis abonnement heeft toegang tot 230+ lettertypen en u kunt gratis 2 lettertypefamilies op één website gebruiken. Andere plannen beginnen bij $ 49,99 tot $ 99,99 per jaar.

Deze geweldige typekit-lettertypen kunnen eenvoudig aan elke website worden toegevoegd zonder de laadsnelheden van uw pagina te vertragen. De lettertypen worden weergegeven via Adobe's CDN en laden met veel hogere snelheden dan wanneer u ze op uw eigen site zou hosten.

Typekit voor WordPress Video-zelfstudie

Als je de video niet leuk vindt of meer instructies nodig hebt, kun je hieronder verder lezen.

Waarom aangepaste weblettertypen gebruiken op WordPress?

Typografie speelt een cruciale rol bij het ontwerp van uw site.

Door de juiste lettertypen te kiezen, worden uw persoonlijkheid en boodschap duidelijk overgebracht aan uw lezers. Ongeacht het soort afbeelding dat u wilt weergeven - professioneel, vriendelijk, casual, ervaren - de lettertypen op uw website kunnen helpen bij het projecteren van de juiste afbeelding.

Door de juiste reeks lettertypen te gebruiken, kunt u een blijvende indruk achterlaten. In plaats van er op elke andere site op het web uit te zien, ziet uw tekst er merkbaar anders uit. Als u het juiste lettertype voor uw WordPress-site selecteert, kan uw website gaan van een eenvoudig ontwerp tot een esthetisch en verbluffend kunstwerk.

De juiste aangepaste weblettertypen kunnen:

• verhoging van de wisselkoersen
• verlaag het bouncepercentage van uw site
• verhoog de tijd die u op uw website doorbrengt
• creëer een gedenkwaardige ervaring voor gebruikers

Ben je klaar om aan de slag te gaan met Typekit-lettertypen? Hier leest u hoe u Typekit kunt gebruiken om uw WordPress-ontwerp aan te passen.

Aan de slag met Typekit

Eerst moet u een Typekit-account maken. Ga hiervoor naar Typekit.com om de beschikbare plannen te vergelijken.

U moet kiezen voor welk abonnement u zich wilt aanmelden. Het gratis abonnement beperkt u tot één website en biedt toegang tot beperkte lettertypen. Misschien wilt u aan de slag met het gratis plan om het uit te proberen en later een upgrade uit te voeren. De upgrade biedt u een grotere bibliotheek met lettertypen en u kunt ze op meer websites gebruiken.

De volgende stap is het maken van een kit. Met de kit kun je een specifieke bibliotheek met lettertypen en instellingen voor je website samenstellen, dus laadt Typekit alleen de bestanden en code die nodig zijn. Om uw kit te maken, voegt u uw sitenaam en domeinnaam toe en klikt u vervolgens op Doorgaan met.

Nadat u klaar bent met het invullen van uw informatie voor uw kit, geeft Typekit u een beetje JavaScript-code die u aan uw site kunt toevoegen. U kunt deze code kopiëren en in een teksteditor zoals Notepad plakken om deze voor nu te bewaren. We zullen het toevoegen aan uw site in de volgende stap van deze tutorial.

Voor nu kun je aan de slag gaan met het kiezen van je lettertypen. U kunt door de lettertypebibliotheek bladeren en filteren op opties zoals classificatie, gewicht, breedte, x-hoogte en meer.

Als u een lettertype ziet dat u bevalt, kunt u erop klikken voor meer details en voorbeelden. Als u het wilt toevoegen aan uw webkit, klikt u op Webgebruik: toevoegen aan kit knop aan de rechterkant.

Er verschijnt een pop-up waarin u het lettertype dat u hebt geselecteerd aan de kit die u zojuist hebt gemaakt, moet toevoegen.

Nu kunt u klikken op de Publiceren om de wijzigingen in uw kit op te slaan.

Dat is alles! Uw lettertypekit is nu klaar voor gebruik.

Uw Typekit-lettertypen toevoegen in WordPress

De eenvoudigste manier om uw nieuwe aangepaste weblettertypen aan uw WordPress-blog toe te voegen, is met behulp van een WordPress Typekit-plug-in.

We raden de plug-in Typeekit-lettertypen voor WordPress aan. Na het installeren en activeren van de plug-in, kunt u een bezoek brengen Instellingen "Typekit-lettertypen om de plug-in te configureren.

Eerst moet je de JavaScript-code plakken die je eerder hebt opgeslagen in het Typekit-veld voor insluitcodes. Hierna kunt u CSS-kiezers toevoegen om aan te geven waar u het lettertype op uw site wilt gebruiken.

In de bovenstaande schermafbeelding hebben we het lettertype toegevoegd aan de h1.site-titel CSS-selector.

Uw WordPress-thema kan verschillende klassen gebruiken voor verschillende elementen. U moet het hulpmiddel Inspect Element in uw webbrowser gebruiken om die CSS-klassen te achterhalen. Je kunt ook onze WordPress CSS-spiekbrief voor beginners downloaden om je op weg te helpen.

Dat is alles! We hopen dat dit artikel je heeft geholpen om geweldige typografie toe te voegen in WordPress met Typekit. U kunt ook een kijkje nemen in onze handleiding over het toevoegen van Google-weblettertypen aan uw WordPress-thema's.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.