Aangepaste lettertypen toevoegen aan WordPress


Aangepaste lettertypen toevoegen aan WordPress


Het kiezen van het juiste lettertype voor uw WordPress-site is een centraal onderdeel van webdesign en website-branding.

Zoals kleuren, afbeeldingen en andere elementen, typografie speelt een grote rol in hoe uw site door bezoekers wordt gezien.

Gelukkig zijn WordPress-lettertypen een van de vele dingen die u vrij kunt aanpassen. U kunt vrijwel elk gratis aangepast lettertype op uw gewenste WordPress-site gebruiken.

We behandelen alles wat u moet weten over WordPress-lettertypen:

  • A) Aangepaste lettertypen toevoegen aan WordPress (handmatig)
  • B) Aangepaste lettertypen toevoegen aan WordPress (via plug-in)
  • Waarom aangepaste lettertypen gebruiken op WordPress
  • Waar aangepaste lettertypen te vinden
  • Conclusie

A) Handmatig aangepaste lettertypen toevoegen aan WordPress

Als het gaat om het handmatig toevoegen van aangepaste lettertypen aan WordPress, heb je drie hoofdopties: HTML, JavaScript en CSS. Elke methode heeft voor- en nadelen en welke voor u de juiste is, hangt af van uw opstelling. Maak je geen zorgen, we zullen ze allemaal in detail doornemen.

1. Met behulp van CSS en @importeren

Laten we beginnen met de minst aanbevolen methode. Als u van plan bent om aangepaste lettertypen van Google Fonts te installeren, is het u misschien opgevallen dat er een tabblad met het label op staat @importeren. De service geeft je een stukje CSS-code.

tabblad importeren in Google-lettertypen

Je kunt het nemen zoals het is en het in je koptekst invoegen (meer hierover hieronder) of het kopiëren zonder de >haakjes aan het begin van het thema van uw thema (of beter nog, kindthema) style.css het dossier.

/ *
Thema Naam: Twenty Seventeen Child
Thema-URI: https://wordpress.org/themes/twentyseventeen/
Sjabloon: twintigentwintig
Auteur: het WordPress-team
Auteur URI: https://wordpress.org/
Versie: 1.0

* /

@import url ('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * extra CSS komt hier * /

Als u dit doet, wordt het lettertype vanuit het opmaakmodel in uw site geladen. Het lijkt een simpele oplossing, toch? Waarom wordt het dan het minst aanbevolen?

De reden is prestatieproblemen. Gebruik makend van @importeren is niet langer de aanbevolen manier om te gaan, omdat het voorkomt dat browsers meerdere stylesheets tegelijk downloaden. Het gevolg: langzamere laadtijden van pagina's. Blijf er bij vandaan als je kunt.

2. Een WordPress-sjabloonbestand gebruiken

Een tweede methode om de lettertypen op uw site te krijgen, is door de code van de lettertypenbibliotheken te nemen en deze in uw te kopiëren header.php sjabloonbestand. De meeste standaard WordPress-thema's hebben het.

Zorg ervoor dat het ergens tussen de en haakjes. Op die manier wordt uw lettertype geladen wanneer een pagina wordt geladen.

voer google fonts code in de wordpress header in

Als je een kindthema gebruikt, kopieer dan de ouderthema's header.php bestand in de onderliggende themamap en breng de wijzigingen daarin aan.

Sommige thema's hebben instellingen waarmee u via de backend aangepaste code aan uw koptekst en voettekst kunt toevoegen. Dit is ook een haalbare optie.

3. Gebruiken @ font-face

Tot nu toe hebben we het alleen gehad over het gebruik van aangepaste lettertypen in WordPress die ergens anders worden gehost, namelijk de servers van Google en Adobe. Het is echter ook mogelijk om lettertypen op uw eigen site te hosten en van daaruit de browsers van bezoekers aan te bieden.

Om dit te doen, moet u eerst het betreffende lettertype downloaden. Onthoud de downloadknop op Google Fonts? Die zal nu handig worden. Andere providers laten u ook lettertypen downloaden.

Wanneer u dat doet, zorg er dan voor dat u het in een weblettertype-indeling krijgt. Dat betekent TTF, OTF of WOFF. U vindt er meer informatie over hier. Als u niet de juiste weblettertype-indeling heeft, kunt u ook gebruiken deze dienst om uw lettertype om te zetten in een ondersteund lettertype.

Zodra u uw lettertypebestanden gereed heeft, moet u ze via FTP uploaden naar uw WordPress-site. Een goede plaats om ze op te slaan is in een submap van uw kindthema genaamd lettertypen (creatief, we weten het).

Daarna moet je het lettertype in je stijlblad laden via @ font-face. Zo ziet het eruit:

@ font-face {
font-family: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
font-weight: normaal;
}

Vergeet niet de naam van het lettertype en het adres te vervangen voor de locatie op uw eigen site. Daarna is uw nieuwe aangepaste lettertype bruikbaar.

Dit is echter ook niet de beste oplossing, vooral qua prestaties. De servers van Google zijn waarschijnlijk sneller dan die van u en daarom is het waarschijnlijk de betere oplossing om aangepaste lettertypen van daaruit te laden.

4. Lettertypen in wachtrij plaatsen - De "WordPress-manier"

Als u echt aangepaste lettertypen op de juiste manier aan WordPress wilt toevoegen, gebruikt u uw functies.php bestand (in de directory van uw momenteel actieve thema) en de functie  wp_enqueue_script of wp_enqueue_style.

Met hun hulp kunnen we de codefragmenten van de lettertypesites gebruiken. In plaats van ze naar een bestand te kopiëren, zullen we ze via een functie aan de koptekst toevoegen.

Wat is het verschil tussen wp_enqueue_script en wp_enqueue_style? Zoals hun namen suggereren, is er een voor het toevoegen van scripts, een voor style sheets. Welke goed is, hangt af van hoe uw aangepaste lettertypen worden geleverd vanaf hun bron.

Google Fonts geeft u bijvoorbeeld lettertypen als stylesheets. In dat geval zou je ze op deze manier aan je WordPress-site toevoegen:

functie add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

In tegenstelling daarmee komen lettertypen van Adobe Edge Web Fonts als JavaScript. Daarom zou de code er als volgt uitzien om ze op uw site te plaatsen:

functie add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

Was het niet zo moeilijk, toch? Bovendien krijg je extra punten om het op WordPress-manier te doen.

5. Bel de aangepaste lettertypen in uw stijlblad

Nu de lettertypen aan uw site zijn toegevoegd, kunt u ze officieel gebruiken. Om dit te doen, hoeft u alleen maar een verklaring voor het nieuwe lettertype in uw stijlblad toe te voegen. Als u bijvoorbeeld het lettertype voor uw koptags wilt wijzigen, gebruikt u zoiets als dit:

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Roboto';
}

Notitie: Let op hoe de service die u gebruikt de CSS-verklaring voor uw lettertypen specificeert. Op onze testsite konden we Adobe Edge Web Fonts schijnbaar niet aan de praat krijgen omdat ze Open Sans in CSS aanroepen met open zonder in tegenstelling tot 'Open zonder' in Google Fonts.

Dat is het. U weet nu hoe u handmatig aangepaste lettertypen aan WordPress kunt toevoegen. Feliciteer jezelf, dit is wat kennis van het volgende niveau! Het is duidelijk dat dezelfde acties mogelijk zijn via plug-ins. Dat is waar we het hierna over zullen hebben.

B) Hoe aangepaste lettertypen toe te voegen aan WordPress via plug-in

De WordPress-sfeer zou niet zijn wat het is als er niet verschillende plug-in-oplossingen zijn voor het toevoegen van aangepaste lettertypen aan het platform. We zullen bespreken hoe te gebruiken Gemakkelijke Google-lettertypen, wat een van de meest populaire plug-ins op dit gebied is.

1. Installeer de plug-in

De eerste stap is het installeren van de plug-in. Ga daarvoor naar Plugins> Installeer nieuw. Zoek vervolgens naar de naam van de plug-in. Klik in de zoekresultaten op Installeer nu en activeer de plug-in zodra deze op uw site staat.

2. Lettertypen toevoegen / wijzigen op uw site

Wanneer de plug-in actief is, vind je een nieuw menu-item genaamd Typografie onder Uiterlijk> Aanpassen.

