Så här lägger du till anpassade teckensnitt i WordPress

Vill du lägga till anpassade teckensnitt i WordPress? Anpassade teckensnitt kan hjälpa dig att fräscha upp ditt tema och sticka ut. I den här artikeln visar vi hur du lägger till anpassade teckensnitt i WordPress med hjälp av Google Fonts, TypeKit och CSS3 @ Font-Face-metod.

Använda anpassade teckensnitt i WordPress-teman har blivit en vanlig trend. Faktum är att det finns några teman som är fullt laddade med hundratals anpassade typsnitt. Men att ladda för många teckensnitt kan sakta ner din webbplats. Det är därför som vi ska visa dig hur du korrekt laddar anpassade teckensnitt, så det sätter inte ner din webbplats.

Men innan vi tittar på hur man lägger till anpassade teckensnitt i WordPress, låt oss ta en titt på att hitta anpassade teckensnitt.

Så här hittar du anpassade teckensnitt att använda i WordPress

Typsnitt brukade vara dyra, men inte mer. Det finns många ställen att hitta bra gratis webbfonter som Google Fonts, Typekit, FontSquirrel och fonts.com.

Om du inte vet hur du mixar och matchar teckensnitt, försök Font Pair. Det hjälper designers att kombinera vackra Google-teckensnitt tillsammans.

När du väljer dina teckensnitt, kom ihåg att med hjälp av för många anpassade teckensnitt kommer din webbplats att sakta ner. Det är därför du borde välja två teckensnitt och använda dem genom hela din design. Detta kommer också att ge konsekvens i din design.

Video Tutorial

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

Lägga till anpassade teckensnitt i WordPress från Google Fonts

Google Fonts är det största, fria och mest använda fontbiblioteket bland webbutvecklare. Det finns flera sätt att lägga till och använda Google-teckensnitt i WordPress.

Metod 1: Lägga till anpassade teckensnitt med hjälp av Easy Google Fonts Plugin

Om du vill lägga till och använda Google Fonts på din webbplats, är den här metoden överlägset enklaste och rekommenderas för nybörjare.

Det första du behöver göra är att installera och aktivera Easy Google Fonts-plugin. För mer information, se vår steg för steg guide om hur du installerar ett WordPress-plugin.

Vid aktivering kan du gå till Utseende »Customizer sida. Detta öppnar gränssnittet för levande tema anpassningsverktyg där du får se ny typografi avsnitt.

Genom att klicka på Typografi visas olika avsnitt på din webbplats där du kan använda Google Fonts. Klicka på "Redigera typsnitt" under den sektion du vill redigera.

Under avsnittet Fontfamilj kan du välja vilken Google-typsnitt du vill använda på din webbplats. Du kan också välja typsnitt, teckensnittstyp, vaddering, marginal och mer.

Beroende på ditt tema kan antalet sektioner vara begränsade och du kan inte direkt ändra teckensnitt för många olika områden på din webbplats.

För att åtgärda detta kan du även skapa egna kontroller och använda dem för att ändra teckensnitt på din webbplats.

Först måste du besöka Inställningar »Google-teckensnitt sida och ge ett namn för din typsnittskontroll. Använd något som hjälper dig att snabbt förstå var du ska använda denna typsnittskontroll.

Klicka på "Create font control" knappen och då kommer du att bli ombedd att skriva in CSS-väljare. Du kan lägga till HTML-element som du vill rikta in (till exempel h1, h2, p, blockquote) eller använda CSS-klasser. Du kan använda Inspect-verktyget för att ta reda på vilka CSS-klasser som används av det specifika område du vill ändra.

Klicka nu på knappen "Spara teckensnitt" för att spara dina inställningar. Du kan skapa så många typsnittskontroller som du behöver för olika delar av din webbplats.

För att använda dessa typsnittskontroller måste du gå över till Utseende »Customizer och klicka på fliken Typografi.

Under Typografi ser du nu också en "Tematypografi" -alternativ. Genom att klicka på den visas dina anpassade typsnittskontroller som du skapade tidigare. Du kan nu bara klicka på redigeringsknappen för att välja teckensnitt och utseende för denna kontroll.

