Att byta typsnitt på din webbsida kanske känns som en ganska liten detalj i det stora hela men det kan göra stor skillnad i hur din sida uppfattas.
Har du en seriös hemsida för ditt företag, så kanske inte typsnittet Mr De Haviland passar så bra, men har du en hemsida där du skriver poesi skulle det kunna fungera alldeles utmärkt. Det är viktigt att tänka på din målgrupp när du väljer typsnitt.
Vad är Google Fonts
Google Fonts är gratis typsnitt som du kan ladda ner för att ändra utseendet på din text. De är kostnadsfria för både privatpersoner och företag. För tillfället finns det över 800 olika typsnitt att välja mellan. Det är lätt att gå in på https://fonts.google.com och titta runt själv och jämföra hur det kan se ut.
På ett enkelt sätt kan du även ändra olika inställningar. Du kan till exempel jämföra hur olika rubriker passar ihop med resten av texten, hur långt radavstånd eller vilken storlek och stil som ser bäst ut och är lättast att läsa. Man kan lägga in typsnitten på sin hemsida både manuellt eller med hjälp av ett tillägg. Nedan går vi igenom båda metoderna.
Hur lägger man in Google Fonts manuellt i WordPress?
Till att börja med ska du välja ut vilken/vilka typsnitt du vill ha. Det räcker oftast med 2-3 stycken annars kan det se plottrigt ut och ta för lång tid att ladda.
1. Gå in på https://fonts.google.com
2. Välj ut den/de du vill ha genom att trycka på + symbolen i det övre högra hörnet.
3. När du har valt klart trycker du på knappen ”family selected” som dyker upp längst ner på sidan. Då får du fram en popup som ser ut ungefär som bilden nedan.
Nu kan du anpassa typsnittet efter dina egna specifikationer på stil och storlek och så vidare. Kom ihåg att inte välja för många stilar eftersom det ökar laddningstiden. När du är klar trycker du på fliken embed.
Efter det är det dags att lägga in det på din hemsida. Det finns olika sätt att lägga in Google fonts manuellt men det som är bäst att använda för WordPress är funktionen; wp_enqueue_style() så det är den vi använder nu.
Du börjar med att kopiera länken (https://fonts.googleapis.com/css?family=Montserrat|Roboto:400,500i) du ser på bilden ovan. Efter detta öppnar du functions.php filen för ditt aktuella tema och skriver in koden i den. Kom ihåg att ersätta länken med din egen.
function add_google_fonts() {
wp_enqueue_style( ’ add_google_fonts ’, ’https://fonts.googleapis.com/css?family=Montserrat|Roboto:400,500i’, false );}
add_action( ’wp_enqueue_scripts’, ’add_google_fonts’ );
Klart, nu kan du börja använda ditt nya typsnitt! Vill du till exempel börja använda Montserrat till alla rubriker och Roboto till brödtexten, kan du öppna stilmallen för ditt tema och lägga in följande rad:
h1, h2, h3, h4, h5, h6 {
font-family: ’Montserrat’;
}
p {
font-family: ’Roboto’;
}
Hur lägger man in Google Fonts med ett tillägg?
Vissa teman kommer med Google Fonts alternativ redan inbyggt i temat, men det är långt ifrån alla. Har ditt tema inte detta, så kan du ladda ner ett tillägg. Det finns ett antal olika att välja mellan. Det är mycket enklare att använda ett tillägg än att koda manuellt.
Börja med att gå in i adminpanelen och tillägg > lägg till ny. Sök efter tillägget du vill ha. I detta fall använder vi tillägget ‘Easy Google Fonts’ som exempel. Installera tillägget och aktivera det. Tillägget sköter enqueue funktionen som vi tidigare gick igenom automatiskt så att du slipper koda.
Om du går in på hemsidan ser du att det har kommit en ny flik som heter ‘Typography’, som finns under Utseende > Anpassa. Där kan du kontrollera och ändra utseendet på dina rubriker och din brödtext. För tillfället har ‘Easy Google Fonts’ cirka 600 typsnitt att välja mellan.
Du kan även välja stil, storlek, tjocklek och så vidare. En sak som är bra med ‘Easy Google Fonts’ är att du kan förhandsgranska hur det kommer att se ut innan du implementerar ändringen. Det sparar mycket tid.
Nu har du lärt dig grunderna i hur man använder Google Fonts. Vi hoppas att det var användbart. Har du frågor är du välkommen att kontakta oss.