typografie menu in WordPress customizer

Wanneer je erop klikt en kiest Standaard typografie, u vindt een lijst met besturingselementen om het lettertype van uw alinea's en koppen te wijzigen.

eenvoudige google fonts-instellingen in wordpress customizer

Het gebruik ervan is heel eenvoudig. Klik gewoon op het vervolgkeuzemenu waar het staat Lettertype bewerken voor het deel van uw site waarvoor u deze wilt wijzigen. Dit geeft je toegang tot dit menu:

gemakkelijk google fonts veranderen lettertype

Hier is het belangrijkste onderdeel dat onder de Lettertypefamilie. Hier kunt u een nieuw lettertype kiezen uit de hele Google Font-bibliotheek (gebruik Script / subset om lettertypekeuzes te beperken tot die met speciale tekens).

De lettertypen zijn gerangschikt op standaard-, serif-, schreefloze, display-, handschrift- en monospace-lettertypen. U kunt ze echter ook eenvoudig op naam zoeken.

Wanneer u op een lettertype klikt, kunt u rechts in realtime een voorbeeld van de wijzigingen bekijken.

aangepast aangepast lettertype in eenvoudige Google-lettertypen

3. Configureer het lettertype

Zodra u een lettertype heeft gekozen, zijn er veel opties om uw typografie verder aan te passen.

Allereerst kunt u het lettertype / de stijl van het lettertype wijzigen onder het menu met dezelfde naam. Dit bepaalt de dikte van de letters.

Verder onder Tekstdecoratie, u kunt onderstrepen, doorhalen en overlijnen toevoegen. Teksttransformatie je kunt het ook instellen op hoofdletters, kleine letters of hoofdletters voor elke eerste letter. Onder de Verschijning tabblad bovenaan kunt u ook de kleur van het lettertype, de achtergrondkleur, de tekengrootte, de regelhoogte en de letterspatiëring bepalen.

uiterlijk instellingen in eenvoudige google fonts

Tenslotte, Positionering kunt u andere instellingen wijzigen, zoals marge, opvulling, rand, randradius en weergave.

positioneringsinstellingen in eenvoudige Google-lettertypen

Kortom, u zou de lettertypen op uw site volledig naar wens moeten kunnen aanpassen. Makkelijk, is het niet? Vergeet niet te slaan Opslaan en publiceren bovenaan wanneer u tevreden bent met uw wijzigingen.

Het werkt niet, wat moet ik doen?

Soms kunt u sommige lettertypen op uw site niet wijzigen. Dat gebeurt meestal als het thema dat u gebruikt wordt geleverd met niet-standaard CSS-klassen en selectors om ze te stylen.

In het Twenty Sixteen-thema worden titels van blogposts bijvoorbeeld niet alleen gedefinieerd als H1, maar hebben ze ook een CSS-klasse met de naam .entry-titel. Om die reden kan de plug-in ze niet wijzigen.

Om dit probleem te verhelpen, moet u een zogenaamde maken lettertype controle onder Instellingen> Google-lettertypen.

voeg lettertypecontrole toe in eenvoudige Google-lettertypen

U kunt CSS-kiezers aan nieuwe besturing koppelen en indien nodig geforceerd negeren. Nadat je dit hebt gedaan, is het nieuwe lettertype-beheer beschikbaar als een extra optie in de WordPress Customizer onder Thema typografie. Makkelijk.

Andere aangepaste lettertypen WordPress-plug-ins

Er zijn ook andere WordPress-plug-ins beschikbaar voor het toevoegen van aangepaste lettertypen:

  • Gebruik een willekeurig lettertype - Het helpt u bij het gebruik van geüploade lettertypen zonder CSS. Het bevat lettertypen op uw eigen server en biedt ook conversietools voor lettertypeformaten.
  • Typekit-lettertypen voor WordPress - Gebruik lettertypen van Adobe Typekit service (waarvoor u zich moet aanmelden). Hiermee kunt u insluitcodes en aangepaste CSS rechtstreeks in de plug-in invoeren.
  • TK Google Fonts - Een alternatieve oplossing om Google-lettertypen in te sluiten die de Google Fonts-ervaring vrijwel naar de WordPress-backend verplaatst. Probeer lettertypen uit met een voorbeeld en aangepaste tekst en wijzig deze vervolgens in de WordPress Customizer.

