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

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

Varför använd Typekit-teckensnitt?

Typekit är en populär prenumerationsbaserad typsnittstjänst som kan spara dig mycket pengar. I stället för att betala för individuella typsnittslicenser, som kan bli ganska dyra, kan du få tillgång till hela sitt bibliotek med hundratals typsnitt gratis eller för en platt årlig kurs.

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

Deras grundläggande fri plan kommer med tillgång till 230+ teckensnitt, och du kan gratis använda 2 fontfamiljer på en webbplats. Andra planer börjar från $ 49,99 till $ 99,99 per år.

Dessa fantastiska Typekit-teckensnitt kan enkelt läggas till på någon webbplats utan att sakta ner sidhastigheten. Teckensnittet serveras från Adobes CDN och laddas med mycket snabbare hastigheter än om du skulle vara värd för dem på din egen webbplats.

Typekit för WordPress Video Tutorial

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

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

Typografi spelar en avgörande roll vid utformningen av din webbplats.

Att välja rätt typsnitt kommer tydligt att kommunicera din personlighet och meddelande till dina läsare. Oavsett vilken typ av bild du vill skildra - professionell, vänlig, avslappnad, erfaren - teckensnitt på din webbplats kan hjälpa till att hitta rätt bild.

Genom att använda rätt uppsättning teckensnitt kan du lämna ett varaktigt intryck. Istället för att se ut som alla andra webbplatser på webben ser din text märkbart annorlunda ut. Om du väljer rätt typsnitt för din WordPress-webbplats kan din webbplats gå från en enkel design till ett estetiskt tilltalande och fantastiskt konstverk.

Rätt anpassade webbfonter kan:

• öka konverteringsfrekvensen
• sänka webbplatsens avvisningsfrekvens
• Öka tiden som spenderas på din webbplats
• skapa en minnesvärd upplevelse för användare

Klar för att komma igång med Typekit-teckensnitt? Så här använder du Typekit för att anpassa din WordPress-design.

Så här börjar du 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 de tillgängliga planerna.

Du måste välja vilken plan du vill anmäla dig till. Den fria planen begränsar dig till en webbplats och inkluderar tillgång till begränsade teckensnitt. Du kanske vill komma igång med den kostnadsfria planen 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å flera webbplatser.

Nästa steg är att skapa ett kit. Satsen gör att du kan sätta ihop ett specifikt bibliotek med typsnitt och inställningar för din webbplats, så Typekit laddar bara de filer och kod som behövs. För att skapa ditt kit, lägg till ditt webbplatsnamn och domännamn och klicka sedan på Fortsätta.

När du är färdig att fylla i din information för ditt kit, ger Typekit dig lite JavaScript-kod för att lägga till på din webbplats. Du kan kopiera och klistra in den här koden i en textredigerare som Anteckningsblock för att spara den för nu. Vi lägger till den på din webbplats i nästa steg i denna handledning.

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

När du ser en typsnitt du gillar kan du klicka på den för mer information och exempel. Om du vill lägga till det i ditt webbsats, klicka på Webb Använd: Lägg till i Kit knapp på höger sida.

Detta kommer att ge upp en popup där du måste lägga till det teckensnitt du valde till det kit du just skapat.

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

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

Lägga till dina typekitfonter i WordPress

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

Vi rekommenderar Typekit-teckensnitt för WordPress-plugin. Efter installationen och aktiveringen av plugin kan du besöka Inställningar "Typekit-teckensnitt för att konfigurera plugin.

Först måste du klistra in JavaScript-koden som du sparade tidigare i fältet Typekit inbädda kod. 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 tecknet till h1.site rubriken CSS-väljare.

Ditt WordPress-tema kan använda olika klasser för olika element. Du måste använda verktyget Inspect Element i din webbläsare för att ta reda på de CSS-klasserna. Du kanske också vill checka ut vårt WordPress-genererade CSS-fuskblad för nybörjare för att hjälpa dig att komma igång.

Det är allt! Vi hoppas att den här artikeln hjälper 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-webbfonter i dina WordPress-teman.

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