Font in WordPress veranderen

Hoe verander je font in WordPress?

Er zijn twee verschillende manieren uw font in WordPress te veranderen. U kunt ervoor kiezen om het font op uw gehele website aan te passen of op een gedeelte van een website, voor bijvoorbeeld een bepaalde blog of nieuwe pagina. SAM Design legt het u uit per manier.

Volledige website

Met onderstaande manier verandert u het standaard lettertype van uw gehele website. Dit wordt dan automatisch gebruikt voor alle tekst op uw website. Hiervoor gaat u naar de stylesheet van uw website, style.css. In dit bestand wordt de opmaak van verschillende elementen op uw website aangegeven. De stylesheet vindt u doorgaans onder ‘Appearance’/’Weergave’ en vervolgens onder ‘Editor’ of ‘Theme editor’, afhankelijk van het gebruikte thema.

Wanneer u in de stylesheet bent, gaat u op zoek naar ‘body’. Voordat u aanpassingen gaat maken in de stylesheet is het verstandig om een kopie van de stylesheet te maken en op te slaan in een .txt-bestand door bijvoorbeeld Wordpad te gebruiken. Kopieer hier alle tekst in de stylesheet heen. Zodra u dit heeft gedaan kunt u aan de aanpassingen beginnen. Let er wel op dat aanpassingen aan uw stylesheet verloren kunnen gaan als uw WordPress thema wordt geüpdatet. Door gebruik te maken van een Child Theme kunt u dit voorkomen.

Als u naast de tekst van uw website, de grootte van headers wilt aanpassen, ga dan op zoek naar ‘header’ in uw stylesheet. Deze zijn op dezelfde manier aan te passen.

Lettertype aanpassen

Wanneer een bezoeker uw website bezoekt moet hij of zij een browser hebben die het gebruikte lettertype ondersteunt. Zodra dit niet het geval is, dan wordt er gebruik gemaakt van de zogeheten ‘fallback fonts’. In het style.css bestand is het eerste lettertype, in de font-family regel, het lettertype dat als eerste geprobeerd wordt. Alle fonts die hierachter staan, zijn de fallback fonts. Als u het lettertype wilt veranderen, dan moet u de naam van het eerste lettertype veranderen achter ‘font-family’. Zorg ervoor dat u altijd meerdere fallback fonts heeft staan.

Grootte en kleur aanpassen

U kunt eenvoudig de grootte van uw lettertype aanpassen. De grootte wordt weergeven in het aantal pixels. Pas het getal in de regel ‘font-size’ aan. U kunt ervoor kiezen om de tekst groter of kleiner te maken.

In de stylesheet worden de kleuren weergeven in het hex-format. Als u een specifieke kleur wilt gebruiken voor uw tekst, maar u weet niet welke kleur dat is in het hex-format, dan kunt u verschillende online tools gebruiken om hierachter te komen. Om de kleur van uw tekst op website aan te passen kunt u de code achter ‘color:’ aanpassen. Op een witte achtergrond is een grijstint normaal gesproken de beste keuze. Volledig zwart op wit is namelijk vermoeiender voor de ogen.

Bericht of Pagina

Bij een bericht of pagina kunt u ervoor kiezen om bij bepaalde stukken tekst het lettertype aan te passen door HTML te gebruiken. Gebruik hiervoor de ‘Text’-editor in WordPress. De HTML-code om het lettertype aan te passen ziet er als volgt uit: <p style=”font-family: Gekozen font”> Tekst </p>. Vergeet niet om </p> toe te voegen als u aan het einde bent van de tekst, anders wordt de gehele pagina met de gekozen font.

Om de kleur aan te passen maakt u gebruik van RGB-code in een stukje HTML-code. De code ziet er dan als volgt uit: <p style”color: RGB-code”> Tekst </p>. De RGB-code van uw gewenste kleur kunt u eenvoudig bepalen door middel van online tools.

Mocht u de lettergrootte aan willen passen, dan ziet de HTML-code er zo uit: <p style=”font-size: ..px”> Tekst </p>. Maar natuurlijk is het ook mogelijk om meerdere codes achter elkaar te plaatsen. Dit doet u door een puntkomma (;) en een spatie toe te voegen voor de hoge dubbele komma (“). Een voorbeeld: <p style=”font-family: Arial; color: #6DA325; font-size: 18px”> Deze tekst wordt dan weergeven in het lettertype Arial, in het groen en is 18 pixels groot. Al deze aanpassingen gelden voor de tekst op uw pagina. Wilt u liever de heading aanpassen, dan wijzigt de ‘p’ naar ‘h1’, ’h2’, ‘h3’ enzovoorts.

Inhoudsopgave
Ook interessant voor jou!