Waarom aangepaste lettertypen gebruiken op uw WordPress-website?

Typografie is een wetenschap op zich en we kunnen u hier geen volledige cursus geven over het gebruik van lettertypen in webdesign. Het gaat tenslotte niet alleen om het lettertype, maar ook om de grootte, helling, dikte en nog veel meer. Echter, wij kan ga na waarom het gebruik van aangepaste lettertypen op uw WordPress-site een goed idee is.

1. Typografie maakt deel uit van de eerste indruk

Allereerst heeft het lettertype dat u gebruikt veel invloed op hoe uw site wordt waargenomen. Is je site leuk en speels? Bent u een zakelijke professional? Bezoekers beslissen hier in één oogopslag over en jouw typografie speelt een grote rol in hun beleving.

2. Lettertypen hebben veel meer invloed dan u denkt

Het kan van invloed zijn op uw leervermogen, teksten uit het hoofd leren en zelfs uw humeur beïnvloeden.

Bijvoorbeeld in één Onderzoek, Er werd opgemerkt dat als u de tijd die u besteedt aan het lezen van tekst wilt verlengen, u een serif-lettertype moet gebruiken. Als u echter in korte tijd meer wilt lezen, moet u overschakelen naar een schreefloos lettertype.

Een ander onderzoek toonde mensen dezelfde oefeninstructies in verschillende lettertypen. Vervolgens vroegen ze de deelnemers om in te schatten hoe lang het zou duren om die instructies te voltooien. Het is fascinerend dat degenen met het complexere lettertype vermoedden dat het langer zou duren dan de groep met het eenvoudigere lettertype. Als gevolg hiervan volgden ze de trainingsroutine minder snel.

Waar aangepaste lettertypen te vinden

1. Gebruik Google Fonts om aangepaste typografie te vinden

De eerste service waar we naar zullen kijken is Google Fonts. Zoals de naam al doet vermoeden, is het een service van Google met meer dan 800 verschillende lettertypen. Gratis te gebruiken. Voor iedereen.

Zo gebruik je het:

2. Zoek het juiste lettertype

Wanneer u voor het eerst naar de Google Fonts-pagina gaat (typ dat gewoon in Google Zoeken), ziet u dit:

hoe aangepaste lettertypen toe te voegen op de startpagina van google google fonts

De gebruikersinterface is gemaakt om u te helpen het juiste lettertype voor uw doel te vinden. Als u al een lettertype in gedachten heeft, kunt u de naam eenvoudig in het zoekveld aan de rechterkant typen.

Zo niet, dan kunt u de lettertypen op veel verschillende manieren filteren, bijvoorbeeld op categorie:

  • Serif - Betekenis van lettertypen met kronkelige lijnen aan het einde, zoals Times New Roman.
  • Sans-Serif - Eenvoudige lettertypen zonder kronkels, zoals Helvetica. De fonts die op deze website worden gebruikt zijn daar een voorbeeld van.
  • Scherm - Lettertypen die kunnen worden gebruikt in grotere formaten zoals koppen.
  • Handschrift - Wilt u dat uw typografie eruitziet alsof deze met de hand is geschreven? Dan is dit jouw setting.
  • Monospace - Typografie waarbij alle personages dezelfde ruimte innemen, zoals dit.

Andere filters zijn onder meer:

  • Sorteren - Sorteer lettertypen op trend, populair, datum toegevoegd of alfabetisch.
  • Talen -Beperk uw lettertypekeuze tot talen die niet in het Latijnse alfabet zijn geschreven, zoals Arabisch, Thais of Vietnamees.
  • Een aantal stijlen -Kies hoeveel beschikbare stijlen u nodig heeft, wat betekent of een lettertype beschikbaar is in verschillende diktes, cursief, vet en meer.
  • Dikte - Kies de gewenste dikte van uw lettertype.
  • Schuin - Hetzelfde als dikte maar dan voor de inslag. Het varieert van recht tot bijna horizontaal.
  • Breedte - Filter lettertypen op de breedte van hun letters en spatiëring.

