Vacker typografi kan förbättra designen på din webbplats och fängsla din publik.
Men när vi förbättrade vår webbplats prestanda upptäckte vi att om man förlitar sig på typsnittstjänster från tredje part kan WordPress bli långsammare, vilket försämrar användarupplevelsen och potentiellt skadar din SEO.
Vi har hittat några sätt att undvika detta problem. En lösning är att hosta teckensnitten lokalt.
Genom att ta kontroll över dina teckensnittsfiler kan din webbplats hoppa över de extra laddningsstegen, vilket ger en blixtsnabb webbplats med bättre användarupplevelse och SEO.
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:
1 2 3 4 5 | @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:
1 2 3 | h 1 { 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
Vi hoppas att den här guiden hjälpte dig att lära dig hur du hostar lokala teckensnitt i WordPress för en snabbare webbplats. Du kanske också vill se några andra guider som rör användning av teckensnitt 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
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.
KENNETH GRAY
Do I remove the wp google fonts plugin once the fonts have been moved over to my website?
k
WPBeginner Support
If you use the plugin, we would not recommend removing it to keep the fonts on your site.
Admin
Ashikur Rahman
do i need to keep this plugin or i can remove that?
WPBeginner Support
If you are using the plugin then we would recommend keeping the plugin active.
Admin
Liz S
Don’t you also have to make some change to the functions.PHP file to add the new fonts so they show up in the customizer?
WPBeginner Support
If you are using the manual method you would need to edit your theme’s CSS which we cover in the second method
Admin