Een geweldige manier om wat branding en individualisme aan uw WordPress- site toe te voegen, is door de lettertypen in uw thema te wijzigen.

Typografie en andere streepelementen zorgen voor een goede eerste indruk, bepalen de sfeer voor de bezoekers van uw site en bepalen de identiteit van uw merk. Studies hebben ook aangetoond dat lettertypen van invloed zijn op het vermogen van lezers om te leren, informatie op te roepen en teksten te onthouden.

Als je net een WordPress-thema^{(installed a WordPress theme)} hebt geïnstalleerd of enige ervaring hebt met CSS en coderen, laten we je verschillende opties zien die je kunt gebruiken om lettertypen in WordPress te wijzigen .

Lettertypen wijzigen in WordPress^{(How to Change Fonts in WordPress)}

Er zijn drie hoofdopties beschikbaar om lettertypen in WordPress te wijzigen:

• Gebruik weblettertypen zoals Google Fonts , Fonts.com of Adobe Edge Web Fonts , die worden gehost op een site van derden
• Codeer^(Code) weblettertypen in uw thema en zet ze in de wachtrij
• Host lettertypen op uw site en voeg ze toe aan uw thema

1. Lettertypen in WordPress wijzigen met weblettertypen^{(1. How to Change Fonts in WordPress Using Web Fonts)}

Het gebruik van weblettertypen is een eenvoudigere en snellere manier om lettertypen in WordPress te wijzigen dan het downloaden en uploaden van lettertypebestanden.

Met deze optie heb je toegang tot verschillende lettertypen^{(access a variety of fonts)} zonder ze elke keer bij te werken als er een wijziging is, en het neemt geen serverruimte in beslag op je hosting. De lettertypen worden rechtstreeks vanaf de servers van de provider geleverd met behulp van een plug-in of door code aan uw site toe te voegen.

Zorg^(Make) ervoor dat de weblettertypen die u voor uw site kiest, passen bij uw merkidentiteit, gemakkelijk te lezen zijn voor hoofdtekst, bekend zijn bij websitebezoekers en de stemming en afbeelding overbrengen die u wilt.

U kunt weblettertypen toevoegen met behulp van een WordPress-plug-^{(using a WordPress plugin)} in of handmatig door een paar regels code aan uw site toe te voegen. Laten we beide opties onderzoeken.

Weblettertypen toevoegen met een WordPress-plug-in^{(How to Add Web Fonts Using a WordPress Plugin)}

Afhankelijk van het weblettertype dat je hebt gekozen, kun je een WordPress -plug-in gebruiken om toegang te krijgen tot de bibliotheek met lettertypen en het lettertype te kiezen dat je op je site wilt hebben. Voor deze handleiding hebben we Google Fonts gekozen en de plug- in Google Fonts Typography gebruikt.^{(Google Fonts Typography)}

1. Om aan de slag te gaan, logt u in op uw WordPress- beheerdersdashboard en selecteert u Plugins > Add New .

1. Typ Google Fonts Typography in het zoekvak en selecteer Nu installeren^{(Install Now)} .

1. Selecteer Activeren^(Activate) .

1. Ga vervolgens naar de Customizer door naar Appearance > Customize te gaan .

1. Selecteer het gedeelte Google Fonts .

1. Klik vervolgens op de link om de instellingen van de lettertypen te openen en configureer ze als volgt:

• Stel onder Basisinstellingen^{(Basic Settings)} het standaardlettertype in voor uw hoofdtekst, koppen en knoppen.

• Configureer onder Geavanceerde instellingen^{(Advanced Settings)} de titel en beschrijving van uw site, menu, koppen en inhoud, zijbalk en voettekst.

• Schakel^(Uncheck) eventuele ongewenste lettergewichten uit in het gedeelte Lettertype laden^{(Font Loading)} om te voorkomen dat uw site trager wordt^{(avoid slowing down your site)} .

Als er lettertypen op uw site staan ​​die niet goed worden weergegeven of niet goed werken, gebruikt u de sectie Foutopsporing^{(Debugging )} om problemen op te lossen.

1. U kunt deze instellingen testen in de Customizer om er zeker van te zijn dat ze werken zoals u dat wilt, en vervolgens Publiceren^(Publish) selecteren .

