Vill du lägga till typsnitt från tredje part på din webbplats utan att sakta ner den?
Anpassade typsnitt förbättrar din webbplats typografi och användarupplevelse, men de tar längre tid att ladda. Den goda nyheten är att du kan vara värd för dina typsnitt lokalt för att säkerställa att din webbplats alltid är snabb.
I den här artikeln visar vi dig hur du är värd för lokala teckensnitt i WordPress.
Varför vara värd för teckensnitt lokalt i WordPress?
Medan anpassad typografi och typsnitt kan förbättra webbplatsens övergripande estetik, har de en negativ inverkan på WordPress-prestandan. Om du till exempel använder ett anpassat teckensnitt från Google Fonts, kommer de att laddas från tredjepartstjänster, vilket kommer att sakta ner din webbplats.
Lyckligtvis finns det ett sätt att använda anpassade typsnitt utan att sakta ner din webbplats. Ett nytt Webfonts API introducerades i WordPress 6.0. Detta gör att du kan vara värd för teckensnitt lokalt så att de laddas snabbare.
Ett annat skäl till att vara värd för Google Fonts lokalt är att följa GDPR. Det är ett viktigt juridiskt övervägande om din webbplats har besökare från EU.
När någon besöker en webbplats som använder Google Fonts loggar Google deras IP-adress när teckensnitten laddas. Eftersom detta görs utan ditt tillstånd anser EU nu att det är ett brott mot integritetsreglerna och du kan bli skadeståndsskyldig.
Med detta sagt, låt oss ta en titt på hur man är värd för lokala flöden i WordPress för en snabbare webbplats. Vi kommer att täcka två metoder och den första rekommenderas för de flesta användare.
- Värd för lokala teckensnitt i WordPress med en plugin
- Att vara värd för lokala teckensnitt i WordPress manuellt
Metod 1: Värd för lokala teckensnitt i WordPress med en plugin
Det första du bör göra är att installera och aktivera Min Gud Plugin (Optimera mina Google-teckensnitt). För mer information, se vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.
OMGF är en av de bästa WordPress typografi-plugins. Det erbjuder ett nybörjarvänligt sätt att förbättra prestanda och GDPR-efterlevnad genom att vara värd för Google Fonts lokalt.
Vid aktivering måste du besöka Inställningar » Optimera Google Fonts för att konfigurera plugin-programmet. Du bör titta på fliken “Optimera teckensnitt”.
Notera uttalandet under rubriken “Optimera Google Fonts” att du bara behöver använda standardinställningarna för att automatiskt ersätta dina Google Fonts med lokalt lagrade kopior.
Det betyder att allt du behöver göra när du rullar nedåt på inställningssidan är att se till att “Källvisningsalternativ” har standardinställningen “Swap (rekommenderas)” vald.
Allt du behöver göra nu är att klicka på knappen “Spara och optimera” längst ner på sidan.
Du kommer att se ett meddelande högst upp på skärmen som säger “Optimeringen har slutförts framgångsrikt.”
Grattis! Dina Google Fonts finns nu lokalt. Din webbplats kommer att laddas snabbare och du har minskat risken för europeiska rättegångar.
Metod 2: Värd lokala teckensnitt i WordPress manuellt
Du kan också vara värd för typsnitt lokalt utan att använda ett plugin genom att använda @font-face-metoden från vår guide om hur man lägger till anpassade typsnitt i WordPress. Även om den här metoden kräver mer arbete, låter den dig använda vilket typsnitt du vill på din webbplats.
Du måste ladda ner de typsnitt du vill använda i webbformat. Det finns många ställen att hitta fantastiska gratis webbteckensnitt, som Google Fonts, Typekit, FontSquirrel och mer.
Om du inte har webbformat för ditt teckensnitt kan du konvertera det med hjälp av FontSquirrel Web Font Generator.
Nu måste du lagra typsnitten på din WordPress-värdserver. Du kan ladda upp filerna med FTP eller med din värds cPanel File Manager.
Du måste skapa en ny mapp som heter “källor” i din tema- eller undertemakatalog och ladda upp den där.
När du har laddat upp teckensnittet måste du ladda upp det till ditt temas stilmall med anpassad CSS. Du kan lägga till koden direkt i ditt temas style.css-fil eller genom att använda den extra CSS-delen av temaanpassaren.
Du kan göra det med CSS3 @font-face-regeln så här:
@font-face {
font-family: Arvo;
src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
Glöm inte att ersätta teckensnittsfamiljen och webbadressen med din egen.
Efter det kan du använda det teckensnittet var som helst i ditt temas stilmall eller i den extra CSS-delen av temaanpassaren. Vilken CSS du använder beror på ditt tema och var du vill använda det lokala teckensnittet. Här är ett exempel från vår demowebbplats:
h1 {
font-family: Arvo, Arial, sans-serif;
}
Som du kan se använder vår rubrik nu det lokalt värdade Arvo-fonten.
Vi hoppas att den här handledningen hjälpte dig att lära dig hur du är värd för lokala flöden i WordPress för en snabbare webbplats. Du kanske också vill se vår guide om hur du ökar din bloggtrafik, eller vårt expertutbud av WordPress-plugins som du måste ha för att få din webbplats att växa.
