Typsnitt kan vara skillnaden mellan en tråkig webbplats och en vacker webbplats. Genom att lära sig att ändra typsnitt i WordPress, kan du få din webbplats att se modern, professionell, och varumärkt ut.

Men vad är det bästa sättet att använda typsnitt på din WordPress-webbplats, och hur väljer du rätt typsnitt för din design?

I den här guiden kommer jag att gå igenom dig allt du behöver veta om typsnitt i WordPress. Du kommer lära dig:

Typsnitt: Terminologin

Låt oss börja med att titta på terminologin kring typsnitt på webben.

Låt oss ta en titt på alternativen för att lägga till typsnitt på din webbplats.

Så här lägger du till typsnitt på din WordPress-webbplats (alternativen)

Innan du hoppar till att lägga till typsnitt på din webbplats hjälper det om du förstår de alternativ som är tillgängliga för dig.

Typsnitt är en del av webbplatsens design, så i de flesta fall kommer de att kodas via ditt tema – men inte alltid. I vissa fall kan du välja att använda ett plugin för att aktivera ett bredare utbud av typsnitt på din webbplats.

Här är några av de alternativ som är tillgängliga för dig:

Det finns två huvudsakliga skillnader – om du använder webbtypsnitt som är hostade utanför din webbplats, eller om du väljer att hosta dina typsnittsfiler själv. I den här guiden tittar vi på fördelarna och nackdelarna för båda.

Låt oss börja med att titta på webbtypsnitt: varför du kanske ska välja att använda dem och sätt att lägga till dem på din webbplats.

Att använda webbtypsnitt i WordPress

Webbtypsnitt är det mest populära sättet att lägga till typsnitt på din webbplats eftersom de gör det enkelt att lägga till ett stort antal typsnitt.

Vad är Webbtypsnitt?

Webbtypsnitt är typsnitt som finns på en tredjepartsleverantörs webbplats. Istället för att kopiera filerna till din egen webbplats länkar du till leverantörens hemsida och de hämtas därifrån.

Det innebär att du har tillgång till ett stort antal typsnitt utan att behöva använda serverutrymme på ditt eget webbhotell. Det betyder också att om typsnittsfilerna skulle ändras över tid behöver du inte uppdatera dina filer och du har automatiskt tillgång till de nya versionerna av filerna från leverantören.

Webbtypsnitt kan vara gratis eller betalda, vanligtvis via en prenumeration. Några populära leverantörer:

Google Fonts

Google Fonts

Alla dessa leverantörer låter dig servera typsnitt direkt från sina servrar genom att lägga till lite kod till din WordPress-webbplats eller ibland genom att använda ett plugin vilket innebär att du inte behöver lägga till någon kod.

Webbtypsnitt skiljer sig från webbsäkra typsnitt. Du kan använda dessa som en reserv för webbtypsnitt om din webbplatsbesökare inte kan ansluta till webbtypsnittet av någon anledning. Jag ska visa dig hur man gör det senare i det här inlägget.

Varför ska du använda Webbtypsnitt?

Så nu när du vet vad Webbtypsnitt är, varför skulle du välja att använda dem istället för att hosta dina egna typsnitt?

Här är några av fördelarna:

De flesta webbplatser använder webbtypsnitt med ett webbsäkert typsnitt som en backuplösning. Och med WordPress är det väldigt lätt att göra.

Hitta de bästa Webbtypsnitten för din webbplats

Efter att ha bestämt att du ska använda Webbtypsnitt har du nu ett tufft beslut: vilket typsnitt ska du använda?

På den gamla goda tiden när allt webbutvecklare hade tillgång till var de förinstallerade webbsäkra typsnitt, var detta ett mycket enkelt beslut. Vill du använda ett serif-typsnitt eller sans-serif? (Serif-typsnitt har en liten linje eller streck i slutet av ett större streck i varje tecken, sans-serif-typsnitt har inte det.) Efter att ha fattat det beslutet var dina val mycket begränsade.

