Site Overlay

Hur du lägger till anpassade typsnitt i WordPress

Om du vill att din webbplats verkligen ska sticka ut från mängden kan du använda anpassade typsnitt för att uppnå detta. Det finns tusentals vackra anpassade typsnitt att välja mellan, och genom att välja rätt typsnitt för ditt projekt kan du skapa en webbplats som inte bara är unik utan som också återspeglar din stil och ditt varumärke. Så hur lägger du till anpassade typsnitt i WordPress?

I den här artikeln tar vi upp allt du behöver veta om hur du tillämpar anpassade typsnitt på din webbplats. Detta inkluderar:

  • Hur du hittar anpassade typsnitt
  • Hur du lägger till Google Fonts på din webbplats med hjälp av insticksprogrammet Easy Google Fonts
  • Lägga till Google Fonts på din webbplats manuellt (inget insticksprogram krävs)
  • Lägga till Adobe Fonts i WordPress
  • Hur du lägger till alla anpassade typsnitt i ditt webbutrymme

Redo att komma igång?

Var kan du hitta anpassade typsnitt?

Google Fonts

Google Fonts

Nuförtiden levereras många premium WordPress-teman med en uppsjö av anpassade typsnitt. Dessa kan dock ofta öka temat bloat och påverka webbplatsens laddningstider mer än du tror. Du kommer också att upptäcka att du faktiskt bara använder högst ett par anpassade typsnitt, så majoriteten av de typsnitt som ditt tema tillhandahåller kommer aldrig att behövas.

Därför rekommenderar vi att du väljer ett lättviktigt WordPress-tema, som du sedan kan lägga till anpassade typsnitt till när det behövs. Det finns ett antal ställen där du kan hitta rätt anpassade typsnitt för din webbplats. Låt oss ta en titt…

  • Google Fonts – Det mest populära valet, Google Fonts, erbjuder en gratis katalog med över 900 designertypsnitt med öppen källkod som kan användas på över 135 språk. Dessa typsnitt kan snabbt bläddras igenom och sedan sömlöst integreras i alla webbdesignprojekt.
  • Adobe Fonts (tidigare känt som Typekit) – Även om Typekit erbjöd både gratis- och premiumversioner av sin tjänst, som nu har bytt namn till Adobe Fonts, måste du registrera dig för det betalda Adobe Creative Cloud-paketet för att få tillgång till den här resursen. Det finns tusentals teckensnitt att välja mellan, alla teckensnitt är licensierade för personligt och kommersiellt bruk, och du kan också välja mellan teckensnittspaket med projekttema, vilket är perfekt för dem som saknar öga för design.
  • Font Squirrel – I Font Squirrel-biblioteket hittar du en blandning av kostnadsfria teckensnitt och premiumteckensnitt, varav de senare kan köpas som engångsköp. Återigen kan du välja mellan tusentals högkvalitativa typsnitt, varav majoriteten är gratis och kommersiellt licensierade.

  • Fonts.com – Fonts.com tillhandahåller över 150 000 typsnittsprodukter för skrivbord och webb, och innehåller en imponerande samling av premiumanpassade typsnitt. Du hittar också ett antal intressanta artiklar på Font.coms blogg, där du får ta del av typografiska tips och tekniker.
  • FontPair – FontPair erbjuder en något annorlunda upplevelse jämfört med de andra resurserna och kopplar ihop typsnitt från Google Fonts, vilket hjälper dig att hitta rätt kombinationer av typsnitt för din webbplats.

Så, nu vet du var du kan hitta anpassade typsnitt. Låt oss nu titta på hur du lägger till Google Fonts på din WordPress-webbplats.

Hur du lägger till Google Fonts i WordPress med hjälp av pluginet Easy Google Fonts

Easy Google Fonts

Easy Google Fonts

Då Google Fonts är den populäraste resursen för anpassade typsnitt, kommer vi att börja med att titta på hur du lägger till ett typsnitt från det här biblioteket på din webbplats. Det finns ett antal sätt att göra detta, men det snabbaste och enklaste alternativet är att använda WordPress-pluginet Easy Google Fonts.

