Vill du lägga till ett speciellt WordPress-teckensnitt? Med anpassade teckensnitt kan du använda en blandning av olika teckensnitt på din webbplats för att förbättra typografi och användarupplevelse.
Anpassade teckensnitt ser inte bara bra ut, utan kan också öka läsbarheten, skapa varumärkesimage och öka den tid användarna spenderar på din webbplats.
I den här artikeln kommer vi att visa dig hur du lägger till speciella teckensnitt i WordPress med Googles teckensnittmetod, TypeKit och CSS3 @ Font-Face.
notera: Att ladda för många teckensnitt kan bromsa din webbplats. Vi rekommenderar att du väljer två teckensnitt och använder dem på din webbplats. Vi visar också hur du laddar den ordentligt utan att bromsa din webbplats.
Innan vi tittar på hur du lägger till speciella teckensnitt i WordPress, låt oss titta på specialteckensnitt som du kan använda.
Hur man hittar speciella WordPress-teckensnitt
Tidigare brunnar var dyra, men inte längre. Det finns många platser där du kan hitta fantastiska gratis webbteckensnitt som Google-typsnitt, Typekit, FontSquirrel och fonts.com.
Om du inte vet hur du blandar och matchar teckensnitt kan du pröva teckensnittsparning. Hjälp designern att kombinera vackra Google-teckensnitt.
När du väljer ditt teckensnitt, kom ihåg att använda för många specialteckensnitt kommer att bromsa din webbplats. Av denna anledning väljer du två teckensnitt och använder dem genom hela designen. Detta lägger också till konsistens i din design.
Instruktionsvideo
Prenumerera på WPBeginner
Om du inte gillar videon eller föredrar skriftliga instruktioner, läs vidare.
Lägg till ett speciellt WordPress-teckensnitt från Googles teckensnitt
Google-teckensnitt är det största, gratis och mest använda teckensnittsbiblioteket bland webbplatsutvecklare. Det finns flera sätt att lägga till och använda Google-teckensnitt i WordPress.
Metod 1: Lägg till anpassade teckensnitt med plugin-programmet Google Easy Fonts
För att lägga till och använda Google-teckensnitt på din webbplats är den här metoden överlägset den enklaste och rekommenderas för nybörjare.
Installera och aktivera insticksprogrammet Easy Google Fonts först. Mer information finns i vår steg-för-steg-guide för installation av WordPress-plugin.
Efter aktivering kan du lämna Utseende »Customizers Denna sida öppnar användargränssnittet för att anpassa temat, där du kan se det nya avsnittet Style.
När du klickar på en stil ser du olika områden på din webbplats där du kan använda Google-teckensnitt. Klicka bara på “Redigera källa” i det avsnitt du vill redigera.
I avsnittet Teckensnittfamilj kan du välja vilka Google-teckensnitt du vill använda på din webbplats. Du kan också välja teckensnitt, teckenstorlekar, innehåll, marginaler och så vidare.
Beroende på ditt tema kan antalet avsnitt här vara begränsat och du kanske inte kan ändra teckensnittsvalet för olika områden på din webbplats.
För att fixa detta kan du också använda plugins för att skapa dina egna kontroller och använda dem för att ändra teckensnitt på din webbplats.
Första besök Inställningar »Google Font Sida och ange ett namn för din fontkontroll. Använd något för att snabbt förstå var du vill använda den här källkontrollen.
Klicka sedan på knappen “Make Font Verification” så blir du ombedd att gå in i CSS-väljaren.
Du kan lägga till HTML-element som du vill rikta in dig (t.ex. H1, h2, p, blockquote) eller använda CSS-klasser.
Du kan använda inspekteringsverktyget i din webbläsare för att ta reda på vilka CSS grupperar specifika områden du vill ändra.
Klicka nu på “Spara källkodverifiering” -knappen för att spara dina inställningar. Du kan skapa så många fontkontroller som du behöver för olika områden på din webbplats.
Om du vill använda den här typsnittsdrivrutinen måste du gå Utseende »Customizers och klicka på fliken Stil.
Under Typografi ser du nu också alternativet “Tematisk typografi”. När du klickar på det visas det specialteckensnitt som du skapade ovan. Du kan nu klicka på knappen Redigera för att välja typsnitt och utseende på denna kontroll.
Glöm inte att klicka på knappen Spara eller publicera för att spara dina ändringar.
Metod 2: Lägg till Google Font manuellt till WordPress manuellt
Den här metoden kräver att du lägger till kod i din WordPress-temafil. Om du inte redan har gjort det, se vår guide för kopiering och klistra in kod i WordPress.
Besök först Googles teckensnittsbibliotek och välj det teckensnitt du vill använda. Klicka sedan på knappen för snabb användning under teckensnittet.
På sidan Teckensnitt listas de tillgängliga stilarna för detta teckensnitt. Välj den stil du vill använda i ditt projekt och klicka sedan på sidofältets knapp längst upp.
Öppna sedan fliken Bädda in i sidofältet för att kopiera den inbäddade koden.
Det finns två sätt att lägga till den här koden på din WordPress-webbplats.
Först kan du helt enkelt redigera filen header.php i ditt tema och klistra in koden först
Dag
Men om du inte är bekant med redigeringskod i WordPress kan du lägga till den här koden med ett plugin.
Installera och aktivera bara pluginet “Infoga sidhuvud och sidfot”. Mer information finns i vår steg-för-steg-guide för installation av WordPress-plugin.
Efter aktivering, gå till Inställningar »Ange sidhuvud och sidfot Sida och klistra in inbäddningskoden i fältet “Skript i rubrik”.
Glöm inte att klicka på Spara-knappen för att spara dina ändringar. Plugin laddar nu Google Font-inbäddningskoden på varje sida på din webbplats.
Du kan använda det här teckensnittet i tematyparket enligt följande:
.h1 site-title {
font-family: 'Open Sans', Arial, sans-serif;
}
För mer detaljerade instruktioner, se vår guide för att lägga till Google-teckensnitt till WordPress-teman.
Lägg till speciella WordPress-teckensnitt med Typekit
Adobe Fonts Typekit är en annan gratis och premiumresurs för fantastiska teckensnitt som du kan använda i dina designprojekt. Du har ett betalt prenumeration och ett begränsat gratispaket som du kan använda.
Registrera bara för ett Adobe Font-konto och öppna avsnittet Typsnitt. Härifrån klickar du på knappen för att välja en källa och skapa ett projekt.
Därefter ser du en inbäddningskod med ditt projekt-ID. Du kommer också att lära dig hur du använder CSS-teckensnitt för ditt tema.
Du måste kopiera och klistra in den här koden i
En del av din webbplats.
Det finns två sätt att lägga till den här koden på din WordPress-webbplats.
Först kan du helt enkelt redigera filen header.php i ditt tema och klistra in koden först
Dag
Men om du inte är bekant med redigeringskod i WordPress kan du lägga till den här koden med ett plugin.
Installera och aktivera bara pluginet “Infoga sidhuvud och sidfot”.
Efter aktivering, gå till Inställningar »Ange sidhuvud och sidfot Sida och klistra in inbäddningskoden i fältet “Skript i rubrik”.
Du kan nu använda Typekit-teckensnittet som du valde i ditt WordPress-layoutmall på följande sätt:
h1 .site-title {
font-family: gilbert, sans-serif;
}
För mer detaljerade instruktioner, se vår handledning om hur du lägger till fantastiska WordPress-teckensnitt med Typekit.
Lägg till anpassade WordPress-teckensnitt med CSS3 @ font-face
Det mest direkta sättet att lägga till speciella teckensnitt i WordPress är att lägga till teckensnitt med CSS3 @ font-face-metoden. Med denna metod kan du använda det typsnitt du vill ha på din webbplats.
Ladda ner först önskat teckensnitt i webbformat. Om du inte har ett webbformat för dina teckensnitt, kan du konvertera det med FontSquirrel-webbtypsgeneratorn.
När du har webbtypfilen kan du ladda upp den till din WordPress-värdserver.
Det bästa stället att ladda typsnitt är i den nya teckensnittsmappen i ditt tema eller det sekundära biblioteket.
Du kan använda FTP eller filhantering från din cPanel för att ladda teckensnitt.
När du har laddat teckensnittet laddar du det i formatmallen för ditt tema med hjälp av följande CSS3-teckensnittregler:
@font-face {
font-family: Arvo;
src: url(https://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
Glöm inte att byta ut teckensnittsfamiljen och URL: en med din.
Sedan kan du använda det här teckensnittet var som helst i tematyparket enligt följande:
.h1 site-title {
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 Google-teckensnitt eller Typekit-teckensnitt är det bättre att ange teckensnitt direkt från din server för bästa prestanda.
Vi hoppas att den här artikeln har hjälpt dig att lägga till speciella WordPress-teckensnitt. Du kan också läsa vår guide om hur du använder symbolteckensnitt på WordPress och ändra teckenstorlekar på WordPress.
Om du gillar den här artikeln kan du prenumerera på vår YouTube-kanal för att titta på WordPress-videotutorials. Du kan också hitta oss på Twitter och Facebook.