Men nu har du hela världen vid dina fötter.

Här är några tips som hjälper dig att välja det bästa typsnittet för din webbplats:

När du har valt dina typsnitt, spendera lite tid på att experimentera med dem. Typsnittleverantörer som Google Fonts låter dig skriva in anpassad text för att se hur det ser ut i ditt valda typsnitt. När du ser din egen text i typsnittet kan det hjälpa dig att bestämma om det är rätt typsnitt för dig.

Experimentera med ditt typsnitt

Experimentera med ditt typsnitt

Och kom ihåg att använda webbtypsnitt gör det väldigt enkelt att ändra dina typsnitt så att du alltid kan byta till ett annat alternativ medan du utvecklar ditt tema eller konfigurerar din webbplats.

Så här lägger du till webbtypsnitt med ett WordPress-Plugin

Så du har valt ditt typsnitt, nu är det dags att lägga till det på din webbplats.

Om du inte känner dig bekväm med att lägga till kod till dina temafiler kan du installera ett plugin som låter dig komma åt Google Fonts och använda vilket typsnitt du än vill ha på din webbplats.

Google Fonts Typography-plugin ger dig tillgång till hela biblioteket med Google Fonts och låter dig granska dem via WordPress Customizer.

Installera pluginet på din webbplats precis som du skulle något annat plugin, och sedan aktivera det.

Gå till Utseende > Anpassa för att komma åt Customizer. Du ser ett avsnitt för Google Fonts.

Google Fonts i Customizer

Google Fonts i Customizer

Klicka på den länken för att komma åt inställningarna för dina typsnitt. Konfigurera dem enligt följande:

Grundläggande inställningar: konfigurera standardtypsnittet för din brödtext och dina rubriker, liksom alla knappar. I skärmdumpen nedan kan du se att jag har lagt till ett lättläst serif-typsnitt för brödtexten och ett mer distinkt typsnitt för rubriker.

Konfigurera grundläggande inställningar

Konfigurera grundläggande inställningar

Avancerade Inställningar: Här kan du konfigurera varumärkning (webbplatstitel och beskrivning), navigering (din meny), innehåll och rubriker mer detaljerat, ditt sidofält och sidfot. Du kan också ladda typsnitt utan att tilldela dem till något, vilket innebär att du kan lägga till dem till anpassad CSS i Customizer.

Typsnittsladdning: Om det finns några typsnittsvikter som du inte behöver (dvs. fet, kursiv, den typen av saker), kan du avmarkera dem här så att de inte saktar ner din webbplats i onödan.

Felsökning: Använd detta för att tvinga alla typsnitt att visas om de inte fungerar som de borde.

Tillbringa lite tid med att arbeta med dessa inställningar och testa dem i Customizer för att säkerställa att de fungerar som du vill. Klicka sedan på knappen Publicera när du är nöjd med dina inställningar. Lämna inte Customizer utan att klicka på Publicera annars kommer du att förlora dina ändringar.

Redigera teckenfärg

Den kostnadsfria versionen av pluginet låter dig inte redigera färgerna på dina typsnitt. För att göra det måste du antingen köpa premiumversionen eller använda alternativet Ytterligare CSS i Customizer.

Gå tillbaka till startskärmen för Customizer och klicka på fliken Ytterligare CSS. Du kommer att presenteras med ett tomt textområde där du kan lägga till din egen CSS.

För att hitta det element du behöver styla, välj det och använd kodinspekteraren i din webbläsare för att ta reda på vilken färgstyling den redan har.

Nedan använder jag Google Chrome och jag har riktat in mig på ett h1-element.

Inspektera koden i Chrome

Inspektera koden i Chrome

I mitt WordPress-tema har det ärvt sin färg från body-elementet. Jag vill lägga till något mer specifikt. I textområdet för din CSS, skriv in CSS för ditt element och den färg du vill använda. Min ser ut så här:

h1 {
 color: #f542f5;
}