Opmerking^(Note) : als u vergeet publiceren in de Customizer te selecteren , verliest u alle wijzigingen die u heeft aangebracht.

Weblettertypen toevoegen met code^{(How to Add Web Fonts Using Code)}

Je kunt weblettertypen installeren en gebruiken als je toegang hebt tot de code van je thema. Dit is een handmatig alternatief voor het toevoegen van een extra plug-in, maar het is niet ingewikkeld als je de stappen zorgvuldig volgt.

Er zijn echter verschillende stappen die u moet nemen als u een thema uit de WordPress -themamap of een aangepast thema gebruikt.

Als je een thema uit de WordPress -themamap hebt gekocht , maak dan een child-thema^{(create a child theme)} en geef het het style.css- en functions.php-bestand. Het is gemakkelijker als u een aangepast thema heeft, omdat u het stylesheet en het functiebestand vanuit uw thema kunt bewerken.

1. Om aan de slag te gaan, selecteert u een lettertype uit de Google Fonts - bibliotheek en selecteert u het pictogram + (plus) om het aan uw bibliotheek toe te voegen.

1. Selecteer vervolgens het tabblad onderaan waar u de code vindt die u aan uw site kunt toevoegen. Ga naar het gedeelte Lettertype^{(Embed font)} insluiten op het tabblad Insluiten . ^(Embed)U vindt de code gegenereerd door Google Fonts , die er ongeveer zo uitziet:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Opmerking^(Note) : we hebben Work Sans gekozen voor deze handleiding, dus de naam van het lettertype kan verschillen van de jouwe, afhankelijk van wat je hebt gekozen.

1. Kopieer dit deel van de code: https://fonts.googleapis.com/css2?family=Work+Sans

Hiermee kunt u de stijl van Google Fonts -servers in de wachtrij plaatsen om conflicten met plug-ins van derden te voorkomen. Het zorgt ook voor eenvoudigere aanpassingen aan het child-thema.

1. Om het lettertype in de wachtrij te plaatsen, opent u het functiebestand en voegt u de volgende code toe. ( Vervang^(Replace) de link door de link die je krijgt van Google Fonts ):

