Aangepaste lettertypen toevoegen in WordPress

Wil je aangepaste lettertypen toevoegen in WordPress? Aangepaste lettertypen kunnen u helpen uw thema op te frissen en op te vallen. In dit artikel laten we u zien hoe u aangepaste lettertypen toevoegt in WordPress met behulp van Google Fonts, TypeKit en CSS3 @ Font-Face-methode.

Aangepaste lettertypen gebruiken in WordPress-thema's is een veel voorkomende trend geworden. In feite zijn er enkele thema's die volledig gevuld zijn met honderden aangepaste lettertypen. Het laden van te veel lettertypen kan echter uw website vertragen. Daarom laten we u zien hoe u aangepaste lettertypen correct laadt, zodat uw site niet wordt vertraagd.

Maar voordat we kijken naar het toevoegen van aangepaste lettertypen in WordPress, laten we eens kijken naar het vinden van aangepaste lettertypen.

Aangepaste lettertypen zoeken voor gebruik in WordPress

Lettertypen waren vroeger duur, maar niet meer. Er zijn veel plaatsen om geweldige gratis weblettertypen te vinden, zoals Google Fonts, Typekit, FontSquirrel en fonts.com.

Als u niet weet hoe u lettertypen kunt mixen en matchen, probeer dan Lettertype koppelen. Het helpt ontwerpers om mooie Google-lettertypen samen te voegen.

Let er bij het kiezen van uw lettertypen op dat het gebruik van te veel aangepaste lettertypen uw website zal vertragen. Dit is waarom u twee lettertypen moet selecteren en deze in uw hele ontwerp moet gebruiken. Dit zorgt ook voor consistentie in uw ontwerp.

Video-instructies

Als je de video niet leuk vindt of meer instructies nodig hebt, ga dan door met lezen.

Aangepaste lettertypen toevoegen in WordPress vanuit Google Fonts

Google Fonts is de grootste, gratis en meest gebruikte lettertypebibliotheek onder website-ontwikkelaars. Er zijn meerdere manieren om Google-lettertypen toe te voegen en te gebruiken in WordPress.

Methode 1: Aangepaste lettertypen toevoegen met de eenvoudige plug-in Google Fonts

Als u Google Fonts op uw website wilt toevoegen en gebruiken, is deze methode veruit de gemakkelijkste en aanbevolen voor beginners.

Het eerste wat u hoeft te doen is de Easy Google Fonts-plug-in installeren en activeren. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie.

Na activering kunt u naar Uiterlijk »Customizer pagina. Dit opent de interface voor het aanpassen van de live thema-interface, waar u de nieuwe sectie Typografie ziet.

Als u op Typografie klikt, toont u verschillende secties van uw website waar u Google Fonts kunt toepassen. Klik op 'Lettertype bewerken' onder de sectie die u wilt bewerken.

Onder het gedeelte lettertypefamilie kunt u elk Google-lettertype kiezen dat u op uw website wilt gebruiken. U kunt ook kiezen voor letterstijl, lettergrootte, opvulling, marge en meer.

Afhankelijk van uw thema kan het aantal secties hier beperkt zijn en kunt u de selectie van lettertypen voor veel verschillende delen van uw website mogelijk niet direct wijzigen.

Om dit op te lossen, kunt u met de plug-in uw eigen besturingselementen maken en deze gebruiken om lettertypen op uw website te wijzigen.

Eerst moet je bezoeken Instellingen »Google Fonts pagina en geef een naam voor uw lettertypebesturing. Gebruik iets dat u helpt snel te begrijpen waar u dit lettertype-besturingselement gaat gebruiken.

Klik op 'Create font control' knop en vervolgens wordt u gevraagd om CSS selectors in te voeren. U kunt HTML-elementen toevoegen die u wilt targeten (bijvoorbeeld h1, h2, p, blockquote) of CSS-klassen gebruiken. U kunt het hulpprogramma Inspecteren gebruiken om erachter te komen welke CSS-klassen worden gebruikt door het specifieke gebied dat u wilt wijzigen.

Klik nu op de knop 'Bewaar lettertype' om uw instellingen op te slaan. U kunt zoveel font-controllers maken als u nodig hebt voor verschillende secties van uw website.

Om deze lettertype-controllers te gebruiken, moet je naar Uiterlijk »Customizer en klik op het tabblad Typografie.

Onder Typografie ziet u nu ook een 'Thema-typografie'-optie. Als u hierop klikt, worden uw aangepaste lettertypen weergegeven die u eerder hebt gemaakt. U kunt nu op de knop Bewerken klikken om de lettertypen en het uiterlijk voor dit besturingselement te selecteren.

