K. Andersson
Som WordPress-webbplatsägare har du förmodligen stött på ett antal teman som du var tveksam till att använda på grund av deras inbyggda teckensnittsalternativ.
Google Fonts erbjuder en stor samling webbteckensnitt med öppen källkod som är designade för att gör webben vackrare, snabbare och öppnare genom fantastisk typografi. Och om du letar efter ett enkelt sätt att ge ditt innehåll lite personlighet samtidigt som du bibehåller läsbarheten så är det ett bra sätt att integrera Google Fonts på din webbplats.
Med detta i åtanke kommer vi i det här inlägget att visa dig hur du kan börja använda Google Fonts i WordPress genom att använda en plugin-lösning och genom att manuellt lägga till kod. Men innan vi börjar, låt oss ta en titt på vad Google Fonts är och varför du kanske vill använda dem på din webbplats.
Vad är Google Fonts?
Introducerades redan 2010, Google Fonts är gratis designtypsnitt som är optimerade för webben. När detta skrivs innehåller katalogen 832 teckensnittsfamiljer kategoriserade i fem olika sektioner – serif, sans serif, display, handskrift och monospace.
Bortsett från den stora mängden typografialternativ som står till ditt förfogande, här är några fler anledningar till varför du kanske vill överväga att använda Google Fonts på din WordPress-webbplats:
- Tillgänglig gratis för användning. Alla teckensnittsfamiljer i katalogen är tillgängliga för användning under en gratis licens, vilket innebär att alla kan använda dem för vilket projekt som helst – oavsett om det är personligt eller kommersiellt.
- Ingen egen värd krävs. Google Fonts tar hand om värdskapet vilket innebär att du inte behöver vara värd för typsnittet på din webbplats server för att börja använda det. Istället kommer användarens webbläsare att hämta teckensnittet direkt från Google Fonts-katalogen.
När du väl har valt ett typsnitt som passar bra med din webbplatss varumärke är det bara att lägga till det på din WordPress-webbplats.
Hur man använder Google Fonts på din WordPress-webbplats
Även om det finns ett antal olika sätt du kan börja använda Google Fonts på din WordPress-webbplats, rekommenderar vi att du använder en prestandaoptimerad lösning som säkerställer att din webbplats inte saktar ner eller blir otillgänglig.
I det här avsnittet går vi igenom två olika metoder för att lägga till Google Fonts på din WordPress-webbplats – med hjälp av ett plugin och genom att lägga till kodavsnitt manuellt – samtidigt som prestandaoptimering i åtanke.
Metod 1: Använda en plugin
Utan tvekan är det enklaste sättet att lägga till Google Fonts till din WordPress-webbplats genom att använda ett plugin. Även om det finns ett antal olika plugins i WordPress pluginkatalog som du kan använda, vi har valt ut två av de bästa plugin-lösningarna och rekommenderar att du väljer en av dem.
Enkla Google Fonts
De Enkla Google Fonts plugin erbjuder ett enkelt sätt att lägga till Google Fonts till din WordPress-webbplats tema utan att behöva koda. När du har installerat och aktiverat pluginet kommer du att kunna anpassa ditt innehålls typografiinställningar direkt från WordPress Customizer och förhandsgranska ändringar i realtid.
Och om du vill ta saker till nästa nivå kan du gå över till insticksprogrammets inställningssida från WordPress back-end för att kontrollera CSS-väljare och skapa temaspecifika teckensnittskonfigurationer.
Nyckelfunktioner:
- Integreras i WordPress Customizer.
- Låter dig skapa temaspecifika teckensnittskontroller och regler.
- Ställer automatiskt stilmallar i kö för de Google-teckensnitt du väljer.
WP Google Fonts
WP Google Fonts lägger automatiskt till alla nödvändiga kodavsnitt från Google Fonts-katalogen direkt i din WordPress-webbplats HTML och CSS. Utöver detta ger det dig bättre kontroll över din webbplats typografi genom att du kan tilldela Google Fonts till specifika CSS-väljare.
Och om du är det minsta tekniskt inställd kan du utnyttja WP Google Fonts-plugin till dess fulla potential genom att rikta in dig på dina valda Google Fonts från ditt befintliga temas stilmallar.
Nyckelfunktioner:
- Intuitivt och lättanvänt gränssnitt.
- Lägger automatiskt till Google Fonts-kodavsnitten på din webbplats.
- Tillåter webbplatsägare att tilldela Google Fonts till specifika CSS-väljare.
Metod 2: Lägga till kod manuellt
Om du inte har något emot att bråka med kod kan du alltid ta DIY-metoden istället. Den viktigaste fördelen här är att du inte behöver installera ytterligare ett plugin på din webbplats.
För att komma igång, gå över till Google Fonts-webbplatsen och bläddra i katalogen efter ett teckensnitt som du vill lägga till på din WordPress-webbplats. För syftet med denna handledning kommer jag att demonstrera genom att lägga till Lato teckensnitt till en WordPress-webbplats.
När du har bestämt dig för ett typsnitt klickar du på Välj detta teckensnitt knappen i det övre högra hörnet av skärmen. Detta bör lägga till typsnittet till Familj utvald lådan längst ner på skärmen.
Starta sedan Familj utvald lådan och navigera till Anpassa fliken för att välja de stilar som du vill inkludera i teckensnittet. Jag har bestämt mig för att inkludera Tunn 100 och Vanliga 400 i mitt urval.
När det är gjort, navigera tillbaka till Bädda in fliken i Familj utvald och kopiera webbadressen som pekar på ditt teckensnittsval. Efter vårt exempel är webbadressen https://fonts.googleapis.com/css?family=Lato:100 400.
Nu ska vi använda wp_enqueue_style() funktion för att lägga till vårt valda teckensnitt på vår WordPress-webbplats. Lägg till följande kodrader till dina befintliga teman functions.php fil och ersätt URL:en med din egen:
function adding_google_fonts() wp_enqueue_style( ‘ adding_google_fonts ‘, ‘ https://fonts.googleapis.com/css?family=Lato:100,400’, false ); add_action( ‘wp_enqueue_scripts’, ‘adding_google_fonts’ );
Spara och stäng functions.php fil för att fortsätta. Vid det här laget bör Google Font du valt vara integrerat med din WordPress-webbplats. För att börja använda det nyligen tillagda teckensnittet på din webbplats, lägg helt enkelt till följande teckensnittsfamiljedeklaration (eller en liknande) till ditt temas huvudformatmall:
body font-family: ‘Lato’, sans-serif; font-weight: normal; teckenstorlek: 12px;
Det är allt som finns! Teckensnittet du integrerade i din WordPress-webbplats bör nu tillämpas på CSS-väljaren/-erna du angav i ditt temas stilmall.
Slutsats
Att använda Google Fonts på din WordPress-webbplats är ett utmärkt sätt att öka dess visuella attraktionskraft och förbättra ditt innehålls läsbarhet. Vi uppmuntrar dig att prova olika typsnitt på din webbplats och tillämpa dem på rubriker, underrubriker och stycken som du tycker är lämpligt.
Låt oss snabbt sammanfatta de viktigaste sätten du kan börja använda Google Fonts på din WordPress-webbplats:
- Använd ett plugin som Enkla Google Fonts eller WP Google Fonts för att komma igång med Google Fonts i WordPress utan att behöva krångla med kod.
- Använd wp_enqueue_style() funktion för att integrera ditt valda Google Font i ditt befintliga tema och sedan tillämpa det på olika CSS-väljare genom ditt temas stilmall.
Har du några frågor om hur du använder Google Fonts på din WordPress-webbplats? Låt oss veta genom att kommentera nedan!