functie wosib_add_google_fonts() { ^{(function wosib_add_google_fonts() {)}
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts');

1. U kunt als volgt een nieuwe regel aan uw functie toevoegen of aan dezelfde regel als u in de toekomst meer lettertypen wilt toevoegen:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts');

In dit geval hebben we zowel Cambria- als^(Cambria) Work Sans^{(Work Sans)} - lettertypen in de wachtrij geplaatst.

De volgende stap is om de lettertypen toe te voegen aan de stylesheet van uw thema om het lettertype op uw site te laten werken.

1. Om dit te doen, opent u het style.css-bestand van uw thema en voegt u de code toe om individuele elementen met uw weblettertypen als volgt te stylen:

body {
font-familie: 'Work Sans', schreefloos; ^{(font-family: ‘Work Sans’, sans-serif; )}
}

h1, h2, h3 {
font-familie: 'Cambria', schreef; ^{(font-family: ‘Cambria’, serif;)}
}

In dit geval is het hoofdlettertype Work Sans , terwijl header-elementen zoals h1, h2 en h3 Cambria gebruiken .

Als u klaar bent, slaat u de stylesheet op en controleert u of uw lettertypen naar behoren werken. Als dit niet het geval is, controleer dan of de lettertypen niet worden overschreven in de stylesheet, of wis uw browsercache en probeer het opnieuw.

1. Zorg voor een back-uplettertype om ervoor te zorgen dat de lettertypen gemakkelijk kunnen worden weergegeven of geopend, vooral voor gebruikers met oude apparaten, slechte verbindingen of als de lettertypeprovider technische problemen heeft. Ga hiervoor naar de stylesheet en bewerk de CSS als volgt:

body {
font-familie: 'Work Sans', Arial, schreefloos; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
}

h1, h2, h3 {
font-familie: 'Cambria', Times New Roman, schreef; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Als alles goed is, zien de bezoekers van uw site uw standaard weblettertypen, in ons geval Work Sans en Cambria . Als er problemen zijn, zien ze de back-uplettertypen, bijvoorbeeld Arial of Times New Roman in ons geval.

2. Hoe u lettertypen in WordPress kunt wijzigen door lettertypen te hosten^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Door lettertypen op uw eigen servers te hosten, kunt u de prestaties van uw weblettertypen optimaliseren, maar het is ook een veiligere manier^{(a more secure way)} om dit te doen in plaats van bronnen van sites van derden te gebruiken.

Met Google^(Google) Fonts en andere weblettertypen kunt u lettertypen downloaden voor gebruik als lokaal gehoste lettertypen, maar u kunt nog steeds andere lettertypen naar uw computer downloaden, op voorwaarde dat de licenties u dit toestaan.

1. Om te beginnen, download, pak het uit, upload het lettertypebestand naar uw site en koppel het vervolgens in uw stylesheet. In dit geval hoeft u de lettertypen niet in de wachtrij te zetten in het bestand Functions.php, zoals bij de weblettertypen. Controleer of de bestanden die u uploadt de .woff -indeling hebben voordat u ze op uw website gebruikt.

1. Ga vervolgens naar wp-content/themes/themename om het lettertypebestand naar je thema te uploaden. 
2. Open de stylesheet en voeg de volgende code toe (in dit geval gebruiken we het Work Sans - lettertype, maar je kunt dat vervangen door je eigen lettertypen):

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
lettergewicht: normaal; ^{( font-weight: normal;)}
lettertype-stijl: normaal; ^{( font-style: normal;)}
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
lettergewicht: vet; ^{( font-weight: bold;)}
lettertype-stijl: normaal; ^{(font-style: normal;)}
}

@font-face {
font-familie: 'Cambria'; ^{(font-family: ‘Cambria’;)}
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
lettergewicht: normaal; ^{( font-weight: normal;)}
lettertype-stijl: normaal; ^{( font-style: normal;)}
}

Opmerking^(Note) : door @fontface te gebruiken, kunt u vet, cursief en andere variaties van uw lettertype gebruiken, waarna u het gewicht of de stijl voor elk lettertype kunt specificeren.

1. Voeg vervolgens als volgt styling toe voor uw elementen:

body {
font-familie: 'Work Sans', Arial, schreefloos; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-familie: 'Cambria', Times New Roman, schreef; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Pas uw WordPress-typografie aan^{(Customize Your WordPress Typography)}

Het wijzigen van lettertypen in WordPress is een geweldig idee om de branding en gebruikerservaring te verbeteren. Het is geen eenvoudige taak, maar je hebt meer controle over je thema.

Kon^(Were) je de lettertypen van je site aanpassen met behulp van de stappen met behulp van de tips in deze handleiding? Vertel^(Tell) het ons in de reacties.

How to Change Fonts in WordPress

A great way to add some branding and individualism to your WordPress ѕite is to сhange the fonts іn your theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• Hoe een WordPress-site van de ene host naar de andere te verplaatsen

• Hoe WordPress te installeren en in te stellen op Microsoft Azure

• Supersnel WordPress draaien op Microsoft Azure

• Hoe privacy in WordPress te configureren en waarom het belangrijk is

• Hoe installeer ik WordPress op Google Cloud Platform

• WordPress Gutenberg-zelfstudie: hoe de nieuwe editor te gebruiken

• Het beste schrijfformaat voor blogs om uw punten over te brengen

• Toon het fragment op de startpagina van WordPress blog

• Hoe u pagina's op uw WordPress-website met een wachtwoord kunt beveiligen

• Een Wix-blog bouwen dat net zo goed is als WordPress

• WordPress toont HTTP-fout bij het uploaden van afbeeldingen

• Hoe over te stappen van de klassieke WordPress-editor naar Gutenberg?

• Hoe te controleren of een website is verbannen uit AdSense

• Hoe u een WordPress-site kunt versnellen met .HTACCESS

• Hoe maak je een WordPress-site veilig

• Hoe effectieve split-tests uit te voeren in WordPress

• 10 essentiële WordPress-plug-ins voor een website voor kleine bedrijven

• Kindthema maken in WordPress

• Hoe u uw WordPress-beheerderslogin kunt vinden

• Wat is AMP voor WordPress en hoe installeer je het?