Så här serverar du lokala fonts i WordPress för en snabbare website

Beautiful typografi kan förbättra designen på din website och fängsla din publik. Men som experter på WordPress prestanda har vi upptäckt att om man förlitar sig på tjänster för font från tredje part kan det sakta ner din site, försämra användarupplevelsen och potentiellt skada din sökmotorsoptimering.

Lösningen är att servera fonten lokalt. Genom att ta kontroll över dina font-filer kan din site hoppa över de extra stegen för att hämta teckensnitt, vilket ger en blixtsnabb website med bättre användarupplevelse och sökmotorsoptimering.

I den här artikeln visar vi dig hur du serverar lokala fonts i WordPress, vilket allow you att förbättra din sites typografi samtidigt som du bibehåller optimal prestanda.

Varför servera fonts lokalt i WordPress?

Även om typografi och custom fonts kan förbättra den övergripande webbplatsens estetik, har de en negativ inverkan på din WordPress prestanda. Om du till exempel använder ett customize font från Google Fonts, så är de hämtar från tjänster från tredje part vilket kommer att sakta ner din website.

Lyckligtvis finns det ett sätt att använda customize fonts utan att sakta ner din site. Ett new Webfonts API introducerades i WordPress 6.0. Detta allow you att servera fonts lokalt så att de hämtar snabbare.

En annan anledning till att servera Google Fonts lokalt är att följa GDPR. Det är ett viktigt juridiskt övervägande om du har website visitors från Europeiska unionen.

När någon besöker en website som använder Google Fonts loggas deras IP-adress av Google när fonten hämtar. Eftersom detta sker utan deras behörighet anser EU nu att det är ett brott mot bestämmelserna om integritet, och you kan bli skadeståndsskyldig.

Med detta sagt, låt oss ta en titt på hur man serverar lokala fonts i WordPress för en snabbare website. Vi kommer att täcka två metoder, och den första metoden rekommenderas för de flesta användare.

Metod 1: Webbhotell för lokala fonts i WordPress med ett plugin

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

OMGF är ett av de bästa typografiska tilläggen för WordPress. Det erbjuder ett nybörjarvänligt sätt att förbättra prestanda och GDPR-överensstämmelse genom att webbhotell Google Fonts lokalt.

Efter aktivering måste du besöka Settings ” Optimize Google Fonts för att konfigurera pluginet. Du bör titta på tabben ”Optimera Fonts”.

Notice the statement under the ”Optimize Google Fonts” heading that you just need to use the standardinställningar för att automatiskt ersätta your Google Fonts med lokalt hosted kopior.

Det betyder att när du bläddrar ner på sidan med inställningar behöver du bara se till att standardinställningen ”Swap (recommended)” är vald för alternativet ”Font-Display”.

Allt du behöver göra nu är att klicka på knappen ”Save & Optimize” längst ner på sidan.

Du kommer att se ett message högst upp på vyn där det står ”Optimization completed without problem”.

Gratulerar till den här tjänsten! Dina Google Fonts är nu hosted lokalt. Your website kommer att hämta snabbare och du har minskat risken för europeiska stämningar.

Metod 2: Manuellt webbhotell för lokala fonts i WordPress

Du kan också servera fonts lokalt utan att använda ett plugin genom att använda @font-face-metoden från vår guide om hur du lägger till custom fonts i WordPress. Även om den här metoden kräver mer arbete, allowar den dig att använda alla font som du gillar på din website.

Du måste downloada de fonts du vill använda i ett webbformat. Det finns många ställen att hitta bra gratis webbtypsnitt, till exempel Google Fonts, Typekit, FontSquirrel med flera.

Om du ej har webbformatet för din font kan du konvertera den med hjälp av FontSquirrel Webfont generator.

Nu måste du lagra fonten på ditt WordPress webbhotell server. Du kan uploada filerna med FTP eller med hjälp av cPanel File Manager på din server.

You should create a new folder called ’fonts’ in the directory of your theme or child theme and upload it there.

När du har uploadat fonten måste du ladda fonten i ditt temas stylesheet med hjälp av custom CSS. Du kan add to koden direkt till ditt temas style.css-fil, eller genom att använda Additional CSS section i theme customizer.

Du kan göra det med hjälp av en CSS3 @font-face-regel som gillar detta:

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

Efter det kan du använda det fontet var som helst i ditt temas stylesheet eller i Additional CSS section i theme customize. Vilken CSS du använder beror på ditt theme och var du vill använda den lokala fonten. Här är ett exempel från vår demo website:

h1 {
font-family: Arvo, Arial, sans-serif;
}

Som you kan se använder vår heading nu den hosted Arvo fonten.

Expertguider om fonts i WordPress

Nu när du vet hur du serverar lokala fonts kanske du gillar att se några andra guider relaterade till att använda fonts i WordPress.

• Vad är en webbsäker font + 19 bästa webbsäkra fonter
• Så här ändrar du fonts i ditt WordPress Theme (enkla sätt)
• Så här ändrar du enkelt storleken på fonten i WordPress
• Så här addar du custom fonts i WordPress
• Hur man gör Googles Fonts integritet vänliga
• Så här inaktiverar du Google Fonts på din website i WordPress
• Så här lägger du enkelt till Icon Fonts i ditt WordPress Theme
• De bästa typografiska tilläggen för WordPress för att förbättra din design

Vi hoppas att denna tutorial hjälpte dig att lära dig hur du serverar lokala fonts i WordPress för en snabbare website. Du kanske också vill se vår guide om hur du ökar trafiken på din blogg, eller vårt expertval av WordPress tillägg som du måste ha för att få din site att växa.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.