Det ger mig ett ljusrosa h1-element:

Ändra färg på rubriken

Ändra färg på rubriken

Du kan upprepa detta med alla textelement du vill lägga färg till, och även alla du vill lägga till egna typsnitt som inte ingick i alternativen i de andra skärmarna. Om du vill veta vilken CSS du ska använda för typsnitt, läs vidare till avsnittet i det här inlägget om att ändra dina typsnitt via CSS.

Så här lägger du till webbtypsnitt manuellt

Om du inte vill lägga till ett extra plugin till din webbplats och har tillgång till koden för ditt tema, kan du installera och använda webbtypsnitt genom att lägga till lite kod till din funktionsfil och din stilmall.

Om din webbplats använder ett skräddarsytt tema som du kan redigera kan du redigera funktionsfilen och stilmallen från ditt tema. Men om du använder ett tredjepartstema som du köpte eller fick från WordPress temakatalog, måste du skapa ett barntema. Du måste då ge det två filer: functions.php och style.css.

Låt oss gå igenom processen att manuellt lägga till webbtypsnitt till ditt tema. Jag kommer att arbeta med Google Fonts för det här exemplet, eftersom det är det vanligaste och det är gratis.

Välj ett typsnitt och spara länken

Börja med att välja typsnitt från Google Fonts. Lägg till det i biblioteket genom att klicka på plusikonen bredvid det.

Klicka på fliken längst ner på skärmen i ditt bibliotek och du kommer att se kod du kan lägga till på din webbplats. Om du vill lägga till extra typsnittsvikter och format klickar du på fliken Anpassa och väljer de du vill ha. Gå sedan tillbaka till fliken Bädda in.

Kopiera inte koden exakt: du använder den, men istället för att anropa typsnittet i avsnittet <head> i sidhuvudet kommer du köa typsnitten. Detta är det rätta sättet att göra det i WordPress.

I stället kopierar du bara länken till typsnittet från avsnittet Bädda in typsnitt.

Så i mitt fall ger Google Fonts mig den här koden:

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

Jag behöver bara kopiera den här biten:

https://fonts.googleapis.com/css?family=Raleway

Köa typsnitten

Öppna temats funktionsfil och lägg till följande, men ersätt länken för mitt typsnitt med länken Google har gett dig för ditt:

function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );

Detta köar stilen från Googles Fonts servrar. Om du behöver lägga till fler typsnitt i framtiden kan du antingen lägga till en ny rad i din funktion eller lägga till den i samma rad, så här:

function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Merriweather|Raleway');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );

Detta kommer att fråga både typsnitten Merriweather och Raleway.

Att lägga till typsnitt i din stilmall

Detta kommer inte att göra så typsnittet fungerar på din webbplats ännu: du behöver fortfarande lägga till det i ditt temas stilmall.

Öppna styles.css-filen i ditt tema och lägg till koden för att styla enskilda element med dina webbtypsnitt. Se till att du lägger till den efter någon befintlig CSS för typsnitt, annars kan den bli åsidosatt av det.

Vilka element du stylar är vara upp till dig, men det är vanligt att använda ett läsbart typsnitt för body-elementet och något snyggare för rubrikerna.

body {
 font-family: 'Raleway', sans-serif;
}

h1, h2, h3 {
 font-family: 'Merriweather', serif;
}

I fallet ovan kommer allt på sidan att använda Raleway-typsnittet, förutom h1, h2 och h3-elementen, som kommer att använda Merriweather.

Nu, spara din stilmall och kontrollera din webbplats för att se till att allt fungerar som du förväntar dig. Om de nya typsnitten inte visas, försök rensa webbläsarens cache och kontrollera att typsnitten inte åsidosätts av någon styling för typsnitt lägre ner i stilmallen. Det är därför det är en bra idé att antingen lägga till din nya styling längst ner i stilmallen eller att ersätta den befintliga typsnittsstylingen med din nya styling (ännu bättre).

Lägga till ett typsnitt som backup