Glöm inte att klicka på knappen Spara eller publicera för att spara dina ändringar.

Metod 2: Lägg till Google Fonts manuellt i WordPress

Den här metoden kräver att du lägger till kod i WordPress-temafilerna. Om du inte har gjort det tidigare, se vår guide om hur du kopierar och klistrar in kod i WordPress.

Först besökte du Google-teckensnittsbiblioteket och väljer ett typsnitt som du vill använda. Klicka sedan på snabbtangenten under teckensnittet.

Detta tar dig till en annan sida där du blir ombedd att välja de stilar du vill använda. Du bör bara välja stilar som du tror att du faktiskt kommer att använda.

Därefter bläddra ner lite tills du kommer till inbäddningssektionen. Du måste kopiera inbäddningskoden under standardfliken och klistra in den i temat eller barntemaets header.php-fil direkt efter taggen.

Det är allt du har lagt till ett anpassat Google-teckensnitt på din WordPress-webbplats.

Du kan använda den här teckensnittet i ditt temans stilblock så här:

 .h1 plats-titel font-family: 'Open Sans', Arial, sans-serif;  

För mer detaljerade instruktioner, se vår guide om hur du lägger till Google-teckensnitt i WordPress-teman.

Lägga till anpassade teckensnitt i WordPress med Typekit

Typekit är en annan fri och premium resurs för fantastiska typsnitt som du kan använda i dina designprojekt. De har ett betalt abonnemang samt en begränsad gratis abonnemangsplan som du kan använda.

Anmäl dig bara för ett Typekit-konto och skapa ett nytt kit.

Därefter måste du välja ett typsnitt från Typekit-biblioteket och lägga till det i ditt kit. Därefter få inbäddningskoden för din kit och gå vidare till ditt WordPress-sidans administrativa område.

Nu måste du installera och aktivera Typekit-teckensnittet för WordPress-plugin. Vid aktivering, besök helt enkelt Inställningar »Typekitfonter och klistra in inbäddningskoden på plugins inställningssida.

Det är allt, du kan nu använda Typekit-tecknet du valde i WordPress-tematets stilblock så här:

 h1 .site-title font-family: 'modesto-condensed', Arial, sans-serif;  

För mer detaljerade instruktioner kolla in vår handledning hur du lägger till fantastisk typografi i WordPress med Typekit.

Lägga till anpassade teckensnitt i WordPress Använda CSS3 @ font-face

Det mest direkta sättet att lägga till anpassade teckensnitt i WordPress är att lägga till teckensnitt med CSS3 @ Font-face metod. Med den här metoden kan du använda vilken typsnitt som helst på din webbplats.

Det första du behöver göra är att hämta det teckensnitt som du vill ha i ett webbformat. Om du inte har webbformatet för din typsnitt kan du konvertera det med FontSquirrel Webfont-generatorn.

När du har webfontfilerna behöver du ladda upp den på din webbhotellsserver.

Det bästa stället att ladda upp teckensnitten är inuti en ny "fonts" -mapp i ditt temat eller barntema-katalog.

Du kan använda FTP eller Filhanteraren i din cPanel för att ladda upp teckensnittet.

När du har laddat upp teckensnittet måste du ladda teckensnittet i temat stilark med hjälp av CSS3 @ font-face-regeln så här:

 @ font-face font-family: Arvo; src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); typsnitt: normal;  

Glöm inte att ersätta fontfamiljen och webbadressen med din egen.

Därefter kan du använda den typsnittet var som helst i ditt temans stilblock så här:

 .h1 plats-titel font-family: "Arvo", Arial, sans-serif;  

Att ladda typsnitt direkt med CSS3 @ font-face är inte alltid den bästa lösningen. Om du använder ett teckensnitt från Google Fonts eller Typekit, är det bäst att servera teckensnittet direkt från servern för optimal prestanda.

Det är allt, vi hoppas att den här artikeln hjälpte dig att lägga till anpassade teckensnitt i WordPress. Du kanske också vill checka ut vår guide om hur du använder ikonfonter i WordPress och hur du ändrar teckenstorleken i WordPress.

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.