Vergeet niet op de knop Opslaan of Publiceren te klikken om uw wijzigingen op te slaan.

Methode 2: handmatig Google-lettertypen toevoegen in WordPress

Voor deze methode moet u code toevoegen aan uw WordPress-themabestanden. Als u dit nog niet eerder hebt gedaan, raadpleegt u onze handleiding voor het kopiëren en plakken van code in WordPress.

Ga eerst naar de bibliotheek met Google-lettertypen en selecteer een lettertype dat u wilt gebruiken. Klik vervolgens op de knop voor snel gebruik onder het lettertype.

Hiermee gaat u naar een andere pagina waar u wordt gevraagd de stijlen te kiezen die u wilt gebruiken. U moet alleen stijlen selecteren waarvan u denkt dat u ze daadwerkelijk gaat gebruiken.

Ga daarna een beetje naar beneden totdat je bij de insluitcode komt. U moet de insluitcode kopiëren onder het standaardtabblad en deze direct na de tag in het header.php-bestand van uw thema of onderliggende thema plakken.

Dat is alles wat u met succes een aangepast Google-lettertype op uw WordPress-site hebt toegevoegd.

U kunt dit lettertype als volgt in de stylesheet van uw thema gebruiken:

 .h1 site-titel font-family: 'Open Sans', Arial, sans-serif;  

Raadpleeg onze handleiding voor meer gedetailleerde instructies over het toevoegen van Google-lettertypen in WordPress-thema's.

Aangepaste lettertypen toevoegen in WordPress met behulp van Typekit

Typekit is een andere gratis en premium bron voor geweldige lettertypen die u kunt gebruiken in uw ontwerpprojecten. Ze hebben een betaald abonnement en een beperkt gratis abonnement dat je kunt gebruiken.

Meld u aan voor een Typekit-account en maak een nieuwe kit.

Vervolgens moet je een lettertype uit de Typekit-bibliotheek selecteren en dit aan je kit toevoegen. Daarna krijgt u de insluitcode voor uw kit en gaat u naar het admingebied van uw WordPress-site.

Nu moet je de Typekit-lettertypen voor WordPress-plug-in installeren en activeren. Bij activering, bezoek gewoon Instellingen »Typekit-lettertypen en plak de insluitcode op de instellingenpagina van de plug-in.

Dat is alles, u kunt nu het typekit-lettertype gebruiken dat u in de stylesheet van uw WordPress-thema zo hebt geselecteerd:

 h1 .site-title font-family: 'modesto-condensed', Arial, sans-serif;  

Raadpleeg onze tutorial voor meer gedetailleerde instructies over het toevoegen van geweldige typografie in WordPress met Typekit.

Aangepaste lettertypen toevoegen in WordPress CSS3 @ font-face gebruiken

De meest directe manier om eigen lettertypen toe te voegen in WordPress is door de lettertypen toe te voegen met behulp van CSS3 @ Font-face methode. Met deze methode kunt u elk lettertype dat u leuk vindt op uw website gebruiken.

Het eerste wat u hoeft te doen is het lettertype downloaden dat u leuk vindt in een web-formaat. Als u niet beschikt over het webformaat voor uw lettertype, kunt u het converteren met behulp van de FontSquirrel Webfont-generator.

Zodra u de webfont-bestanden hebt, moet u deze uploaden naar uw webhostingserver.

De beste plaats om de lettertypen te uploaden bevindt zich in een nieuwe map 'fonts' in de directory van uw thema of kindthema.

U kunt FTP of Bestandsbeheer van uw cPanel gebruiken om het lettertype te uploaden.

Nadat u het lettertype hebt geüpload, moet u het lettertype in de stylesheet van uw thema laden met behulp van de CSS3 @ font-face-regel, zoals deze:

 @ font-face font-family: Arvo; src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); font-gewicht: normaal;  

Vergeet niet om de lettertypefamilie en de URL te vervangen door die van uzelf.

Hierna kunt u dat lettertype overal in het stylesheet van uw thema gebruiken:

 .h1 site-titel font-family: "Arvo", Arial, sans-serif;  

Het rechtstreeks laden van lettertypen met behulp van CSS3 @ font-face is niet altijd de beste oplossing. Als u een lettertype uit Google Fonts of Typekit gebruikt, is het het beste om het lettertype rechtstreeks van hun server te serveren voor optimale prestaties.

Dat is alles, we hopen dat dit artikel u heeft geholpen met het toevoegen van aangepaste lettertypen in WordPress. U kunt ook onze gids raadplegen over het gebruik van pictogramlettertypen in WordPress en over het wijzigen van de tekengrootte in WordPress..

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.