Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

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.

How to Host Local Fonts in WordPress for a Faster Website

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.

OMGF Settings

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.

Click the Save & Optimize Button

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.

Downloading a Google Font

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.

Upload the Fonts to Your Website

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
h1 {
font-family: Arvo, Arial, sans-serif;
}

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

Adding Custom CSS With the Theme Customizer

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:

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

6 kommentarerLeave a Reply

  1. 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

  2. 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

  3. 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

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.