Easy Google Fonts är ett gratis WordPress-plugin som gör det möjligt för dig att infoga anpassade typsnitt på din WordPress-webbplats, utan att du behöver röra en rad kod. Genom att integrera med WordPress customizer kan du med detta plugin infoga och använda Google-teckensnitt på framsidan av din webbplats i realtid, utan att behöva uppdatera sidan.

Så låt oss nu ta reda på hur du installerar och använder detta plugin.

Steg 1: Installera Easy Google Fonts

För att komma igång med Easy Google Fonts öppnar du din WordPress-instrumentpanel och väljer Plugins > Add New från menyn.

Därefter skriver du Easy Google Fonts i sökfunktionen och när insticksprogrammet har hittats klickar du på Installera > Aktivera.

Aktivera insticksprogrammet

Aktivera insticksprogrammet

Du hittar nu Easy Google Fonts under Inställningar i din WordPress-meny.

Steg 2: Redigera typsnitt i WordPress Customizer

När du har installerat Easy Google Fonts väljer du Appearance > Customize i WordPress-menyn. Din webbplats öppnas nu på framsidan, där du ser att ett avsnitt Typografi har lagts till i anpassaren.

Anpassare Typografi

Anpassare Typografi

Klicka på Typografi. Du kan sedan välja de olika områden på din webbplats där du vill använda en anpassad Google Font (t.ex. stycke, Header 2, Header 3 osv.).

Default Typography

Default Typography

Under den sektion du vill redigera klickar du på Edit Font. Du kan sedan välja det typsnitt du vill använda – du kommer att kunna förhandsgranska hur varje typsnitt ser ut direkt på din webbplats.

Redigera typsnitt

Redigera typsnitt

Du kan inte bara ändra typsnittstypen, utan du kan också ändra färg, storlek, positionering och mycket mer. När du är nöjd med ditt nya typsnitt klickar du på Publicera.

Steg 3: Skapa anpassade typsnittskontroller

Med Google Fonts standardkontroller kan du ändra typsnittet för styckeavsnitt och rubriker 1-6. Det är dock inte alla element i ditt tema som kan hanteras av standardtypsinställningarna.

Om du vill ändra ett annat element i ditt tema (annat än ett stycke eller en rubrik) måste du skapa egna anpassade typsnittsinställningar. Även om Easy Font Control gör att du enkelt kan göra detta behöver du ändå en grundläggande förståelse för CSS-selektorer.

För att lägga till anpassade typsnittskontroller väljer du Inställningar > Google Fonts från din WordPress-instrumentpanel. På fliken Redigera typsnittskontroller ger du sedan din nya typsnittskontrollgrupp ett lämpligt namn och väljer sedan Skapa typsnittskontroll. Här kommer vi att skapa en typsnittsstyrning för blockquotes…

Blockquote

Blockquote

Under Lägg till CSS-selektorer lägger du till CSS-selektorn för det element som du vill hantera. Du kan lägga till mer än ett element om du vill. Välj sedan Spara teckenkontroll.

Redigera teckenkontroller

Redigera teckenkontroller

Tillbaka i anpassningsverktyget på framsidan av din webbplats, under Typografi, hittar du nu alternativet Tema typografi, där du kan komma åt dina nya anpassade kontroller.

Tema Typografi

Tema Typografi

Du kan nu välja ett nytt anpassat typsnitt för det specifika anpassade elementet och ändra alla andra inställningar för utseende och positionering.

Blockquotes

Blockquotes

Easy Custom Fonts är ett bra alternativ för alla som vill lägga till anpassade typsnitt till WordPress från Google. Men om du föredrar det kan du också manuellt lägga till Google Fonts på din webbplats med bara kod, utan plugin. Låt oss ta reda på hur du gör detta…

Hur man manuellt lägger till Google Fonts till WordPress (inget plugin krävs)

Om du hellre lägger till Google Fonts till WordPress manuellt behöver du en mycket grundläggande kunskap om kodning.

Steg 1: Välj en Google Font

För att komma igång öppnar du Google Fonts och väljer den anpassade typsnittstyp som du vill lägga till på din webbplats.