Det kan finnas tillfällen när någon besöker din webbplats och inte kan komma åt webbtypsnittsfiler av någon anledning. Kanske är de på en dålig anslutning eller använder en gammal enhet som inte kommer att rendera webbtypsnitt. Eller kanske har din webbtypsnittsleverantör tekniska problem.

Av denna anledning är det en bra idé att ha en backup på plats.

Koden du får av Google fonts har redan en backup i att helt enkelt ange serif eller sans-serif, men vi kan gå ett steg längre än så.

Använd ett av de webbsäkra typsnitt som redan är installerade installeras på besökarens maskin, och sedan inkludera den andra reserven av bara serif eller sans-serif, om de använder en mobil enhet som inte ens har webbsäkra typsnitt.

Gå tillbaka till din stilmall och redigera din CSS så att det står ungefär så här:

body {
 font-family: 'Raleway', Helvetica, sans-serif;
}

h1, h2, h3 {
 font-family: 'Merriweather', Georgia, serif;
}

Detta innebär att människor som besöker din webbplats kommer att se ditt webbtypsnitt om allt är okej; men om det inte är det kommer de att se Helvetica eller Georgia, och om det misslyckas kommer de att se det serif och sans-serif-typsnitt som deras webbläsare kan ladda.

Hosta dina egna typsnitt i WordPress

Vissa utvecklare föredrar att inte använda webbtypsnitt utan istället att vara hosta typsnitt på sina egna servrar och du kan vara en av dem.

Detta kan vara av ett eller flera skäl, inklusive säkerhet, prestanda eller budget.

Om du är orolig för prestanda kan du optimera prestanda för dina webbtypsnitt på ett antal sätt, som vi tar upp senare i det här inlägget. Men om du har beslutat att gå ner den lokala vägen, måste du veta hur man gör det.

Varför hosta dina egna typsnitt?

Att använda webbtypsnitt är ofta lättare och kan ge dig mer flexibilitet samt tar upp mindre utrymme på din server. Men det betyder inte att det inte finns tillfällen när lokalt hostade typsnitt kanske inte är mer lämpliga.

Skäl till att du kanske vill vara hosta typsnitt lokalt inkluderar:

Du kan upptäcka att du kan komma runt några av dessa problem

Var hittar du typsnitt du kan hosta lokalt

Många webbtypsnitt kan också laddas ner för användning som lokalt hostade typsnitt men du måste kontrollera att detta är tillåtet av licensen. När det gäller Google Fonts är det tillåtet.

Det finns också typsnitt som inte är tillgängliga som webbtypsnitt som du kan ladda ner och hosta själv. Alla typsnittsfiler som du kan ladda ner till din dator kan också laddas upp till din webbplats och lagras där. Om du behöver använda ett typsnitt som inte är tillgängligt som ett webbtypsnitt för att knyta samman med ditt varumärke, kommer det att vara lösningen men se till att din licens tillåter det.

Så här lägger du till lokalt hostat typsnitt till din WordPress-webbplats

Så du vet att du vill hosta dina typsnitt lokalt, hur ska du konfigurera det?

Processen skiljer sig från att använda webbtypsnitt. Du måste ladda upp typsnittsfilen (-filerna) till din webbplats och du länkar till dem i din stilmall utan att behöva köa dem i din funktionsfil.

Ladda ner och konvertera typsnitt

Börja med att ladda ner de typsnitt du vill använda. I Google Fonts kan du göra detta genom att klicka på nedladdningsikonen när du visar typsnittet i ditt bibliotek.

Hämta typsnitt från Google Fonts

Hämta typsnitt från Google Fonts

Packa upp typsnittsfilen på din dator och ta bort alla typsnittsvikter som du inte behöver använda på din webbplats: det finns ingen anledning att ladda upp filer som du inte kommer att använda.

För att användas på din webbplats, måste filerna vara i .woff-format. Om de inte är det (de kommer inte att vara det om du fick dem från Google fonts) kan du använda en tjänst som Convertio för att konvertera dem.

