Hur man ändrar teckensnitt i WordPress och förbättrar designen på din webbplats

Om din webbplats körs på WordPress kanske du vill anpassa dess utseende och förbättra dess användbarhet. Ett av de tillgängliga alternativen är att ändra typsnitten. Om du använder de teman som finns i WordPress-katalogen väljer din webbplats standardteckenstorlekarna och färgerna som ställts in av designern.

Du behöver dock inte hålla fast vid standardinställningarna. Om du ändrar typsnitten i ditt WordPress-tema kan du säkerställa att kunderna får informationen som avsett och att de också fascineras av din webbplats design. Den här artikeln kommer att utforska de olika metoderna för att ändra teckensnitten på din WordPress-webbplats.

Vikten av typografi och teckensnittsanpassning i WordPress

  • Differentiering och unikhet: Har du någonsin sett en webbplats och sagt till dig själv, ”Det här ser bekant ut”? Även om de flesta webbplatser använder teman från WordPress-katalogen kan du göra din webbplats unik genom att ändra teckenstorlek och färger.
  • Hierarki och betoning: Du kan fastställa vad som kommer före den andra genom teckensnittsdifferentiering. Till exempel kan du ha större typsnitt i H1s och mindre i H2s.
  • Konsekvens och professionalism: Du kan ge din WordPress-webbplats ett polerat utseende när du använder ett konsekvent typsnitt genomgående. Du kan också ändra teckensnittsfärgen så att den smälter ihop med dina varumärkesfärger.
  • Tillgänglighet: Att ändra typsnittet på din webbplats eller sida kan göra det lättare för användare med synnedsättning eller andra funktionshinder att läsa innehåll på din webbplats.

Rollen för CSS i teckensnittsanpassning

WordPress skapas med PHP, MySQL, HTML, CSS och JavaScript. Varje WordPress-tema har en style.css som styr den visuella layouten och designen av webbplatserna. Du kan alltså implementera de teckensnittsändringar du vill ha på din WordPress-webbplats med hjälp av denna fil.

CSS låter dig ändra saker som teckensnittsfamilj, storlek, färg och avstånd på din WordPress-webbplats. Grundläggande CSS-kunskaper behövs för att implementera sådana förändringar. Du kan dock fortfarande använda plugins om du inte vill skriva någon CSS-kod.

Nu utforskar vi några metoder för att ändra teckensnitt i WordPress.

WordPress Customizer

Detta är bland de enklaste sätten att ändra teckensnitt på din WordPress-webbplats. Nästan alla teman som är designade enligt WordPress-standarder har inbyggda funktioner som gör att du kan ändra teckensnitt, teckensnittsfärg och teckenstorlek med några få klick.

Vissa teman låter dig använda WordPress-anpassningsalternativet. Å andra sidan har vissa begränsade alternativ, vilket tvingar dig att utforska de andra alternativen vi kommer att utforska i de andra tillvägagångssätten.

Se till att du är inloggad på din WordPress och följ sedan dessa steg;

  • På vänster sida av din sida av din instrumentpanel klickar du på rullgardinsmenyn och väljer ”Utseende”.

  • Klicka på ”Anpassa”.

OBS: Utseendet på din WordPress-webbplats kan vara annorlunda beroende på vilket tema du använder. I mitt fall använder jag ”GeneratePress Child Developer Theme”.

  • När jag klickar på ”Anpassa” får jag en rullgardinsmeny där jag väljer ”Typografi”

  • Du kan nu anpassa din webbplats så att den passar dina behov.

Till exempel kan jag välja ”Body” som ändrar ”System fonts”. Standard är ’System Stack’ och jag kan välja en som passar mina behov från rullgardinsmenyn.

Temaredaktör

Temaredigeringsfunktionen låter dig redigera de olika filerna i ett WordPress-tema. Vårt fokus kommer att ligga på filen style.css eftersom den låter dig anpassa typsnitten.

De exakta stegen du bör följa kan variera beroende på vilket tema du använder. Jag använder fortfarande ”GP Developer Child Theme” i demonstrationssyfte.

Du kan följa dessa steg;

  • På din ”Meny”, klicka på ”Utseende” och sedan ”Theme File Editor”

  • Steget ovan öppnar filen style.css där du kan lägga till dina favoritstilar.

Till exempel, om du vill ändra teckensnittet på hela din webbplats till kursiv stil, kan du ha den här koden;

/* Change Font to Italics */

body {

  font-style: italic;

}

Du kan också välja den inbyggda CSS-redigeraren för att utföra dina ändringar. Klicka på fliken ”Ytterligare CSS” och skriv din CSS-kod.

Till exempel kan du ha något sånt här;

Klicka på knappen ”Publicera” för att spara dina ändringar.

Justera teckensnitt för enskilda sidor

Detta tillvägagångssätt låter dig anpassa en enskild sida eller inlägg på din WordPress-webbplats. Det är ett bra val när du vill att en viss sida ska sticka ut från resten.

Du kan använda detta tillvägagångssätt för sidor som ”Sekretesspolicyn”. Till exempel kan jag ändra en viss H1 på min ”Sekretesspolicy”-sida så att den är grön och kursiv. För att uppnå detta kommer jag att följa dessa steg;

  • Navigera till min instrumentpanel och klicka på ”Alla sidor”.
  • Jag väljer min målsida ”Sekretesspolicy” och klickar på ”redigera”
  • Klicka på ”Text” istället för fliken ”Visuellt” som visas i den här skärmdumpen

Det här är koden jag har lagt till;

<h1 style="font-style: italic; color: green;">Heading For Demonstration Purposes</h1>

