Een ander Google Font gebruiken in Magento 2

Een ander Google Font gebruiken in Magento 2

Om je webwinkel te onderscheiden van de rest kun je een aantal wijzigingen toepassen, zoals het wijzigen van de header stijl en het instellen van een ander kleurenschema. Een andere veelvoorkomende wijziging is het veranderen van het lettertype. Door het standaard lettertype te veranderen krijgt een Magento thema al snel een andere uitstraling. Je kunt gebruik maken van de standaard webfonts, zoals Helvetica, Verdana of Times New Roman, maar echt spannend zijn deze lettertypen niet. Gelukkig hoef je je keuze niet te beperken tot deze standaard lettertypen, er bestaan namelijk nog vele honderden niet-standaard lettertypes die je gratis kunt gebruiken via Google Fonts. Met een grote keuze aan lettertypen kun je je website volledig personaliseren. Laten we het hebben over een Google Font gebruiken in Magento In deze blogpost zal ik je uitleggen hoe je een lettertype via Google Fonts kunt inladen in je Magento 2 website.

Laten we beginnen met het uitzoeken van een lettertype. Open de website van Google Fonts, en zoek naar het lettertype wat je wilt gaan gebruiken voor je website. Wees selectief, je wilt niet teveel lettertypen inladen omdat dit de webwinkel zal vertragen. Probeer hooguit 1 lettertype toe te voegen, of een in het thema gebruikt lettertype te vervangen voor een ander lettertype.

Nadat je een lettertype hebt gevonden klik je rechtsboven op “+ Select This Font”. Een popup zal worden geopend. Vind de code en maak een notitie van het deel over na ?family= bijvoorbeeld:
Ubuntu:400,700

Dit is de naam van het lettertype en de grootte(dikte) van het lettertype. Deze code gaan we toevoegen aan het thema.

We gaan het font koppelen in het thema zodat het kan worden voorgeladen door de browser. Open het bestand
app/design/frontend/TemplateMonster/theme000/Magento_Theme/layout/default_head_blocks.xml

Vind de regel die linkt naar fonts.googleapis.com, bijvoorbeeld:

<css src="//fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,900&Montserrat:300,400,500,700&Raleway:400,700,800" src_type="url" />

Om bijvoorbeeld Ubuntu te kunnen gebruiken verander je de regel. Je voegt de familienaam toe en de groote, gevolgd door een en-teken (&). Bijvoorbeeld:

<css src="//fonts.googleapis.com/css?family=Ubuntu:400,700&Open+Sans:300,400,500,600,700,900&Montserrat:300,400,500,700&Raleway:400,700,800" src_type="url" />

Sla het bestand op. Magento weet nog niet dat het bestand is gewijzigd. Je zult het thema opnieuw moeten compileren.

Voor de volgende commando’s uit om het thema opnieuw te compileren. Voer de commando’s 1 voor 1 uit.

php bin/magento setup:upgrade
php bin/magento index:reindex
php bin/magento cache:clean

Als de commando’s succesvol zijn uitgevoerd, dan kun je daarna het font Ubuntu gebruiken in de thema css bestanden, bijvoorbeeld voor de Body in het bestand modules.css:

html, body {
  height: 100%;
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7; }

Na wijzigen van de css bestanden vernieuw je de caches. Bij een productie website zul je ook de statische bestanden opnieuw moeten compileren via het commando

php bin/magento setup:static-content:deploy

Heb je nog vragen? Laat het me weten via de comments hieronder!

Leave a reply

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *