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.
- Webbtypsnitt (även kallade HTML-typsnitt) är typsnitt som finns på en webbplats från tredje part och länkas till på din webbplats.
- Lokalt hostade typsnitt är just det (hostade på webbplatsens servrar.)
- Webbsäkra typsnitt är ett begränsat utbud av typsnitt som är förinstallerade på (nästan) alla datorer och som du kan vara ganska säker på att alla dina besökare kommer att ha tillgång till.
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:
- Använda webbtypsnitt som Google Fonts genom att installera ett plugin som ger dig åtkomst.
- Använd webbtypsnitt genom att koda dem i ditt tema och köa dem (inte så knepigt som det låter).
- Hosta dina typsnitt på din egen hemsida och lägga till dem i ditt tema.
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. Den största leverantören av gratis webbtypsnitt. Du kan också ladda ner alla deras typsnitt till din dator, vilket innebär att om du vill skapa offline-material med samma typsnitt som din webbplats kan du göra det. Och allt är gratis.
- Adobe Edge Web Fonts. Dessa är också gratis. Medan de är utformade för att användas med Adobe-produkter, fungerar de bra på alla webbplatser.
- Fonts.com är en premiumleverantör av typsnitt som du kan behöva använda om du måste matcha ditt webbtypsnitt till ett typsnitt från ditt tryckta material och typsnittet inte är tillgängligt via en gratis leverantör.
- fontfabric är en typsnittsdesigner som tillhandahåller premiumtypsnitt för användning som webbtypsnitt och online. Du måste betala för dessa men kommer att få något mer individuellt än om du använde 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:
- Enkelhet: att lägga till några rader kod eller installera ett plugin är snabbare än att ladda ner och ladda upp typsnittsfiler och gör det lättare att ändra typsnitt längre fram.
- Utbud av typsnitt: det finns tusentals typsnitt tillgängliga som webbtypsnitt och listan växer hela tiden.
- Uppdatering: Om typsnittsfilen behöver uppdateras, kanske för att lägga till variabla typsnitt (mer om det inom kort) eller för att lägga till extra tecken, kommer din webbplats att ha tillgång till den nya versionen utan att du behöver göra någonting.
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:
- Titta på dina tryckta material. Finns det typsnitt som redan används som du kan hitta som webbtypsnitt? Om inte, kan du hitta något liknande?
- Titta på dina konkurrenters webbplatser. Vilka typsnitt använder de? Jag rekommenderar inte att du kopierar dem, men det kan finnas vissa stilar som förmedlar rätt sorts image till dina webbplatsanvändare.
- Tänk på vilken typ av humör du vill förmedla med dina typsnitt. Vissa typsnitt ser modernare ut, andra mer traditionella. Vissa är roliga, andra allvarligare.
- Håll dig till typsnitt som är lätta att läsa för brödtexten och använd mer intressanta typsnitt för rubriker om du vill.
- Välj från de mest populära Google Fonts – dessa kommer att vara bekanta hos webbplatsbesökare och är lätta att läsa.
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.
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.
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.
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.
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:
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=RalewayKö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
- Du kanske föredrar att inte dra in resurser från tredjepartsleverantörer av säkerhetsskäl, att veta att din egen webbplats säkerhet kontrolleras av dig.
- Det kan hända att användningen av en tredjeparts tjänst påverkar webbplatsens prestanda.
- Du kanske har köpt en typsnittsfil och vill använda den. Se till att din licens inkluderar webbplatsanvändning samt användning i tryckt material.
- Din webbplats kan vara hostad lokalt, till exempel på ett intranät, och användarna har inte tillgång till webbtypsnitt när de använder den.
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 filen (-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.
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.
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.
Ä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.
Ä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.
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:
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.
Härifrån kan du redigera bakgrundsfärgen och teckenfärgen för ett textblock.
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.
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.
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;
}
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.
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;
}
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.
- Använd cachning för att säkerställa att sidor inte behöver byggas om varje gång de laddas. Kinstas hostingplaner kommer med inbyggd cachning.
- Använd en leverantör av webbtypsnitt som levererar typsnitt med hjälp av ett innehållsleveransnätverk eller CDN. Google Fonts gör detta och det påskyndar leveransen av typsnitt.
- Använd bara de typsnitt du behöver. Köa inte variationer av typsnitt (vikter, stilar) som du inte kommer att använda i din stilmall. Om du behöver dem vid ett senare tillfälle, kan du alltid lägga till dem då.
- Om du använder webbtypsnitt, se till att du köar dem ordentligt. Använd inte en @import-rad i din stilmall, även om detta är vad din webbtypsnitts-leverantör säger att du ska göra.
- När du lägger till CSS manuellt lägger du till det i temats stilmall och inte i avsnittet <head> i din header.php-fil. Detta är en anledning till att det är bättre praxis att koda CSS manuellt i ditt tema i stället för att använda Customizer eller ett block, som båda kommer att lägga till inline-CSS till sidan istället för att lägga till den i stilmallen.
- Överväg att använda CSS inlining för att minska sidladdningstider med några extra millisekunder. Det här är en process som använder base64-kodning för att lägga till CSS från din stilmall till sidan innan du laddar den, vilket gör att webbläsaren inte behöver ladda extra filer. Det kan tyckas kontraintuitivt med tanke på råden ovan om att inte skriva inline CSS, men det fungerar fortfarande från en separat CSS-fil och betyder inte att manuellt koda inline CSS. Om du laddar flera typsnitt kan inlining påskynda din webbplats lite.
- Använd minifiering för att minska storleken på din stilmall. Som Kinsta-kund gör du detta enkelt genom att dra fördel av kodminifieringsfunktionen som finns direkt i MyKinsta-instrumentpanelen. Detta gör att kunderna kan aktivera automatisk CSS- och JavaScript-minifiering med ett enkelt klick, vilket snabbar upp deras webbplatser utan manuell ansträngning.
- Om du hostar typsnitt lokalt, bara ladda upp filerna för de typsnitt och typsnittsvikter och stilar du behöver. Lägg bara till de variationer som du behöver med @font-face-deklarationen.
- Överväg att använda ett CDN för att hosta dina egna typsnitt istället för att hosta dem på din egen server.
- När du hostar dina egna typsnitt, inkludera ytterligare format: woff2, woff, ttf och eot. Webbläsaren kan sedan välja den version som kommer att ladda snabbast.
- Om du använder ett annat typsnitt för din webbplatstitel, köa bara de tecken du behöver istället för hela typsnittsbiblioteket.
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:
- Är de nya typsnitten förenliga med dina befintliga typsnitt? Förmedlar de en liknande stil eller stämning?
- Om du behöver matcha ett typsnitt som har använts för utskrivet material men inte kan använda samma typsnitt som ett webbtypsnitt, försök att hitta så nära en matchning som möjligt på Google Fonts.
- Är de typsnitt du har valt förenliga med ditt varumärke? Om du driver ett seriöst företag vill du inte använda Comic Sans (i själva verket, vilken typ av webbplats du än driver, använd inte Comic Sans).
- Om du ändrar färgerna på dina typsnitt, försök att använda färger som redan finns i designen av ditt tema eller som passar väl med dem. Att lägga till alltför många färger kommer att göra att din webbplats ser skrikig och oprofessionell ut.
- Om du försöker välja ut ett par typsnitt på Google Fonts, försök använda en tjänst som fontpair för att hitta två som fungerar bra tillsammans.
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.
Sammanfattning
Att ändra typsnitt på din WordPress-webbplats är inte en enkel uppgift. Du har olika möjligheter att välja mellan:
- Använda webbtypsnitt genom att installera ett plugin.
- Använd webbtypsnitt genom att koda dem i ditt tema och köa dem.
- 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.
Vill du rensa din sida eller blogglayout för att få dina läsare att fokusera på ditt innehåll? Kolla då in detta: Hur man tar bort sidofältet i WordPress (4 metoder).
Rachel McCollin har hjälpt människor att bygga webbplatser med WordPress sedan 2010. Hon är ett stort fan av självhostad WordPress och vill hjälpa så många människor som möjligt att skapa en fantastisk webbplats med detta.
Lämna ett svar