Hur man lägger till fantastisk typografi i WordPress med Typekit

Har du någonsin undrat hur designers kan använda vackra anpassade webbtypsnitt på sina webbplatser? Ofta lägger de till anpassade typsnitt i WordPress med hjälp av Typekit, en Adobe-tjänst som ger dig tillgång till högkvalitativa typsnitt. I den här artikeln visar vi dig hur du lägger till Typekit-typsnitt i WordPress för att förbättra din typografi.

Varför använda Typekit-typsnitt?

Typekit är en populär prenumerationsbaserad typsnittstjänst som kan spara dig mycket pengar. Istället för att betala för enskilda typsnittslisenser, vilket kan bli ganska dyrt, kan du få tillgång till hela deras bibliotek med hundratals typsnitt gratis eller till en fast årlig avgift.

Typekit-biblioteket är en massiv samling av över 1 000 typsnitt. Några av de vackraste typsnitten som du kan hitta på webben finns tillgängliga via Typekit, en Adobe-tjänst.

Deras grundläggande gratisplan ger tillgång till över 230 typsnitt, och du kan använda 2 typsnittsfamiljer på en webbplats gratis. Andra planer börjar från 49,99 USD till 99,99 USD per år.

Dessa fantastiska Typekit-typsnitt kan enkelt läggas till på vilken webbplats som helst utan att sakta ner laddningstiderna för dina sidor. Typsnitten serveras från Adobes CDN och laddas mycket snabbare än om du skulle hosta dem på din egen webbplats.

Typekit för WordPress videoguide

Om du inte gillar videon eller behöver mer instruktioner kan du fortsätta läsa nedan.

Varför använda anpassade webbtypsnitt på WordPress?

Typografi spelar en avgörande roll i designen av din webbplats.

Att välja rätt typsnitt kommer att tydligt kommunicera din personlighet och ditt budskap till dina läsare. Oavsett vilken typ av image du vill förmedla – professionell, vänlig, avslappnad, erfaren – kan typsnitten på din webbplats hjälpa till att projicera rätt image.

Genom att använda rätt teckensnitt kan du lämna ett bestående intryck. Istället för att se ut som alla andra webbplatser på nätet, ser din text märkbart annorlunda ut. Att välja rätt teckensnitt för din WordPress-webbplats kan förvandla din webbplats från en enkel design till ett estetiskt tilltalande och fantastiskt konstverk.

Rätt anpassade webbteckensnitt kan:

• öka konverteringsgraden
• sänka din webbplats avvisningsfrekvens
• öka tiden som spenderas på din webbplats
• skapa en minnesvärd upplevelse för användarna

Redo att komma igång med Typekit-teckensnitt? Här är hur du använder Typekit för att anpassa din WordPress-design.

Komma igång med Typekit

Först måste du skapa ett Typekit-konto. För att göra detta, besök bara Typekit.com för att jämföra tillgängliga planer.

Du måste välja vilken plan du vill registrera dig för. Gratisplanen begränsar dig till en webbplats och inkluderar tillgång till begränsade teckensnitt. Du kanske vill börja med gratisplanen för att prova den och sedan uppgradera senare. Uppgraderingen ger dig ett större bibliotek med teckensnitt, och du kan använda dem på fler webbplatser.

Nästa steg är att skapa en "kit". "Kit" låter dig sätta ihop ett specifikt bibliotek med teckensnitt och inställningar för din webbplats, så att Typekit bara laddar de filer och den kod som behövs. För att skapa ditt "kit", lägg till ditt webbplatsnamn och domännamn och klicka sedan på Fortsätt.

När du är klar med att fylla i din information för ditt "kit", kommer Typekit att ge dig lite JavaScript-kod att lägga till på din webbplats. Du kan kopiera och klistra in denna kod i en textredigerare som Anteckningar för att spara den tills vidare. Vi kommer att lägga till den på din webbplats i nästa steg av denna handledning.

För nu kan du börja välja dina teckensnitt. Du kan bläddra i teckensnittsbiblioteket och filtrera efter alternativ som klassificering, tjocklek, bredd, x-höjd och mer.

När du ser ett teckensnitt du gillar kan du klicka på det för mer information och exempel. Om du vill lägga till det i ditt webb-kit, klicka på knappen Webbanvändning: Lägg till i Kit på höger sida.

Detta kommer att öppna ett popup-fönster där du behöver lägga till det valda typsnittet i den mall du precis skapade.

Nu kan du klicka på knappen Publicera för att spara ändringarna i din mall.

Det var allt! Din typsnittsmall är nu redo att användas.

Lägga till dina Typekit-teckensnitt i WordPress

Det enklaste sättet att lägga till dina nya anpassade webbteckensnitt i din WordPress-blogg är att använda ett WordPress Typekit-plugin.

Vi rekommenderar pluginet Typekit Fonts for WordPress. Efter att ha installerat och aktiverat pluginet kan du besöka Inställningar » Typekit-teckensnitt för att konfigurera pluginet.

Först måste du klistra in JavaScript-koden som du sparade tidigare i fältet för Typekit-inbäddningskod. Därefter kan du lägga till CSS-selektorer för att ange var du vill använda teckensnittet på din webbplats.

I skärmdumpen ovan lade vi till teckensnittet till CSS-selektorn h1.site-title.

Ditt WordPress-tema kan använda olika klasser för olika element. Du måste använda verktyget Inspektera element i din webbläsare för att ta reda på dessa CSS-klasser. Du kanske också vill titta på vårt CSS-fuskblad genererat av WordPress för nybörjare för att hjälpa dig komma igång.

Det var allt! Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till fantastisk typografi i WordPress med Typekit. Du kanske också vill titta på vår guide om hur du lägger till Google-webbteckensnitt i dina WordPress-teman.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videohandledningar. Du kan också hitta oss på Twitter och Facebook.