Ladda upp typsnitt till ditt tema

Ladda nu upp typsnittsfilen till ditt tema, i wp-content/themes/themename, där themename är mappen för ditt tema. Det är en bra idé att lägga typsnittsfiler i sin egen mapp i temat, till exempel en fonts-mapp.

Om du arbetar med ett tredjepartstema, skapa ett barntema för dina typsnittsfiler och din stilmall.

När du har gjort det måste du lägga till typsnittet i din stilmall.

Lägga till typsnitt i CSS

Öppna temats stilmall.

Lägg till koden så här, ersätt de typsnitt jag har använt med dina egna:

@font-face {
 font-family: 'Raleway';
 src: url( "fonts/Raleway-Medium.ttf") format('woff'); /* medium */
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'Raleway';
 src: url( "fonts/Raleway-Bold.ttf") format('woff'); /* medium */
 font-weight: bold;
 font-style: normal;
}

@font-face {
 font-family: 'Merriweather';
 src: url( "fonts/Merriweather.ttf") format('woff'); /* medium */
 font-weight: normal;
 font-style: normal;
}

Lägg till mer om du behöver. Observera att om du vill använda fet, kursiv, etc. varianter av ditt typsnitt, du måste deklarera var och en med @fontface och sedan ange vikt eller stil för varje, som jag har gjort ovan med Raleway för feta och normala vikter.

Lägg nu till styling för dina element, som du skulle när du använder webbtypsnitt:

body {
 font-family: 'Raleway', Helvetica, sans-serif;
 src: url( "/fonts/Raleway-Medium.ttf" );
}

h1, h2, h3 {
 font-family: 'Merriweather', Georgia, serif;
}

Ditt lokalt hostade typsnitt kommer nu att fungera med ditt tema.

Så här ändrar du typsnitt i WordPress

Nu vet du hur man installerar typsnitt i din WordPress-webbplats på ett av två sätt. Men hur redigerar du dem? Vad sägs om att ändra dem?

Du kan redigera dina typsnitt på ett av tre sätt: via Customizer, i inläggs- eller sidredigeringsskärmen eller med hjälp av CSS.

Låt oss titta på var och en av dessa alternativ för att ändra typsnitt, färg och storlek.

Så ändrar du typsnitt i WordPress

Låt oss se hur vi kan göra det både om du använder Blockredigeraren eller den klassiska redigeraren.

Ändra typsnitt i Block-redigeraren (Gutenberg)

Om du använder en ny version av WordPress med Gutenberg-redigeraren kan du ändra stilen på din text när du redigerar den i ditt inlägg eller sida.

Välj det block du vill redigera och en stylingmeny visas ovanför det.

Gutenberg blockstyling

Gutenberg blockstyling

Markera den text du vill redigera och klicka sedan på ikonerna för att göra den fet eller kursiv. Om du klickar på pilen bredvid dem ser du att du också kan välja genomstrykning.

Genomstrykning i Gutenberg

Genomstrykning i Gutenberg

Ändra typsnitt i den klassiska redigeraren

Om du kör en äldre version av WordPress eller om du har Classic Editor-pluginet installerat, kan du också redigera typsnitt. (Om du inte vill ha Gutenberg-redigeraren är det bättre att uppdatera WordPress och inaktivera Gutenberg.)

Den klassiska redigeraren innehåller ett verktygsfält ovanför huvudredigeringsfönstret där du kan ändra textens stilar. Om du klickar på Växla verktygsfält-ikonen till höger, kan du komma åt fler alternativ, inklusive genomstrykning.

Classic Editor styling-verktygsfält

Classic Editor styling-verktygsfält

Ändra typsnitt i Customizer

Om du vill ändra typsnittsstilen för ett visst element kan du göra detta genom att lägga till manuell CSS till Customizer.

Öppna Customizer och klicka på Ytterligare CSS. Detta öppnar en skärm där du kan skriva in CSS.

