Aangepaste lettertypen toevoegen aan een WordPress-website

Wilt u leren hoe u aangepaste lettertypen toevoegt aan een WordPress-website?

Waarom zou je je blog saai maken door standaardlettertypen te gebruiken? Laat uw blog spreken over uw levendige persoonlijkheid en de onderwerpen die u behandelt met een breed scala aan aangepaste lettertypen. Aangepaste lettertypen zijn een coole functie waardoor uw blog er beter uitziet dan anderen.

Laten we eerlijk zijn; we houden allemaal van blogs en websites met de juiste lettertypen. Ze versieren niet alleen de website, maar helpen ook de gebruiker naar uw inhoud te trekken. De keuze aan standaard WordPress-lettertypen is echter beperkt en afhankelijk van het thema dat u gebruikt. Het goede nieuws is dat je ze handmatig of met . kunt toevoegen WordPress plugins gespecialiseerd.

En hier rijzen twee vragen: waar u aangepaste lettertypen kunt krijgen voor WordPress en hoe aangepaste lettertypen te installeren op uw website.

Laten we eens kijken.

Waarom zou ik aangepaste lettertypen gebruiken?

Voorbij zijn de dagen dat Times New Roman en Georgia werden beschouwd als de enige lettertypen voor tekst op websites. In de afgelopen jaren is de lettertyperuimte volledig veranderd met de komst van lettertypen zoals: Google Fonts en anderen.

Tegenwoordig zijn er honderden gratis lettertypen, informatie- en trainingshulpmiddelen en ontwerpbronnen beschikbaar op internet. In tegenstelling tot Adobe Illustrator, Photoshop en andere klassieke apps, geeft WordPress je geen volledige controle over standaardlettertypen. Alleen bepaalde WordPress-thema's kiezen ervoor om aangepaste lettertypen te ondersteunen en te gebruiken.

Daarom leert u in dit artikel hoe u geschikte aangepaste lettertypen kunt vinden en deze kunt gebruiken op uw WordPress-website.

Het belang van het gebruik van aangepaste lettertypen

Waarom zou u lettertypen, woordinspringing, regelafstand, letterafstand of lettertypeverzadiging wijzigen, vraagt ​​u zich af? Sommige onderzoeken tonen echter aan dat typografie verbetert begrijpend lezen.

Veel hangt af van de constructie van de lettertypen. Op bewust en onbewust niveau – iedereen evalueert de inhoud van een webpagina by design.

Lettertypeontwerp beïnvloedt lezers, zelfs als ze er geen aandacht aan besteden. Het lettertypeontwerp opgeven betekent de ontwikkeling zelf opgeven! De stemming van de lezer hangt ervan af. Het lettertype maakt het leesbaarder of dwingt gebruikers de pagina te verlaten.

Alle webbrowsers bevatten een set standaardlettertypen. Dit betekent dat als het lettertype niet is opgegeven in de CSS van de pagina, de standaardversie wordt gebruikt. U kunt nog steeds de standaardlettertypen gebruiken, maar deze maken het gebruikers moeilijker. Daarom is het essentieel om een ​​aangepast lettertype te gebruiken. Als uw WordPress-thema u geen opties biedt om het lettertype te wijzigen, zijn er tal van websites en tools die u kunnen helpen.

Google Fonts-alternatieven

Velen van jullie kennen de Google-lettertypen. Er zijn nog veel meer websites waar je mooie fonts kunt vinden. Sommige zijn gratis voor persoonlijk gebruik. Als u commercieel gebruik nodig heeft, heeft u een licentie nodig. Google Fonts en Adobe Edge Fonts zijn gratis. Daarom zijn ze niet zo uniek.

Hier zijn een aantal andere bronnen voor het vinden van lettertypen voor gratis en commercieel gebruik:

1. TemplateMonster — Op de website van TemplateMonster vind je alles wat je nodig hebt voor webdesign. Er zijn ook veel lettertypen en lettertypepakketten voor persoonlijk gebruik voor een kleine prijs. Bovendien, om u te helpen kiezen, alle lettertypen gepresenteerd op brochures of frames. Elk lettertype wordt ook gepresenteerd met een commerciële licentie.
2. MyFonts — MyFonts biedt momenteel de grootste selectie lettertypen ter wereld. De prijzen liggen hier echter ook in het hogere segment. Dus als je een krap budget hebt, is dit misschien niet iets voor jou.
3. LettertypeSpring — Fontspring verkoopt nieuwe lettertypen voor commercieel gebruik. Maar in bijna elk gezin kunnen 1-2 gratis lettertypen voor persoonlijke doeleinden worden gebruikt. Er is ook een apart gedeelte met gratis lettertypen. De collectie is levendig. Maar u moet de licentie-informatie voor een bepaald lettertype zorgvuldig bestuderen voordat u het downloadt.
4. cufonlettertypen — Het is ook een enorme verzameling verschillende lettertypen. Selecteer er een en u ziet een pagina met gedetailleerde informatie erover. Er zijn tal van gratis lettertypen en ze zijn onderverdeeld in afzonderlijke secties. Het sorteersysteem op CufonFonts is vrij flexibel en handig. Ook is Webfont-ondersteuning inbegrepen.
5. Dafont — Nog een toegankelijke verzameling van 3 gratis lettertypen. De meeste zijn alleen bedoeld voor persoonlijk gebruik. Een coole DaFont-functie is een categoriesysteem. U kunt lettertypen selecteren in de stijl van strips, videogames, vintage enz....