När sidan är renderad kommer den att se ut enligt följande;

Använd plugins

Om du inte är tekniskt kunnig eller inte älskar kodning kan du använda olika typsnittsplugins för att ändra typsnitten. Processen för att ändra teckensnitt kommer att variera från ett plugin till ett annat.

För att börja använda teckensnittsplugin, gå till din WordPress-instrumentpanel och välj ”Plugins” och sedan ”Lägg till nytt”.

Du kan nu använda funktionen ”sök plugin” för att välja din målplugin.

Dessa är några av de bästa du kan använda;

#1. Seed-teckensnitt

Seed-teckensnitt är ett typsnittsplugin som låter dig använda webbteckensnitt. Plattformen har fem färdiggenererade thai-engelska webbteckensnitt som du kan använda. Du kan också använda Google-teckensnitt eller ladda upp anpassade. Seed-teckensnitt är ett plugin med öppen källkod och är gratis att använda.

#2. Använd valfri typsnitt

Använd valfri typsnitt låter dig ladda upp alla anpassade typsnitt till din WordPress-webbplats även utan kunskap om CSS. Du har också möjlighet att välja från den 23 871+ fördefinierade teckensnittssamlingen. Det enda kravet är att dina teckensnitt ska vara i formaten ttf, otf eller woff.

Ladda upp dina typsnitt i ett format, och plugin kommer att autogenerera alla andra format den behöver. Use Any Font fungerar på alla moderna webbläsare och varierande skärmstorlekar.

#3. Plugin för typsnitt

Plugin för typsnitt är ett plugin som låter dig använda över 1455 unika typsnitt i Google Fonts-biblioteket. Plugin-programmet har en förhandsgranskningsfunktion som låter dig förhandsgranska hur typsnitten kommer att visas på din webbplats innan du tillämpar ändringarna.

Fonts Plugin fungerar med vilket WordPress-tema som helst, och du behöver inga kodningskunskaper för att börja använda det. Om du är insatt i CSS kan du skapa anpassade väljare och styra hur teckensnitt kommer att visas på din WordPress-webbplats.

#4. MW Font Changer

De plugins vi hittills har täckt fokuserar på att ändra hela webbplatsens typsnitt. Men du kanske söker en bättre upplevelse som webbplatsägare/designer. MW Font Changer låter dig ändra teckensnitt på din instrumentpanel och tema.

Det är ett lättanvänt plugin med 30+ teckensnitt. För att ändra teckensnitten på ditt tema anger du helt enkelt tema-id och klass. MW Font Changer har 10 000+ aktiva installationer och är kompatibel med WordPress 5.0 och högre. Denna plugin är programvara med öppen källkod.

Hur man optimerar teckensnitt på WordPress

En bra hemsida bör laddas snabbt. Du kanske har det snabbaste temat i WordPress-katalogen. Att lägga till mycket multimedia och typsnitt kan dock minska laddningshastigheten. Det enda sättet att undvika detta är genom att optimera dina teckensnitt. Dessa är några av de bästa tillvägagångssätten;

  • Ladda upp flera filtyper: Du kan spara dina teckensnitt i olika format. Du kan ladda upp olika format och webbläsaren väljer det bästa baserat på funktioner som användarens skärmstorlek och operativsystem.
  • Ladda bara upp de tecken du behöver: Om du har typsnitt som du inte kommer att använda i stor utsträckning på din webbplats, kan du bara ladda upp de tecken du behöver istället för hela biblioteket.
  • Värd dina typsnitt på CDN: Processen att ladda upp anpassade typsnitt kan öka storleken på din WordPress-webbplats. Content Delivery Networks (CDN) låter dig vara värd för typsnitten på en extern server och bara länka dem till din WordPress-webbplats.
  • Använd WordPress-cache: WordPress-cache lagrar data som ofta används av en användare och skickar den till en användare i framtiden när de besöker webbplatsen igen. Ett sådant tillvägagångssätt ökar lastningshastigheten.

Vanliga frågor

Hur kan jag välja rätt typsnitt för min WordPress-webbplats?

Det finns flera saker att tänka på. Till exempel måste du ta hänsyn till ditt varumärke, den övergripande designen och målgruppen.

Behöver du kunna kodning för att ändra teckensnitt i WordPress?

Nej. WordPress är designat för att vara lätt att använda för icke-tekniker. Du kan ändra teckensnitten från WordPress-instrumentpanelen utan att skriva en enda kodrad. Du kan också använda olika plugins för att implementera olika ändringar. Men om du kan CSS kan du lägga till anpassad CSS på din WordPress-webbplats för att ändra typsnitten.

Kan du ändra typsnitt i specifika delar av din WordPress-webbplats?

Ja. Du kan ändra teckensnitt i specifika områden som en sida eller till och med ett enda inlägg. Om du inte är van vid kodning kan du använda det visuella tillvägagångssättet. Å andra sidan kan du använda textmetoden om du vet hur man kodar.

Kan jag återgå till de ursprungliga typsnitten för WordPress-temat?

Ja. Om du ändrar typsnitten och känner att du behöver gå tillbaka till originalet kan du alltid ändra. Gå bara tillbaka till anpassaren på instrumentpanelen och återställ teckensnitten till standardinställningarna.

Slutsats

Du har nu flera metoder som du kan använda för att ändra teckensnitt på din WordPress-webbplats för att förbättra dess design. Valet av tillvägagångssätt beror på dina färdigheter och preferenser. Ibland kan du använda mer än en metod, beroende på vilken typ av webbplats du skapar.

Du kan också utforska hur CSS-synlighet förbättrar din webbdesign med dolda pärlor.