Ytterligare CSS i Customizer

Ytterligare CSS i Customizer

Nu kan du skriva in CSS för dina typsnitt i rutan. Så om du ville ändra alla h1- och h2-element till kursiv, skulle du lägga till denna CSS:

h1, h2 {
 font-style: italics;
}

Ändra typsnitt i din stilmall

Om du är bekväm med att lägga till kod i din stilmall, är detta ett bättre sätt att göra det.

Om du använder ett tredjeparts tema, skapa ett barntema för din egen styling annars kommer eventuella ändringar du gör att gå förlorade när du uppdaterar temat. Du måste skapa en stilmall i barntemat för att tala om för WordPress att det är ett barntema: det är där du lägger din nya typsnitt-styling.

Om du använder ditt eget tema kan du redigera och ändra CSS i din egen stilmall. Filen är style.css och du hittar den i din temamapp i wp-content/themes.

Lägg till eventuell typsnitt-styling i slutet av din stilmall så att den inte skrivs över av något som redan är där. Eller ännu bättre, ta bort och skriv över all befintlig typsnitt-styling, om du inte vill behålla den.

Ändra vikten på ett element med font-weight:

span.featured {
 font-weight = bold;
}

Ändra stilen på ett element med font-style:

span.featured {
 font-style = italic;
}

Ändra justeringen med text-alignment:

Är du trött på en långsam värd för din WordPress-webbplats? Vi erbjuder brinner-snabba servrar och världklass support tillgängligt dygnet runt från WordPress-experter. Kolla in våra planer

span.featured {
 text-alignment: center;
}

Så här ändrar du teckenfärger i WordPress

En annan ändring du kanske vill göra är att ändra färgen på viss text på din webbplats. Akta dig för att gå till överdrift med detta: ditt tema har utformats med färger som fungerar bra tillsammans och om du lägger till för många färger, kan det se skrikigt och oprofessionellt ut.

Ändra teckenfärger i Gutenberg

Gutenbergs textblock låter dig redigera teckenfärg och bakgrund. För att göra detta, öppna det block du vill ändra och klicka på fliken Färginställningar i Blocksektionen till höger på skärmen.

Fliken Färginställningar

Fliken Färginställningar

Härifrån kan du redigera bakgrundsfärgen och teckenfärgen för ett textblock.

Anpassade färger i ett block

Anpassade färger i ett block

Observera att WordPress kommer att varna dig om kombinationen av färger du använder kommer att vara dåligt för tillgänglighet, till exempel i exemplet jag har använt ovan. Undvik frestelsen att gå till överdrift med dina färger – trots allt valde du ditt tema eftersom dess färgdesign var lämplig för din webbplats, och att lägga till många fler färger kan få det att se skrikigt ut.

Om du klickar på fliken Avancerat under fliken Färginställningar kan du också lägga till en klass i det blocket, som du sedan kan styla i Customizer eller din stilmall. Så till exempel, om du lagt till en klass av .featured till ditt block, kan du sedan styla den med den klassen.

Ändra teckenfärg i den klassiska redigeraren

Den klassiska redigerarens verktygsfält låter dig ändra färgen på vilken text du än väljer. Så du kan välja ett enskilt ord och ändra dess färg. Nedan har jag gjort en mening röd.

Ändra färger i den klassiska redigeraren

Ändra färger i den klassiska redigeraren

Medan detta, i teorin, ger dig gott om flexibilitet, se till att inte överanvända det. Om du börjar lägga till många fler färger i din text kan det leda till en webbplats som är svår att läsa och är dålig för tillgänglighet.

Ändra teckenfärg i Customizer

Om ditt tema innehåller alternativ för att ändra färgschemat på din webbplats är detta det bästa stället att göra det.

Till exempel, på webbplatsen nedan använder jag ett tema som låter mig välja ett nytt färgschema för hela temat. Detta bidrar till att säkerställa att de nya färgerna fungerar bra tillsammans och är sammanhängande.