På typsnittets sida klickar du sedan på Välj den här typsnittet. Här har vi valt teckensnittet Indie Flower.

Indie Flower

Indie Flower

Ett popup-fönster visas nu på din skärm. Beroende på vilket typsnitt du har valt kommer du att kunna få tillgång till ett urval av anpassningsalternativ för typsnittsvikter och stilar, samt visa information om inbäddning.

Indie Flower Embed Info

Indie Flower Embed Info

Steg 2: Bädda in koden för det anpassade typsnittet på din WordPress-webbplats

Nästan måste du kopiera Embed-koden (se popupen ovan) och klistra in den i avsnittet <head> i ditt WordPress-tema. Det enklaste sättet att göra detta är att installera det kostnadsfria WordPress-pluginet Insert Headers and Footers. Med det här insticksprogrammet kan du snabbt lägga till kod på din webbplats utan att behöva redigera dina temafiler.

När du har installerat insticksprogrammet öppnar du inställningarna för insticksprogrammet genom att välja Settings > Insert Header and Footers (Inställningar > Infoga rubriker och fötter) från din WordPress-instrumentpanel. Du måste sedan lägga till din Google Fonts inbäddningskod i avsnittet Header.

Insert Headers Footers plugin

Insert Headers Footers plugin

Och om du hellre vill kan du redigera rubriken.php-filen i ditt barntema.

Steg 3: Tillämpa det nya teckensnittet med hjälp av CSS

När du har lagt till HTML-koden för ditt anpassade teckensnitt på din webbplats kan du nu använda CSS för att tillämpa ditt nya anpassade teckensnitt. I popup-fönstret Google Fonts hittar du de CSS-regler som är specifika för ditt nya typsnitt.

Indie Flower CSS

Indie Flower CSS

I anpassningsverktyget på webbsidans live-sida väljer du Ytterligare CSS. Här kan du ange CSS-kod för att anpassa typsnitten på din webbplats. Nedan kan du se att vi har tillämpat CSS-koden Indie Flower på rubrik 2 och styckeavsnitten…

Tillkommande CSS

Tillkommande CSS

Anpassningsverktyget visar teckensnittsändringarna i realtid, och om du är nöjd med resultatet klickar du på Publicera.

Hur du lägger till Adobe-teckensnitt i WordPress

Om du har tecknat dig för Adobes premiumpaket Creative Cloud kan du lägga till alla dess anpassade teckensnitt på din WordPress-webbplats. Den här processen är mycket lik den för att manuellt lägga till Google Fonts på din webbplats. Låt oss ta en snabb titt.

Steg 1: Välj ett Adobe-teckensnitt

Först måste du bläddra i Adobes omfattande teckensnittsbibliotek och välja ett eller flera teckensnitt som passar till ditt projekt. När du har gjort ett val klickar du på ikonen </> för att lägga till teckensnittet i ett nytt webbprojekt.

Välj och Adobe-teckensnitt

Välj och Adobe-teckensnitt

Du kommer nu att bli ombedd att namnge ditt webbprojekt samt att använda kryssrutorna för att välja de teckensnittsvikter och stilar som du vill inkludera. Välj sedan Create Project.

Steg 2: Bädda in Adobe-teckensnittets kod i din WordPress-webbplats

Nästa steg är att bädda in koden som Adobe tillhandahåller för det valda teckensnittet i din WordPress-webbplats.

Detta följer exakt samma process som att bädda in koden för Google Fonts. Det är bara att bädda in koden i taggen <head> på din webbplats eller använda WordPress-pluginet Insert Headers and Footers (som tidigare diskuterats).

Steg 3: Tillämpa det nya typsnittet med hjälp av CSS

Nu kan du, precis som med Google Fonts, tillämpa ditt nya anpassade typsnitt från Adobe med hjälp av CSS-regler. På din Adobe-instrumentpanel listar din sida för webbprojekt CSS-teckensnittsfamiljenamnet samt teckensnittsstil och numerisk vikt för varje teckensnittstyp du valt.

Adobe Font CSS font-family

Adobe Font CSS font-family

