Aangepaste lettertypen toevoegen in WordPress - DeLaatbusiness
62799703 - tokyo, japan - june 5, 2016: apple iphone 6s with airbnb website on the screen.airbnb is a website for people to list, find,and rent lodging.airbnb an online platform for accommodation

Aangepaste lettertypen toevoegen in WordPress

6 min


102
Dummy image 6 gratis internet marketing ebooks, klik hier voor download

Wilt u 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 kunt toevoegen 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 geladen zijn met honderden aangepaste lettertypen. Het laden van te veel lettertypen kan uw website echter 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

Aangepaste lettertypen 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 Font Pair . 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. Kies daarom twee lettertypen en gebruik ze in uw hele ontwerp. Dit zorgt ook voor consistentie in uw ontwerp.

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

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, dan 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 voor het installeren van een WordPress-plug-in voor meer informatie .

Na activering, kun je naar de Appearance »Customizer- pagina gaan. Hiermee wordt de interface voor het aanpassen van de livethema geopend, waar u het nieuwe gedeelte Typografie ziet.

Customizer-typografie

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.

Typografische instellingen

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

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 de pagina Instellingen »Google-lettertypen bezoeken en een naam voor je lettertypebesturing opgeven . Gebruik iets dat u helpt snel te begrijpen waar u dit lettertype-besturingselement gaat gebruiken.

Fontbesturingsgedeelte

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.

CSS-selectors toevoegen

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 lettertypebesturingen te gebruiken, moet je naar Uiterlijk »Customizer gaan en op het tabblad Typografie klikken.

Onder Typografie ziet u nu ook een ‘Thema-typografie’-optie. Als u erop 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.

Thema typografie optie

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.

Gebruik snel aangepaste lettertypen in WordPress uit Google-lettertypen

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 hierna een beetje naar beneden totdat je bij de insluitcode komt. U moet de insluitcode kopiëren onder het standaardtabblad en deze plakken in het header.php-bestand van uw thema of onderliggende thema direct achter de <head> -tag.

Google-lettertypen embed code

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

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

1
2
3
.h1 site-title {
font-family: 'Open Sans', Arial, sans-serif;
}

Raadpleeg onze handleiding over meer informatie over het toevoegen van Google-lettertypen aan WordPress- thema’s voor meer gedetailleerde instructies .

Aangepaste lettertypen toevoegen in WordPress met behulp van Typekit

TypeKit-lettertypen

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.

Een nieuw lettertypekit maken in Typekit

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 u de Typekit-lettertypen voor WordPress- plug- in installeren en activeren . Ga bij activering gewoon naar Instellingen »Typekit Fonts en plak de insluitcode op de instellingenpagina van de plug-in.

Typekit-insluitcode toevoegen in WordPress

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

1
2
3
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 behulp van Typekit .

Aangepaste lettertypen toevoegen in WordPress CSS3 @ font-face gebruiken

De meest directe manier om aangepaste lettertypen toe te voegen in WordPress is door de lettertypen toe te voegen met behulp van de CSS3- @font-facemethode. 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 wilt 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 ‘lettertypen’ in de directory van uw thema of onderliggende thema .

U kunt FTP of File Manager 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:

1
2
3
4
5
@font-face {
    font-family: Arvo; 
    src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); 
    font-weight: normal
}

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:

1
2
3
.h1 site-title {
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 je heeft geholpen met het toevoegen van aangepaste lettertypen in WordPress. 


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *