WP tutorial: voeg custom fonts toe met Google fonts

Deze week eens iets helemaal anders. Sommige mensen willen graag een beetje prutsen in hun thema en eens een lettertype veranderen. En dat kan supergemakkelijk met Google fonts. Daarom leg ik jullie snel uit hoe je een font verandert in je thema. Ik weet niet hoe het gaat voor blogger, dus dit is hoe je alles vindt in WordPress maar als je aan je CSS raakt in Blogger komt het ook goed.

Je hebt nodig: Een zelfgehoste wordpress / een mooi google font (zoals vb. Bitter of Montserrat). Eventueel kan je je code in een editor zetten (dat vind ik makkelijker), zoals Sublime text 2. En ik gebruik Chrome als webbrowers.

Allereerst open ik de editor (dus sublime text vb.) en dan ga ik in wordpress naar Appearance » Editor. Normaal gezien kom je dan op de CSS tekst uit, dit C/P ik dan naar de editor in een nieuwe file. Soms moet je de syntax nog aanzetten van je code (dan wordt alle code al veel duidelijker). Dit doe je in sublime text via VIEW » SYNTAX » CSS

Screen Shot 2015-05-29 at 21.54.59

All right. Ok nu gaan we naar onze homepage (dus bijvoorbeeld mijn blog) en dan klik ik op mijn titel van de blogpost en doe ik RECHTER MUISKLIK » INSPECT ELEMENT.

Screen Shot 2015-05-29 at 21.57.13

Dan komt er code tevoorschijn. Normaal gezien toont het het element al en gaat het makkelijk te vinden zijn. We zien dus volgend stukje code:

Screen Shot 2015-05-29 at 21.58.35

de “h1” daar gaat het te doen zijn. We zien dat de H1 (dat is een “header” element, een titel) met een klasse “entry-title”. Ok goed om weten: je geeft een klasse in HTML aan je element door class=”class-naam” te typen. In CSS kan je dan aan de hand van deze class je element gaan selecteren. Dus alles dat deze class naam heeft, zal dan veranderen. Eventjes verwarrend uitgelegd, maar goed. In CSS moeten we zoeken naar “.entry-title”, omdat een class zich vertaalt naar “.class-naam”. Wanneer we dit typen gaan we alle elementen veranderen die de klasse .entry-title hebben. Wanneer ik in mijn CSS zoek (CMD + F is handig!) dan vind ik volgend stukje code.

Screen Shot 2015-05-29 at 22.01.38

Ok hou dit stukje bij (dit is een vb he, er kunnen nog een paar andere dingen bij jou staan). Nu gaan we terug naar Google fonts. Je hebt een font gekozen: klik dan vanboven rechts op (bijvoorbeeld) “open bitter in google fonts. Als eerste kies je welke “style” je meewilt inladen op je site. Opgelet: kies niet te veel styles en zelfs verschillende fonts want dan kan je site echt lang laden en dat wil je niet!

Screen Shot 2015-05-29 at 22.03.47

Dan scroll je verder, stap 2 slaan we over en nu komt stap 3. Ga naar het tweede tab-bladje: @import. Deze code ga ik bovenaan in mijn CSS kopiëren. Zo wordt de CSS file met alle code voor een font in je css file geladen. In mijn CSS file heb ik zo vb. twee fonts ingeladen.

Screen Shot 2015-05-29 at 22.17.41

Wanneer je nog iets verder leest (ik ga nu verder met het voorbeeld van het font bitter) zie je welke code je moet schrijven om je tekst in het font te plaatsen. Bij bitter is dit dus “font-family: ‘Bitter’, serif;” . Ok dus wat doen we dan? We gaan terug naar het stukje code van de “.entry-title” en daar schrijven we dan het stukje code bij. Zo ziet je code er dan uit:

Screen Shot 2015-05-29 at 22.19.18

Voila. Dan kopieer ik de hele boel (CMD + A en dan CMD + C) en plak ik het weer in de CSS-editor van wordpress (dus appearance …) en druk ik op upload en normaal gezien als alles goed is, is je font veranderd! Met Bitter in de title zou mijn blog er zo uitzien:

Screen Shot 2015-05-29 at 22.21.08

En zo kan je dan elke soort tekst veranderen die je maar wilt! Ga jij nu aan de slag met google fonts? Moest je nog vragen hebben, post ze gerust hieronder of mail mij op hello@insins.me. Ook verzoekjes voor dingen die je graag eens uitgelegd wil zien mag altijd, in het mate van het mogelijke!

More about Ines

5 thoughts on “WP tutorial: voeg custom fonts toe met Google fonts

  1. Monique | WritingMonique

    Ik vind jouw uitleg altijd zo fantastisch!

    Reply

  2. alexa

    Ik begrijp je wel maar zou het zelf niet zo krijgen. Ik kan dus in een gekocht thema dus wel het font aanpassen naar een ander font? Dat zou echt een uitvinding zijn!

    Reply

    1. Ines

      Als je aan je CSS kan prutsen dan kan dat ja :) Mijn thema is vb. ook een standaard gratis thema van wordpress waarvan ik de CSS heb aangepast :)

      Reply

  3. melissa

    Fijn dat je alles zo uitgebreid uitlegt! Ik zou graag de lay-out van men blog bewerken, maar ik denk toch dat ik een thema ga kopen of laten maken ^^

    Reply

  4. Jana

    Wow zo handig! Dit ga ik eens bekijken :D

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

http://insins.me/wp-content/plugins/wp-monalisa/icons/OMG.png 
http://insins.me/wp-content/plugins/wp-monalisa/icons/angry.png 
http://insins.me/wp-content/plugins/wp-monalisa/icons/bigsmile.png 
http://insins.me/wp-content/plugins/wp-monalisa/icons/cry.png 
http://insins.me/wp-content/plugins/wp-monalisa/icons/littlesmile.png 
http://insins.me/wp-content/plugins/wp-monalisa/icons/love.png 
http://insins.me/wp-content/plugins/wp-monalisa/icons/sad.png 
more...
 

This site uses Akismet to reduce spam. Learn how your comment data is processed.