Redigera färgschemat i Customizer

Redigera färgschemat i Customizer

Alternativen för detta kommer att variera beroende på ditt tema – med vissa teman kan du välja rubriker, länkar och andra element och ändra deras färg.

Om du vill rikta in dig på specifika element för att ändra dess färg men det inte är ett alternativ med ditt tema, kan du lägga till CSS i Customizer för att göra detta.

Välj Anpassa > Ytterligare CSS och skriv din CSS i textrutan.

Om du till exempel vill ändra färgen på dina h1-rubriker skriver du detta:

h1 {
 color: #564534;
}

Om det inte fungerar kan du behöva lägga till mer specifik CSS. I mitt tema kodas färgen för webbplatsens rubriklänk med #site-title-ID, så jag måste lägga till denna CSS:

#site-title a {
 color: #564534;
}
Ytterligare CSS - färg

Ytterligare CSS – färg

Byt ut den färg jag har använt ovan med din egen färg.

Klicka sedan på knappen Publicera när du är nöjd med dina inställningar.

Ändra teckenfärger i din stilmall

Som med typsnittsstilar kan du också redigera temats stilmall (eller skapa ett barntema) för att ändra teckenfärgerna.

Ändra färgen med färg. Nedan ändrar jag huvudfärgen för min webbplats text, med hjälp av body-elementet:

body {
 color = #222222;
}

Se till att du åsidosätter all befintlig styling för samma element och att du också stylar eventuella element som ärver den stylingen om du vill att de ska ha en annan färg. All text kommer att ärva färgen på body-elementet om den inte har sin egen styling.

Ändra teckenstorlekar i WordPress

Av tillgänglighetsskäl kanske du bestämmer att du vill att dina typsnitt ska vara större än de är som standard i ditt tema. Eller så kan du bestämma att rubrikerna i dina widgetområden är för små, till exempel.

Ändra teckenstorlek i Gutenberg

Med Gutenberg-redigeraren kan du ändra storleken på texten i varje block.

Välj blocket och klicka sedan på fliken Textinställningar i Block-menyn till höger på skärmen. Du kan göra texten i blocket mindre eller större, som visas nedan.

Redigera teckenstorlek i Gutenberg

Redigera teckenstorlek i Gutenberg

Akta dig för att göra detta för mycket: om alla stycken på din sida är olika storlekar, kommer det att se osammanhängande ut och vara svårt att läsa.

Ändra teckenstorlek i den Klassiska redigeraren

Den klassiska redigeraren ger dig inte möjlighet att välja specifik text och ändra dess storlek: så om du behöver den här funktionen måste du uppgradera till Gutenberg. Tyvärr!

Ändra teckenstorlek i Customizer

Beroende på ditt tema, kan du ha en möjlighet att ändra teckenstorlekar i Customizer, antingen ändra teckenstorlek för hela webbplatsen eller rikta in dig på rubriker och brödtext.

Om ditt tema inte innehåller ett anpassningsalternativ för att ändra teckenstorlekar, kan du använda det alternativet Ytterligare CCS. Välj Anpassa > Ytterligare CSS och skriv din CSS i textrutan.

Nedan gör jag rubrikerna i widgetområdena större, med denna CSS:

h2.widget-title {
 font-size: 3em;
}
Styla teckenstorlek med ytterligare CSS

Styla teckenstorlek med ytterligare CSS

Kanske är det lite för stort, men det visar idén.

Ändra teckenstorlek i din stilmall

Att ändra storleken på typsnitt i din stilmall fungerar på ett liknande sätt som att ändra vilken annan styling för dina typsnitt.

Om du vill ändra storleken på all text på din webbplats, skulle du använda body-elementet:

body {
 font-size: 14px;
}

För body-elementet använder du pixlar, men för andra element använder du em så storleken är i förhållande till storleken på body-elementet.

h1,
#site-title {
 font-size: 2em;
}