Tillbaka på din WordPress-webbplats kan de här CSS-reglerna användas i anpassningsverktyget under Additional CSS (ytterligare CSS).

Så nu har vi behandlat hur du lägger till anpassade typsnitt i WordPress med hjälp av de mycket populära gratis Google Fonts samt den imponerande premiumresursen Adobe Fonts.

Det sista alternativet som vi kommer att diskutera gör det möjligt för dig att lägga till ett anpassat typsnitt på din webbplats genom att ladda upp det till servern på din webbplats. Låt oss ta reda på mer.

Hur du lägger till ett anpassat typsnitt i ditt webbutrymme

Att lägga till ett anpassat typsnitt i ditt webbutrymme är relativt okomplicerat, men återigen behöver du en grundläggande förståelse för CSS för att kunna applicera typsnittet på din webbplats.

Steg 1: Ladda ner ett anpassat typsnitt

Som vi nämnde i början av den här artikeln finns det ett stort antal resurser där du kan välja kostnadsfria eller premiumanpassade typsnitt att använda på din webbplats. När du väljer ett anpassat typsnitt att lägga till på din server ska du bara se till att du har rätt att använda det och att det är nedladdningsbart.

Här har vi laddat ner det kostnadsfria anpassade typsnittet Milkshake från Squirrel Fonts.

Milkshake

Milkshake

Det är viktigt att du laddar ner det anpassade typsnittet i ett webbtypsnittsformat. Webfont-containerformatet WOFF har mest stöd för olika webbläsare, men Google rekommenderar att du levererar flera format för att ge användarna en enhetlig upplevelse på olika enheter.

Om du behöver konvertera ditt anpassade typsnitt till ett annat format tillhandahåller Squirrel Font ett kostnadsfritt verktyg för webbtypsnittsgenerator som gör det möjligt för dig att göra det.

Steg 2: Ladda upp det anpassade typsnittet till din server

Nästan är det dags att ladda upp ditt anpassade typsnitt till din server. För att göra detta öppnar du filhanteraren i din webbplats cPanel.

I din mapp med aktiva teman skapar du en ny mapp som heter Fonts och laddar upp ditt anpassade typsnitt här.

Uppladdning av typsnitt

Uppladdning av typsnitt

Om du har flera olika format av ditt typsnitt laddar du upp dem alla till mappen Fonts. Ditt anpassade typsnitt har nu lagts till på ditt webbutrymme.

Steg 3: Använd CSS för att tillämpa det anpassade typsnittet på din webbplats

Du måste nu tillämpa det anpassade typsnittet på din webbplats. Till att börja med måste du ladda teckensnittet i ditt temas formatmall. För att göra det öppnar du WordPress Customizer och lägger till den här koden under Additional CSS:

@font-face { font-family: Milkshake; src: url("https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff") format("woff");}

Viktigt är att du ändrar teckensnittsnamnet och URL:n (kopiera URL:n för teckensnittsfilen på din server).

Du kan sedan använda CSS-regler för att uppdatera teckensnitten på din webbplats. Här är ett exempel på hur du tillämpar det anpassade typsnittet på rubrik 3 och styckeavsnitt:

Milkshake CSS

Milkshake CSS

När du är nöjd med hur det nya anpassade typsnittet ser ut på din webbplats klickar du på Publicera.

Sluttliga tankar om hur du lägger till anpassade typsnitt i WordPress

Som du kan se finns det, om du letar efter ett vackert och uppmärksammat anpassat typsnitt, många resurser som gör det möjligt för dig att hitta det perfekta typsnittet för ditt projekt. Och dessutom är du nu beväpnad med kunskapen om hur du framgångsrikt lägger till anpassade typsnitt i WordPress. Så vilka anpassade typsnitt kommer du att välja?

Har du några frågor om hur du lägger till anpassade typsnitt i WordPress? Fråga gärna i kommentarerna nedan…

GRATISK KURS

Spänn upp! 5 steg för att snabba upp din WordPress-webbplats

Få din webbplats att gå 30-40 %
snabbare med några enkla tekniker

Gå med i gratiskursenrocket

Lämna ett svar

Din e-postadress kommer inte publiceras.