Hur man hostar lokala typsnitt i WordPress för en snabbare webbplats

Vacker typografi kan förbättra din webbplats design och fängsla din publik.

Men samtidigt som vi förbättrade vår webbplats prestanda upptäckte vi att beroendet av tredjeparts typsnittstjänster kan göra WordPress långsammare, vilket skadar användarupplevelsen och potentiellt din SEO.

Vi har hittat några sätt att undvika detta problem. En lösning är att hosta typsnitten lokalt.

Genom att ta kontroll över dina typsnittsfiler kan din webbplats hoppa över dessa extra laddningssteg, vilket säkerställer en blixtsnabb webbplats med bättre användarupplevelse och SEO.

I den här artikeln visar vi dig hur du värd lokala teckensnitt i WordPress, vilket gör att du kan förbättra din webbplats typografi samtidigt som du bibehåller optimal prestanda.

Varför värd teckensnitt lokalt i WordPress?

Även om typografi och anpassade teckensnitt kan förbättra webbplatsens övergripande estetik, har de en negativ inverkan på din WordPress-prestanda. Om du till exempel använder ett anpassat teckensnitt från Google Fonts, laddas de från tredjepartstjänster vilket saktar 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 hosta typsnitt lokalt så att de laddas snabbare.

En annan anledning att hosta Google Fonts lokalt är att vara GDPR-kompatibel. Det är en viktig juridisk övervägning om du har webbplatsbesökare från Europeiska unionen.

När någon besöker en webbplats som använder Google-teckensnitt loggas deras IP-adress av Google när teckensnitten laddas. Eftersom detta görs utan deras tillstånd betraktar EU nu detta som ett brott mot integritetsreglerna, och du kan bli skadeståndsskyldig.

Med det sagt, låt oss titta på hur du hostar lokala typsnitt i WordPress för en snabbare webbplats. Vi kommer att täcka två metoder, och den första metoden rekommenderas för de flesta användare.

1. Hosta lokala typsnitt i WordPress med ett plugin
2. Hosta lokala typsnitt i WordPress manuellt
3. Experthandledningar om typsnitt i WordPress

Metod 1: Hosta lokala typsnitt i WordPress med ett plugin

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

OMGF är ett av de bästa WordPress-typsnittspluggar. Det erbjuder ett nybörjarvänligt sätt att förbättra prestanda och GDPR-efterlevnad genom att hosta Google Fonts lokalt.

Efter aktivering måste du besöka Inställningar » Optimera Google-teckensnitt för att konfigurera pluginet. Du bör titta på fliken 'Optimera teckensnitt'.

Lägg märke till 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 hostade kopior.

Det betyder att när du skrollar ner på inställningssidan behöver du bara se till att alternativet 'Font-Display Option' har standardinställningen 'Swap (rekommenderas)' vald.

Allt du behöver göra nu är att klicka på knappen 'Spara & Optimera' längst ner på sidan.

Du kommer att se ett meddelande högst upp på skärmen som säger 'Optimering slutförd med framgång.'

Grattis! Dina Google Fonts hostas nu lokalt. Din webbplats kommer att laddas snabbare och du har minskat risken för europeiska stämningar.

Metod 2: Värd lokala teckensnitt i WordPress manuellt

Du kan också hosta typsnitt lokalt utan att använda en 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, tillåter den dig att använda vilket typsnitt du vill på din webbplats.

Du behöver ladda ner de typsnitt du vill använda i ett webbformat. Det finns många platser att hitta bra gratis webbtypsnitt, som Google Fonts, Typekit, FontSquirrel, och mer.

Om du inte har webbformatet för ditt typsnitt kan du konvertera det med FontSquirrel Webfont generator.

Nu behöver du lagra typsnitten på din WordPress-hosting server. Du kan ladda upp filerna med FTP eller med hjälp av din hosts cPanel File Manager.

Du bör skapa en ny mapp som heter 'fonts' i katalogen för ditt tema eller barn-tema och ladda upp den där.

När du har laddat upp teckensnittet måste du ladda teckensnittet i ditt temas stylesheet med hjälp av anpassad CSS. Du kan lägga till koden direkt i din temas style.css-fil, eller genom att använda avsnittet Ytterligare CSS i temaanpassaren.

Du kan göra det med en CSS3 @font-face-regel som denna:

@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 typsnittsfamiljen och URL:en med din egen.

Därefter kan du använda det teckensnittet var som helst i ditt temas stylesheet eller i avsnittet Ytterligare CSS i temaanpassaren. Den 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 hostade Arvo-typsnittet.

Experthandledningar om typsnitt i WordPress

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du hostar lokala typsnitt i WordPress för en snabbare webbplats. Du kanske också vill se några andra guider relaterade till att använda typsnitt i WordPress:

• Vad är ett Web Safe Font + 19 bästa Web Safe-typsnitt
• Hur du ändrar typsnitt i ditt WordPress-tema (enkla sätt)
• Hur du enkelt ändrar teckenstorlek i WordPress
• Hur man lägger till anpassade teckensnitt i WordPress
• Hur man gör Google-teckensnitt integritetsvänliga
• Hur du inaktiverar Google-typsnitt på din WordPress-webbplats
• Hur man enkelt lägger till ikonfonter i ditt WordPress-tema
• Bästa WordPress typografiplugginer för att förbättra din design

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