Wanneer u filters toepast, worden uw zoekresultaten in realtime aangepast. Aan de linkerkant ziet u beschikbare lettertypen in uw categorie en voorbeeldzinnen.

Wanneer u de muisaanwijzer op een lettertype plaatst, kunt u de vervolgkeuzemenu's bovenaan gebruiken om Google-lettertypen een voorbeeldalinea, het hele alfabet of cijfers te laten weergeven. U kunt ook gewoon op het zinnenveld klikken en schrijven wat u maar wilt.

voorbeeldtekst bewerken in Google-lettertypen

Daarnaast zijn er opties om de tekenstijl en -grootte te wijzigen. Wanneer u wijzigingen aanbrengt, krijgt u ook de optie om deze toe te passen op al uw zoekresultaten. Bekijk ten slotte de pagina met lettertypegegevens door op te klikken Zie specimen.

pagina met lettertype-details in Google-lettertypen

3. Voeg lettertypen toe aan uw verzameling

Als je van een bepaald lettertype houdt, kun je het rode plusteken in de rechterbovenhoek gebruiken om het aan je verzameling toe te voegen. Als u dit doet, wordt onderaan een menu geopend waarin u al uw gekozen lettertypen ziet.

lettertypen geselecteerd in Google-lettertypen

Merk op dat u meer dan één lettertypefamilie kunt toevoegen. Dit is bijvoorbeeld logisch wanneer u er een kiest voor uw lichaamstekst en een andere voor koppen.

4. Pas de lettertype-instellingen aan

Als u tevreden bent met uw verzameling, klikt u op het onderste menu. Als u dit doet, wordt dit scherm geopend:

lettertype-instellingen in Google-lettertypen

Zoals u kunt zien, kunt u enkele stukjes code vinden om lettertypen op uw site in te sluiten en te gebruiken. Dit wordt later belangrijk. Klik voor nu op het tabblad dat zegt Aanpassen. Hierdoor kom je in dit menu:

pas lettertypen aan in Google-lettertypen

Hier kunt u de stijlen van de betreffende lettertypen selecteren. Dit is belangrijk als u lettertypen in verschillende formaten wilt gebruiken, wat vaak het geval is.

Wees echter voorzichtig: hoe meer stijlen uw site moet laden, hoe meer deze zal vertragen (Google Fonts geeft u zelfs een indicatie van de laadsnelheid voor uw huidige collectie in de rechterbovenhoek). Bedenk dus wat u echt nodig heeft en kies daar alleen voor. Er zijn trouwens meer manieren om WordPress te versnellen.

Als u een andere taal nodig heeft dan het standaard Latijnse alfabet, selecteer deze dan ook onderaan.

selecteer lettertypetalen in Google-lettertypen

Daarnaast hoeft u alleen maar de twee pijlpictogrammen bovenaan te weten.

download en deel knop in Google-lettertypen

Degene aan de linkerkant stelt je in staat om een ​​voorbeeld van je fontverzameling te bekijken en te delen. Wanneer u ervoor kiest om dit te doen, wordt er een uitgebreide pagina geopend waar u voorbeeldtekst kunt invoegen en deze in alle lettertypen tegelijk kunt zien. Deze pagina is ook goed te delen met mensen.

Belangrijker is de downloadknop ernaast. Door erop te klikken, kunt u de lettertypebestanden downloaden om ze op uw desktopcomputer te gebruiken (bijvoorbeeld in Photoshop). Gebruik Skyfonts om ze up-to-date te houden.

Later zullen we u ook een manier laten zien om deze bestanden naar uw server te uploaden en lettertypen rechtstreeks op uw site te hosten. Houd hier rekening mee voor de toekomst. Voor nu laten we u een tweede, vergelijkbare lettertypebibliotheek zien.

Extra bron voor aangepaste lettertypen

  • 15+ webveilige lettertypen die we aanbevelen

Met het bovenstaande zou je iets voor jezelf moeten kunnen vinden. Nog een laatste tip: als u niet weet hoe u lettertypen op de juiste manier moet combineren, gebruik dan Lettertype-paar waar ontwerpers het beenwerk voor u hebben gedaan.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
Like this post? Please share to your friends:
Adblock
detector
map