De keuze van lettertypen is erg verleidelijk omdat ze allemaal mooi zijn. Maar je moet niet veel kiezen. Gebruik niet meer dan twee lettertypen op een site web. Dan deuitstraling van uw website consistent zal zijn. Nadat u uw lettertypen heeft gekozen, moet u de bestanden uploaden voor elke stijl die u gaat gebruiken (normaal, vet, cursief, enz.).

Nu u het juiste lettertype voor uw website heeft geselecteerd, gaan we kijken hoe u dit kunt toevoegen.

Aangepaste lettertypen toevoegen aan WordPress

Er zijn verschillende manieren om lettertypen toe te voegen aan een WordPress-website:

1. Plugins : in dit geval anders WordPress plugins worden gebruikt om het proces te vergemakkelijken.
2. handmatig : als u deze methode gebruikt, moet u een lettertypedownload van de site downloaden en het CSS-bestand wijzigen.
3. Thema's: Veel populaire thema's hebben ingebouwde opties om uw lettertypen aan te passen (let op: we behandelen deze optie niet omdat het proces zal variëren afhankelijk van het thema dat u gebruikt.

Optie 1 - WordPress-lettertypen wijzigen met plug-ins

Als we ons niets aantrekken van mondiale veranderingen, kunnen we installeren WordPress plugins waarmee de lettertypen op uw website worden gewijzigd.

Kenmerken van plug-ins voor aangepaste lettertypen

Open source software heeft een voordeel voor het gemeenschapsbelang, en WordPress heeft dat voordeel ook. Met verschillende WordPress-plug-ins kunt u aangepaste lettertypen toevoegen. Hoe kies je een geschikte plug-in als er zoveel zijn? Wat zijn de kenmerken van WordPress-plug-ins met aangepast lettertype?

Hier zijn enkele punten om te overwegen:

• Mogelijkheid om een ​​aangepast lettertype te gebruiken
• Mogelijkheid om meerdere lettertypen te gebruiken
• Kopteksten en doelcomponenten
• Bonus: de mogelijkheid om lettertype-instellingen te wijzigen vanuit de visuele editor

Dat is alles. Het eerste kenmerk in de lijst is erg belangrijk. U kunt nog steeds lettertypen downloaden van websites zoals DaFont, Font Squirrel, enz., maar u moet ze wel kunnen uploaden naar WordPress.

Laten we eens kijken naar enkele plug-ins voor WordPress waarmee u aangepaste lettertypen kunt uploaden.

1. Better Awesome Font

Met deze WordPress-plug-in kunnen gebruikers de nieuwste versie van Better Font Awesome-lettertypen automatisch combineren met de CSS, shortcodes en meer. Bovendien wordt deze WordPress-plug-in automatisch bijgewerkt.

U vindt er als functies: regelmatige updates, een shortcode-generator, compatibiliteit met andere WordPress-plug-ins, enz ...

Downloaden | demonstratie | web hosting

2. Google Fonts voor WordPress

Deze WordPress-plug-in bestaat uit 877 speciale lettertypen, waarmee u alle lettertypen op uw WordPress-websites kunt gebruiken. Dankzij de realtime preview kunt u zien hoe uw website eruit zal zien zodra het lettertype is toegepast. 

Bovendien kun je het opslaan en bewerken op de frontend wanneer je de combinatie vindt die je leuk vindt.

De functies zijn onder meer: ​​een realtime preview, een behoorlijk geavanceerde SEO, meertalige ondersteuning, ondersteuning voor meer 870 + Google-lettertypen, eenvoudige updates en meer.

Downloaden | demonstratie | web hosting

3. Fonts-plug-in

Fonts Plugin is een gratis WordPress-plug-in waarmee gebruikers toegang hebben tot Google Fonts en Adobe Fonts-bibliotheken. Met deze WordPress-plug-in kun je kiezen uit meer dan 1000 Google- en Adobe-lettertypen, meerdere lettertypen op je website gebruiken en verschillende opties testen met de realtime voorbeeldfunctie van de plug-in in de WordPress-aanpasser.

Voor meer manieren om de typografie van uw website aan te passen, zoals lettergrootte, letterafstand en regelhoogte, kunt u upgraden naar de premium-versie, Lettertypen plug-in Pro.Downloaden | demonstratie | web hosting

4. Gemakkelijke Google-lettertypen

Easy Google Fonts is er een van beste WordPress-plug-ins om de typografie van uw website aan te passen. Net als de Fonts-plug-in, kunt u kiezen uit honderden Google-lettertypen en deze bekijken in de Customizer voordat u ze aan uw website toevoegt.

Hoewel het toegang biedt tot een kleiner aantal Google-lettertypen, is het uniek omdat je hiermee aangepaste lettertype-besturingselementen en -regels kunt maken in het beheerdersgedeelte, die onmiddellijk in de WordPress-aanpasser verschijnen.

Downloaden | demonstratie | web hosting

Optie 2 – Installeer WordPress Custom Fonts handmatig

Met behulp van de @font-face-richtlijn kunt u een of meer lettertypen koppelen aan uw website. Maar deze methode heeft zijn voor- en nadelen.

voordelen:

• Dankzij CSS kun je lettertypen van elk formaat verbinden: ttf, otf, woff, svg.
• Lettertypebestanden bevinden zich op uw server - u bent niet afhankelijk van services van derden.

nadelen :

• Voor de juiste lettertype-aansluiting voor elke stijl moet u een aparte code registreren.
• Zonder CSS te kennen, kun je gemakkelijk in de war raken.

Maar het is geen echt probleem als je kunt kopieer gewoon een voltooide code en waar u uw waarden moet opgeven.

Opmerking : Voordat u begint, moet u ervoor zorgen dat: maak een child-thema voor uw website. Op deze manier kunt u alle wijzigingen in uw child-thema aanbrengen, terwijl u uw hoofdthema behoudt, zodat u het indien nodig in de toekomst gemakkelijk kunt bijwerken.

Stap 1: Maak een map "fonts" aan

Maak in je child-thema een nieuwe map “fonts” aan onder: wp-content/themes/your-child-theme/fonts

Stap 2. Upload de gedownloade lettertypebestanden naar uw website

Dit kan via uw hosting controlepaneel of via FTP.

Voeg alle lettertypebestanden toe aan de nieuw toegevoegde lettertypenmap: wp-content/themes/ Maak in je child-thema een nieuwe map “fonts” aan onder: wp-content/themes/your-child-theme/fonts die je hebt gemaakt.

Stap 3. Importeer lettertypen via een child-theme stylesheet

Open het bestand style.css van uw child-thema en voeg de volgende code toe aan het begin van het CSS-bestand (na de opmerking over het child-thema):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

waarin MijnWebFont is de naam van het lettertype en de waarde van de eigenschap src (de gegevens tussen haakjes tussen aanhalingstekens) is hun locatie (relatieve links). We moeten elke stijl afzonderlijk specificeren.

Omdat we eerst de normale stijl verbinden, zetten we de eigenschappen font-weight en font-style op normaal.

Stap 4. Bij het toevoegen cursief, schrijf het volgende:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Als alles hetzelfde is, zijn wij de enigen die de eigenschap font style aan cursief hechten.

Stap 5. Voeg de volgende code toe om het vetgedrukte lettertype toe te voegen:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Waar we de eigenschap font-weight op vet zetten.

Vergeet niet om voor elke stijl de juiste locatie van de lettertypebestanden op te geven.

Stap 6. Typ het volgende om vet cursief te verbinden:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

Nou, dat is het dan. Nu je vier letterstijlen aan je website hebt gekoppeld.

Maar er is één opmerking: deze fontverbinding wordt niet correct weergegeven in Internet Explorer 8. De troost is dat er nog maar weinig mensen zijn die IE8 gebruiken.

Andere aanbevolen bronnen

We nodigen u ook uit om de onderstaande bronnen te raadplegen om verder te gaan in de greep en controle van uw website en blog.

• 10 WordPress accordeon-plug-ins voor een website
• Meerdere kolommen toevoegen in WordPress
• Sommige plugins om Google-services te integreren op je blog
• 5 WordPress-plug-ins om meldingen weer te geven
• Hoe kunt u verschillende achtergronden gebruiken op WordPress

Conclusie

Wat is het eerste dat gebruikers opmerken als ze uw website bezoeken? Dat klopt, het ontwerp! Het grootste deel van het ontwerp is afhankelijk van het juiste gebruik van prachtige lettertypen. U moet dus zorgen voor het ontwerp van het lettertype van uw website. Voeg code toe of gebruik een van de bovengenoemde plug-ins om een ​​nieuwe lettertypestijl in te sluiten. Hoe je het kiest, is aan jou.

Zorg ervoor dat u niet meer dan twee lettertypen op dezelfde website gebruikt. Aangezien hoe meer aangepaste lettertypen u aan de website toevoegt, des te sneller de websitesnelheid zal dalen.

Dat is het voor dit artikel dat u laat zien hoe u aangepaste lettertypen aan een WordPress-website kunt toevoegen. We nodigen je uit om het te proberen. Als u zich zorgen maakt of suggesties heeft, laat het ons dan weten binnen commentaires.

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Ondertussen, deel dit artikel op uw verschillende sociale netwerken.   

...