Kom ihåg om du ska göra ändringar i typsnitt i ditt temas stilmall, testa det på en utvecklings eller stagingsajt först, så att du inte riskerar att förstöra din live-webbplats.

Så optimerar du typsnitt i WordPress

Oavsett om du använder webbtypsnitt eller lokalt hostade typsnitt, är det vettigt att göra allt du kan för att optimera dina typsnitt.

Här ska jag ge dig några tips om att optimera dina typsnitt, både för hastighet och för design.

Optimera typsnitt för prestanda

Om du använder webbtypsnitt på din webbplats vill du göra allt du kan för att se till att de levereras till dina sidor så fort som möjligt och att det faktum att de är hostade någon annanstans inte saktar ner saker och ting.

Så om din webbplatstitel är Kinsta, kan du göra en liten prestandaförbättring genom att ändra stilmallen så här:

function kinsta_add_title_font() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway&text="kinsta');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );

Optimera typsnitt för design

Förutom att optimera prestandan hos dina typsnitt är det också bra att se till att de är visuellt optimerade: att de passar bra med designen av din webbplats och med ditt offlinematerial.

Detta är särskilt fallet om du använder ett plugin eller ett barntema för att lägga till extra typsnitt ovanpå de som redan medföljer ditt tema. Det finns en risk för att ditt tema ser rörigt om det finns för många typsnitt i alltför många färger och stilar.

Tänk på följande innan du lägger till extra typsnitt på din webbplats:

De typsnitt du använder i din design kommer att ha en inverkan på det intryck besökare får när de når din webbplats. Se till att du har övervägt detta och valt typsnitt som kommer att förstärka ditt varumärke.

Arbeta med variabla typsnitt

Variabla typsnitt är en ny typ av typsnitt som gör det mer effektivt att lägga till fler typsnitt på din webbplats.

De tillåter mer information att lagras i en typsnittsfil, så att om du vill ha variationer av ditt typsnitt (fet, kursiv, etc.), behöver du inte ladda flera typsnittsfiler, utan kan bara ladda den enda.

För ett typsnitt med flera typsnittsvikter, och stilar kan detta spara mycket filutrymme och göra processen att köa typsnittet eller lägga till det via @fontface lättare också.

Variabla typsnitt stöds i de senaste versionerna av Chrome, Edge, Firefox och Safari, men inte av äldre webbläsare; så om du använder dem behöver du en reserv. Och det finns inte många variabla typsnitt tillgängliga ännu. Google Fonts innehåller inga, men Google stöder specifikationen, så det är troligt att de kommer att läggas till över tiden.

Typsnittsutvecklare arbetar med att skapa fler variabla typsnitt och förbättra deras tillförlitlighet, så det är värt att titta på framstegen så att du kan använda variabla typsnitt för att optimera dina typsnitt när de blir stabilare.

Typsnitt tas för givet men de är avgörande för ALLA webbplatser (utan undantag). Lär dig att ändra typsnitt, teckenstorlek och teckenfärg i WordPress! 🎨👨‍👦Click to Tweet

Sammanfattning

Att ändra typsnitt på din WordPress-webbplats är inte en enkel uppgift. Du har olika möjligheter att välja mellan:

  1. Använda webbtypsnitt genom att installera ett plugin.
  2. Använd webbtypsnitt genom att koda dem i ditt tema och köa dem.
  3. Hosta dina typsnitt.

Sedan bör du fokusera på hur du optimerar dina typsnitt för bättre prestanda. Om du följer tipsen i den här guiden bör du inte bara kunna ändra typsnitt i WordPress utan också ha mer kontroll över dem i ditt tema.


Om du tyckte om den här artikeln, då kommer du att älska Kinsta´s hosting-plattform. Effektivisera din hemsida och få support dygnet runt från vårt rutinerade team på WordPress. Vår Google Cloud-drivna infrastruktur fokuserar på auto-skalning, prestanda och säkerhet. Lås oss visa dig skillnaden med Kinsta! Kolla in våra paket