{"id":32381,"date":"2019-11-28T05:00:47","date_gmt":"2019-11-28T13:00:47","guid":{"rendered":"https:\/\/kinsta.com\/?p=55983"},"modified":"2025-09-01T15:41:02","modified_gmt":"2025-09-01T15:41:02","slug":"sa-andrar-du-typsnitt-i-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/","title":{"rendered":"S\u00e5 \u00e4ndrar du typsnitt i WordPress (och \u00e4ndra storlek, f\u00e4rg, optimera)"},"content":{"rendered":"<p>Typsnitt kan vara skillnaden mellan en tr\u00e5kig webbplats och en vacker webbplats. Genom att l\u00e4ra sig att \u00e4ndra <a href=\"https:\/\/kinsta.com\/blog\/modern-fonts\/\">typsnitt i WordPress<\/a>, kan du f\u00e5 din webbplats att se modern, professionell, och varum\u00e4rkt ut.<\/p>\n<p>Men vad \u00e4r det b\u00e4sta s\u00e4ttet att anv\u00e4nda <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-typsnitt\/\">typsnitt p\u00e5 din WordPress-webbplats<\/a>, och hur v\u00e4ljer du r\u00e4tt typsnitt f\u00f6r din design?<\/p>\n<p>I den h\u00e4r guiden kommer jag att g\u00e5 igenom dig allt du beh\u00f6ver veta om typsnitt i WordPress. Du kommer l\u00e4ra dig:<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2 id=\"terminology\">Typsnitt: Terminologin<\/h2>\n<p>L\u00e5t oss b\u00f6rja med att titta p\u00e5 terminologin kring typsnitt p\u00e5 webben.<\/p>\n<ul>\n<li>Webbtypsnitt (\u00e4ven kallade <a href=\"https:\/\/kinsta.com\/blog\/html-fonts\/\">HTML-typsnitt<\/a>) \u00e4r typsnitt som finns p\u00e5 en webbplats fr\u00e5n tredje part och l\u00e4nkas till p\u00e5 din webbplats.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/blog\/local-fonts\/\">Lokalt hostade typsnitt<\/a> \u00e4r just det (hostade p\u00e5 webbplatsens servrar.)<\/li>\n<li><a href=\"https:\/\/kinsta.com\/blog\/web-safe-fonts\/\">Webbs\u00e4kra typsnitt<\/a> \u00e4r ett begr\u00e4nsat utbud av typsnitt som \u00e4r f\u00f6rinstallerade p\u00e5 (n\u00e4stan) alla datorer och som du kan vara ganska s\u00e4ker p\u00e5 att alla dina bes\u00f6kare kommer att ha tillg\u00e5ng till.<\/li>\n<\/ul>\n<p>L\u00e5t oss ta en titt p\u00e5 alternativen f\u00f6r att l\u00e4gga till typsnitt p\u00e5 din webbplats.<\/p>\n<h2 id=\"options\">S\u00e5 h\u00e4r l\u00e4gger du till typsnitt p\u00e5 din WordPress-webbplats (alternativen)<\/h2>\n<p>Innan du hoppar till att l\u00e4gga till typsnitt p\u00e5 din webbplats hj\u00e4lper det om du f\u00f6rst\u00e5r de alternativ som \u00e4r tillg\u00e4ngliga f\u00f6r dig.<\/p>\n<p>Typsnitt \u00e4r en del av webbplatsens design, s\u00e5 i de flesta fall kommer de att kodas via ditt tema \u2013 men inte alltid. I vissa fall kan du v\u00e4lja att anv\u00e4nda ett plugin f\u00f6r att aktivera ett bredare utbud av typsnitt p\u00e5 din webbplats.<\/p>\n<p>H\u00e4r \u00e4r n\u00e5gra av de alternativ som \u00e4r tillg\u00e4ngliga f\u00f6r dig:<\/p>\n<ul>\n<li>Anv\u00e4nda webbtypsnitt som <a href=\"https:\/\/kinsta.com\/se\/blog\/basta-google-fonts\/\">Google Fonts<\/a> genom att installera ett plugin som ger dig \u00e5tkomst.<\/li>\n<li>Anv\u00e4nd webbtypsnitt genom att koda dem i ditt tema och k\u00f6a dem (inte s\u00e5 knepigt som det l\u00e5ter).<\/li>\n<li>Hosta dina typsnitt p\u00e5 din egen hemsida och l\u00e4gga till dem i <a href=\"https:\/\/kinsta.com\/se\/blog\/installerar-du-ett-wordpress-tema\/\">ditt tema<\/a>.<\/li>\n<\/ul>\n<p>Det finns tv\u00e5 huvudsakliga skillnader \u2013 om du anv\u00e4nder webbtypsnitt som \u00e4r hostade utanf\u00f6r din webbplats, eller om du v\u00e4ljer att hosta dina typsnittsfiler sj\u00e4lv. I den h\u00e4r guiden tittar vi p\u00e5 f\u00f6rdelarna och nackdelarna f\u00f6r b\u00e5da.<\/p>\n<p>L\u00e5t oss b\u00f6rja med att titta p\u00e5 webbtypsnitt: varf\u00f6r du kanske ska v\u00e4lja att anv\u00e4nda dem och s\u00e4tt att l\u00e4gga till dem p\u00e5 din webbplats.<\/p>\n<h2 id=\"webfonts\">Att anv\u00e4nda webbtypsnitt i WordPress<\/h2>\n<p>Webbtypsnitt \u00e4r det mest popul\u00e4ra s\u00e4ttet att l\u00e4gga till typsnitt p\u00e5 din webbplats eftersom de g\u00f6r det enkelt att l\u00e4gga till ett stort antal typsnitt.<\/p>\n<h3>Vad \u00e4r Webbtypsnitt?<\/h3>\n<p>Webbtypsnitt \u00e4r typsnitt som finns p\u00e5 en tredjepartsleverant\u00f6rs webbplats. Ist\u00e4llet f\u00f6r att kopiera filerna till din egen webbplats l\u00e4nkar du till leverant\u00f6rens hemsida och de h\u00e4mtas d\u00e4rifr\u00e5n.<\/p>\n<p>Det inneb\u00e4r att du har tillg\u00e5ng till ett stort antal typsnitt utan att beh\u00f6va anv\u00e4nda serverutrymme p\u00e5 ditt eget webbhotell. Det betyder ocks\u00e5 att om typsnittsfilerna skulle \u00e4ndras \u00f6ver tid beh\u00f6ver du inte uppdatera dina filer och du har automatiskt tillg\u00e5ng till de nya versionerna av filerna fr\u00e5n leverant\u00f6ren.<\/p>\n<p>Webbtypsnitt kan vara gratis eller betalda, vanligtvis via en prenumeration. N\u00e5gra popul\u00e4ra leverant\u00f6rer:<\/p>\n<ul>\n<li><a href=\"https:\/\/fonts.google.com\/\">Google Fonts<\/a>. Den st\u00f6rsta leverant\u00f6ren av gratis webbtypsnitt. Du kan ocks\u00e5 ladda ner alla deras typsnitt till din dator, vilket inneb\u00e4r att om du vill skapa offline-material med samma typsnitt som din webbplats kan du g\u00f6ra det. Och allt \u00e4r gratis.<\/li>\n<li><a href=\"https:\/\/edgewebfonts.adobe.com\/\">Adobe Edge Web Fonts<\/a>. Dessa \u00e4r ocks\u00e5 gratis. Medan de \u00e4r utformade f\u00f6r att anv\u00e4ndas med Adobe-produkter, fungerar de bra p\u00e5 alla webbplatser.<\/li>\n<li><a href=\"https:\/\/www.fonts.com\/browse\">Fonts.com<\/a> \u00e4r en premiumleverant\u00f6r av typsnitt som du kan beh\u00f6va anv\u00e4nda om du m\u00e5ste matcha ditt webbtypsnitt till ett typsnitt fr\u00e5n ditt tryckta material och typsnittet inte \u00e4r tillg\u00e4ngligt via en gratis leverant\u00f6r.<\/li>\n<li><a href=\"https:\/\/www.fontfabric.com\/fonts\/\">fontfabric<\/a> \u00e4r en typsnittsdesigner som tillhandah\u00e5ller premiumtypsnitt f\u00f6r anv\u00e4ndning som webbtypsnitt och online. Du m\u00e5ste betala f\u00f6r dessa men kommer att f\u00e5 n\u00e5got mer individuellt \u00e4n om du anv\u00e4nde Google fonts.<\/li>\n<\/ul>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/09\/google-fonts.jpg\" alt=\"Google Fonts\" width=\"1500\" height=\"849\"><figcaption class=\"wp-caption-text\">Google Fonts<\/figcaption><\/figure>\n<p>Alla dessa leverant\u00f6rer l\u00e5ter dig servera typsnitt direkt fr\u00e5n sina servrar genom att l\u00e4gga till lite kod till <a href=\"https:\/\/kinsta.com\/se\/blog\/kostnad-wordpresswebbplats\/\">din WordPress-webbplats<\/a> eller ibland genom att <a href=\"https:\/\/kinsta.com\/se\/topics\/wordpress-plugins\/\">anv\u00e4nda ett plugin<\/a> vilket inneb\u00e4r att du inte beh\u00f6ver l\u00e4gga till n\u00e5gon kod.<\/p>\n<p>Webbtypsnitt skiljer sig fr\u00e5n webbs\u00e4kra typsnitt. Du kan anv\u00e4nda dessa som en reserv f\u00f6r webbtypsnitt om din webbplatsbes\u00f6kare inte kan ansluta till webbtypsnittet av n\u00e5gon anledning. Jag ska visa dig hur man g\u00f6r det senare i det h\u00e4r inl\u00e4gget.<\/p>\n<h3>Varf\u00f6r ska du anv\u00e4nda Webbtypsnitt?<\/h3>\n<p>S\u00e5 nu n\u00e4r du vet vad Webbtypsnitt \u00e4r, varf\u00f6r skulle du v\u00e4lja att anv\u00e4nda dem ist\u00e4llet f\u00f6r att hosta dina egna typsnitt?<\/p>\n<p>H\u00e4r \u00e4r n\u00e5gra av f\u00f6rdelarna:<\/p>\n<ul>\n<li>Enkelhet: att l\u00e4gga till n\u00e5gra rader kod eller installera ett plugin \u00e4r snabbare \u00e4n att ladda ner och ladda upp typsnittsfiler och g\u00f6r det l\u00e4ttare att \u00e4ndra typsnitt l\u00e4ngre fram.<\/li>\n<li>Utbud av typsnitt: det finns tusentals typsnitt tillg\u00e4ngliga som webbtypsnitt och listan v\u00e4xer hela tiden.<\/li>\n<li>Uppdatering: Om typsnittsfilen beh\u00f6ver uppdateras, kanske f\u00f6r att l\u00e4gga till variabla typsnitt (mer om det inom kort) eller f\u00f6r att l\u00e4gga till extra tecken, kommer din webbplats att ha tillg\u00e5ng till den nya versionen utan att du beh\u00f6ver g\u00f6ra n\u00e5gonting.<\/li>\n<\/ul>\n<p>De flesta webbplatser anv\u00e4nder webbtypsnitt med ett webbs\u00e4kert typsnitt som en backupl\u00f6sning. Och med WordPress \u00e4r det v\u00e4ldigt l\u00e4tt att g\u00f6ra.<\/p>\n<h3>Hitta de b\u00e4sta Webbtypsnitten f\u00f6r din webbplats<\/h3>\n<p>Efter att ha best\u00e4mt att du ska anv\u00e4nda Webbtypsnitt har du nu ett tufft beslut: vilket typsnitt ska du anv\u00e4nda?<\/p>\n<p>P\u00e5 den gamla goda tiden n\u00e4r allt webbutvecklare hade tillg\u00e5ng till var de f\u00f6rinstallerade webbs\u00e4kra typsnitt, var detta ett mycket enkelt beslut. Vill du anv\u00e4nda ett serif-typsnitt eller sans-serif? (Serif-typsnitt har en liten linje eller streck i slutet av ett st\u00f6rre streck i varje tecken, sans-serif-typsnitt har inte det.) Efter att ha fattat det beslutet var dina val mycket begr\u00e4nsade.<\/p>\n<p>Men nu har du hela v\u00e4rlden vid dina f\u00f6tter.<\/p>\n<p>H\u00e4r \u00e4r n\u00e5gra tips som hj\u00e4lper dig att v\u00e4lja det b\u00e4sta typsnittet f\u00f6r din webbplats:<\/p>\n<ul>\n<li>Titta p\u00e5 dina tryckta material. Finns det typsnitt som redan anv\u00e4nds som du kan hitta som webbtypsnitt? Om inte, kan du hitta n\u00e5got liknande?<\/li>\n<li>Titta p\u00e5 dina konkurrenters webbplatser. Vilka typsnitt anv\u00e4nder de? Jag rekommenderar inte att du kopierar dem, men det kan finnas vissa stilar som f\u00f6rmedlar r\u00e4tt sorts image till dina webbplatsanv\u00e4ndare.<\/li>\n<li>T\u00e4nk p\u00e5 vilken typ av hum\u00f6r du vill f\u00f6rmedla med dina typsnitt. Vissa typsnitt ser modernare ut, andra mer traditionella. Vissa \u00e4r roliga, andra allvarligare.<\/li>\n<li>H\u00e5ll dig till typsnitt <a href=\"https:\/\/kinsta.com\/se\/topics\/innehallsstrategi\/#give-readers-your-very-best\">som \u00e4r l\u00e4tta att l\u00e4sa<\/a> f\u00f6r br\u00f6dtexten och anv\u00e4nd mer intressanta typsnitt f\u00f6r rubriker om du vill.<\/li>\n<li>V\u00e4lj fr\u00e5n <a href=\"https:\/\/kinsta.com\/se\/blog\/basta-google-fonts\/\">de mest popul\u00e4ra Google Fonts<\/a> \u2013 dessa kommer att vara bekanta hos webbplatsbes\u00f6kare och \u00e4r l\u00e4tta att l\u00e4sa.<\/li>\n<\/ul>\n<p>N\u00e4r du har valt dina typsnitt, spendera lite tid p\u00e5 att experimentera med dem. Typsnittleverant\u00f6rer som Google Fonts l\u00e5ter dig skriva in anpassad text f\u00f6r att se hur det ser ut i ditt valda typsnitt. N\u00e4r du ser din egen text i typsnittet kan det hj\u00e4lpa dig att best\u00e4mma om det \u00e4r r\u00e4tt typsnitt f\u00f6r dig.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/experimentera-typsnitt-1.jpg\" alt=\"Experimentera med ditt typsnitt\" width=\"1500\" height=\"369\"><figcaption class=\"wp-caption-text\">Experimentera med ditt typsnitt<\/figcaption><\/figure>\n<p>Och kom ih\u00e5g att anv\u00e4nda webbtypsnitt g\u00f6r det v\u00e4ldigt enkelt att \u00e4ndra dina typsnitt s\u00e5 att du alltid kan byta till ett annat alternativ medan du <a href=\"https:\/\/kinsta.com\/blog\/hire-wordpress-developer\/\">utvecklar ditt tema<\/a> eller konfigurerar din webbplats.<\/p>\n<h3>S\u00e5 h\u00e4r l\u00e4gger du till webbtypsnitt med ett WordPress-Plugin<\/h3>\n<p>S\u00e5 du har valt ditt typsnitt, nu \u00e4r det dags att l\u00e4gga till det p\u00e5 din webbplats.<\/p>\n<p>Om du inte k\u00e4nner dig bekv\u00e4m med att l\u00e4gga till kod till dina temafiler kan du installera ett plugin som l\u00e5ter dig komma \u00e5t Google Fonts och anv\u00e4nda vilket typsnitt du \u00e4n vill ha p\u00e5 din webbplats.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/olympus-google-fonts\/\">Google Fonts Typography<\/a>-plugin ger dig tillg\u00e5ng till hela biblioteket med Google Fonts och l\u00e5ter dig granska dem via WordPress Customizer.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/blog\/how-to-install-wordpress-plugins\/\">Installera pluginet<\/a> p\u00e5 din webbplats precis som du skulle n\u00e5got annat plugin, och sedan aktivera det.<\/p>\n<p>G\u00e5 till <strong>Utseende &gt; Anpassa<\/strong> f\u00f6r att komma \u00e5t Customizer. Du ser ett avsnitt f\u00f6r <strong>Google Fonts<\/strong>.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/Google-Fonts-i-Customizer1.jpg\" alt=\"Google Fonts i Customizer\" width=\"1500\" height=\"804\"><figcaption class=\"wp-caption-text\">Google Fonts i Customizer<\/figcaption><\/figure>\n<p>Klicka p\u00e5 den l\u00e4nken f\u00f6r att komma \u00e5t inst\u00e4llningarna f\u00f6r dina typsnitt. Konfigurera dem enligt f\u00f6ljande:<\/p>\n<p><strong>Grundl\u00e4ggande inst\u00e4llningar<\/strong>: konfigurera standardtypsnittet f\u00f6r din br\u00f6dtext och dina rubriker, liksom alla knappar. I sk\u00e4rmdumpen nedan kan du se att jag har lagt till ett l\u00e4ttl\u00e4st serif-typsnitt f\u00f6r br\u00f6dtexten och ett mer distinkt typsnitt f\u00f6r rubriker.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/konfigurera-grundlaggande-installningar.jpg\" alt=\"Konfigurera grundl\u00e4ggande inst\u00e4llningar\" width=\"1500\" height=\"708\"><figcaption class=\"wp-caption-text\">Konfigurera grundl\u00e4ggande inst\u00e4llningar<\/figcaption><\/figure>\n<p><strong>Avancerade Inst\u00e4llningar<\/strong>: H\u00e4r kan du konfigurera varum\u00e4rkning (webbplatstitel och beskrivning), navigering (din meny), inneh\u00e5ll och rubriker mer detaljerat, ditt sidof\u00e4lt och sidfot. Du kan ocks\u00e5 ladda typsnitt utan att tilldela dem till n\u00e5got, vilket inneb\u00e4r att du kan <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-css\/\">l\u00e4gga till dem till anpassad CSS<\/a> i Customizer.<\/p>\n<p><strong>Typsnittsladdning<\/strong>: Om det finns n\u00e5gra typsnittsvikter som du inte beh\u00f6ver (dvs. fet, kursiv, den typen av saker), kan du avmarkera dem h\u00e4r s\u00e5 att de inte saktar ner din webbplats i on\u00f6dan.<\/p>\n<p><strong>Fels\u00f6kning<\/strong>: Anv\u00e4nd detta f\u00f6r att tvinga alla typsnitt att visas om de inte fungerar som de borde.<\/p>\n<p>Tillbringa lite tid med att arbeta med dessa inst\u00e4llningar och testa dem i Customizer f\u00f6r att s\u00e4kerst\u00e4lla att de fungerar som du vill. Klicka sedan p\u00e5 knappen <strong>Publicera<\/strong> n\u00e4r du \u00e4r n\u00f6jd med dina inst\u00e4llningar. L\u00e4mna inte Customizer utan att klicka p\u00e5 <strong>Publicera<\/strong> annars kommer du att f\u00f6rlora dina \u00e4ndringar.<\/p>\n<h4>Redigera teckenf\u00e4rg<\/h4>\n<p>Den kostnadsfria versionen av pluginet l\u00e5ter dig inte redigera f\u00e4rgerna p\u00e5 dina typsnitt. F\u00f6r att g\u00f6ra det m\u00e5ste du antingen k\u00f6pa premiumversionen eller anv\u00e4nda alternativet <strong>Ytterligare CSS<\/strong> i Customizer.<\/p>\n<p>G\u00e5 tillbaka till startsk\u00e4rmen f\u00f6r Customizer och klicka p\u00e5 fliken <strong>Ytterligare CSS<\/strong>. Du kommer att presenteras med ett tomt textomr\u00e5de d\u00e4r du kan <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-css\/\">l\u00e4gga till din egen CSS<\/a>.<\/p>\n<p>F\u00f6r att hitta det element du beh\u00f6ver styla, v\u00e4lj det och <a href=\"https:\/\/www.lifewire.com\/get-inspect-element-tool-for-browser-756549\">anv\u00e4nd kodinspekteraren<\/a> i din webbl\u00e4sare f\u00f6r att ta reda p\u00e5 vilken f\u00e4rgstyling den redan har.<\/p>\n<p>Nedan anv\u00e4nder jag Google Chrome och jag har riktat in mig p\u00e5 ett <code>h1<\/code>-element.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/inspektera-koden.jpg\" alt=\"Inspektera koden i Chrome\" width=\"1500\" height=\"774\"><figcaption class=\"wp-caption-text\">Inspektera koden i Chrome<\/figcaption><\/figure>\n<p>I mitt <a href=\"https:\/\/kinsta.com\/se\/blog\/andrar-wordpresstema\/\">WordPress-tema<\/a> har det \u00e4rvt sin f\u00e4rg fr\u00e5n body-elementet. Jag vill l\u00e4gga till n\u00e5got mer specifikt. I textomr\u00e5det f\u00f6r din CSS, skriv in CSS f\u00f6r ditt element och den f\u00e4rg du vill anv\u00e4nda. Min ser ut s\u00e5 h\u00e4r:<\/p>\n<pre><code class=\"language-css\">h1 {\n color: #f542f5;\n}<\/code><\/pre>\n<p>Det ger mig ett ljusrosa h1-element:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/rubriken-heading1-1.jpg\" alt=\"\u00c4ndra f\u00e4rg p\u00e5 rubriken\" width=\"1500\" height=\"781\"><figcaption class=\"wp-caption-text\">\u00c4ndra f\u00e4rg p\u00e5 rubriken<\/figcaption><\/figure>\n<p>Du kan upprepa detta med alla textelement du vill l\u00e4gga f\u00e4rg till, och \u00e4ven alla du vill l\u00e4gga till egna typsnitt som inte ingick i alternativen i de andra sk\u00e4rmarna. Om du vill veta vilken CSS du ska anv\u00e4nda f\u00f6r typsnitt, l\u00e4s vidare till avsnittet i det h\u00e4r inl\u00e4gget om att \u00e4ndra dina typsnitt via CSS.<\/p>\n<h3>S\u00e5 h\u00e4r l\u00e4gger du till webbtypsnitt manuellt<\/h3>\n<p>Om du inte vill l\u00e4gga till ett extra plugin till din webbplats och har tillg\u00e5ng till koden f\u00f6r ditt tema, kan du installera och anv\u00e4nda webbtypsnitt genom att <a href=\"https:\/\/kinsta.com\/blog\/edit-wordpress-code\/\">l\u00e4gga till lite kod till din funktionsfil och din stilmall<\/a>.<\/p>\n<p>Om din webbplats anv\u00e4nder ett skr\u00e4ddarsytt tema som du kan redigera kan du redigera funktionsfilen och stilmallen fr\u00e5n ditt tema. Men om du anv\u00e4nder ett tredjepartstema som du <a href=\"https:\/\/kinsta.com\/se\/blog\/installerar-du-ett-wordpress-tema\/\">k\u00f6pte eller fick fr\u00e5n WordPress temakatalog<\/a>, m\u00e5ste du <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-barntema\/\">skapa ett barntema<\/a>. Du m\u00e5ste d\u00e5 ge det tv\u00e5 filer: <strong>functions.php<\/strong> och <strong>style.css<\/strong>.<\/p>\n<p>L\u00e5t oss g\u00e5 igenom processen att manuellt l\u00e4gga till webbtypsnitt till ditt tema. Jag kommer att arbeta med Google Fonts f\u00f6r det h\u00e4r exemplet, eftersom det \u00e4r det vanligaste och det \u00e4r gratis.<\/p>\n<h4>V\u00e4lj ett typsnitt och spara l\u00e4nken<\/h4>\n<p>B\u00f6rja med att v\u00e4lja typsnitt fr\u00e5n Google Fonts. L\u00e4gg till det i biblioteket genom att klicka p\u00e5 plusikonen bredvid det.<\/p>\n<p>Klicka p\u00e5 fliken l\u00e4ngst ner p\u00e5 sk\u00e4rmen i ditt bibliotek och du kommer att se kod du kan l\u00e4gga till p\u00e5 din webbplats. Om du vill l\u00e4gga till extra typsnittsvikter och format klickar du p\u00e5 fliken <strong>Anpassa<\/strong> och v\u00e4ljer de du vill ha. G\u00e5 sedan tillbaka till fliken <strong>B\u00e4dda in<\/strong>.<\/p>\n<p>Kopiera inte koden exakt: du anv\u00e4nder den, men ist\u00e4llet f\u00f6r att anropa typsnittet i avsnittet &lt;head&gt; i sidhuvudet kommer du k\u00f6a typsnitten. Detta \u00e4r det r\u00e4tta s\u00e4ttet att g\u00f6ra det i WordPress.<\/p>\n<p>I st\u00e4llet kopierar du bara l\u00e4nken till typsnittet fr\u00e5n avsnittet B\u00e4dda in typsnitt.<\/p>\n<p>S\u00e5 i mitt fall ger Google Fonts mig den h\u00e4r koden:<\/p>\n<pre><code class=\"language-php\">&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Raleway\" rel=\"stylesheet\"&gt;<\/code><\/pre>\n<p>Jag beh\u00f6ver bara kopiera den h\u00e4r biten:<\/p>\n<pre><code class=\"language-php\">https:\/\/fonts.googleapis.com\/css?family=Raleway<\/code><\/pre>\n<h4>K\u00f6a typsnitten<\/h4>\n<p>\u00d6ppna temats funktionsfil och l\u00e4gg till f\u00f6ljande, men ers\u00e4tt l\u00e4nken f\u00f6r mitt typsnitt med l\u00e4nken Google har gett dig f\u00f6r ditt:<\/p>\n<pre><code class=\"language-php\">function kinsta_add_google_fonts() {\n wp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Raleway');\n wp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );<\/code><\/pre>\n<p>Detta k\u00f6ar stilen fr\u00e5n Googles Fonts servrar. Om du beh\u00f6ver l\u00e4gga till fler typsnitt i framtiden kan du antingen l\u00e4gga till en ny rad i din funktion eller l\u00e4gga till den i samma rad, s\u00e5 h\u00e4r:<\/p>\n<pre><code class=\"language-php\">function kinsta_add_google_fonts() {\n wp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Merriweather|Raleway');\n wp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );<\/code><\/pre>\n<p>Detta kommer att fr\u00e5ga b\u00e5de typsnitten Merriweather och Raleway.<\/p>\n<h4>Att l\u00e4gga till typsnitt i din stilmall<\/h4>\n<p>Detta kommer inte att g\u00f6ra s\u00e5 typsnittet fungerar p\u00e5 din webbplats \u00e4nnu: du beh\u00f6ver fortfarande l\u00e4gga till det i ditt temas stilmall.<\/p>\n<p>\u00d6ppna <strong>styles.css<\/strong>-filen i ditt tema och l\u00e4gg till koden f\u00f6r att styla enskilda element med dina webbtypsnitt. Se till att du <a href=\"https:\/\/kinsta.com\/blog\/combine-external-css\/\">l\u00e4gger till den efter n\u00e5gon befintlig CSS<\/a> f\u00f6r typsnitt, annars kan den bli \u00e5sidosatt av det.<\/p>\n<p>Vilka element du stylar \u00e4r vara upp till dig, men det \u00e4r vanligt att anv\u00e4nda ett l\u00e4sbart typsnitt f\u00f6r body-elementet och n\u00e5got snyggare f\u00f6r rubrikerna.<\/p>\n<pre><code class=\"language-css\">body {\n font-family: 'Raleway', sans-serif;\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', serif;\n}<\/code><\/pre>\n<p>I fallet ovan kommer allt p\u00e5 sidan att anv\u00e4nda Raleway-typsnittet, f\u00f6rutom h1, h2 och h3-elementen, som kommer att anv\u00e4nda Merriweather.<\/p>\n<p>Nu, spara din stilmall och kontrollera din webbplats f\u00f6r att se till att allt fungerar som du f\u00f6rv\u00e4ntar dig. Om de nya typsnitten inte visas, f\u00f6rs\u00f6k <a href=\"https:\/\/kinsta.com\/se\/blog\/har-rensar-du-cache-for-alla-storre-webblasare\/\">rensa webbl\u00e4sarens cache<\/a> och kontrollera att typsnitten inte \u00e5sidos\u00e4tts av n\u00e5gon styling f\u00f6r typsnitt l\u00e4gre ner i stilmallen. Det \u00e4r d\u00e4rf\u00f6r det \u00e4r en bra id\u00e9 att antingen l\u00e4gga till din nya styling l\u00e4ngst ner i stilmallen eller att ers\u00e4tta den befintliga typsnittsstylingen med din nya styling (\u00e4nnu b\u00e4ttre).<\/p>\n<h4>L\u00e4gga till ett typsnitt som backup<\/h4>\n<p>Det kan finnas tillf\u00e4llen n\u00e4r n\u00e5gon bes\u00f6ker din webbplats och inte kan komma \u00e5t webbtypsnittsfiler av n\u00e5gon anledning. Kanske \u00e4r de p\u00e5 en d\u00e5lig anslutning eller anv\u00e4nder en gammal enhet som inte kommer att rendera webbtypsnitt. Eller kanske har din webbtypsnittsleverant\u00f6r tekniska problem.<\/p>\n<p>Av denna anledning \u00e4r det en bra id\u00e9 att ha en backup p\u00e5 plats.<\/p>\n<p>Koden du f\u00e5r av Google fonts har redan en backup i att helt enkelt ange <code>serif<\/code> eller <code>sans-serif<\/code>, men vi kan g\u00e5 ett steg l\u00e4ngre \u00e4n s\u00e5.<\/p>\n<p>Anv\u00e4nd ett av de webbs\u00e4kra typsnitt som redan \u00e4r installerade installeras p\u00e5 bes\u00f6karens maskin, och sedan inkludera den andra reserven av bara <code>serif<\/code> eller <code>sans-serif<\/code>, om de anv\u00e4nder en mobil enhet som inte ens har webbs\u00e4kra typsnitt.<\/p>\n<p>G\u00e5 tillbaka till din stilmall och redigera din CSS s\u00e5 att det st\u00e5r ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n<pre><code class=\"language-css\">body {\n font-family: 'Raleway', Helvetica, sans-serif;\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', Georgia, serif;\n}<\/code><\/pre>\n<p>Detta inneb\u00e4r att m\u00e4nniskor som bes\u00f6ker din webbplats kommer att se ditt webbtypsnitt om allt \u00e4r okej; men om det inte \u00e4r det kommer de att se Helvetica eller Georgia, och om det misslyckas kommer de att se det serif och sans-serif-typsnitt som deras webbl\u00e4sare kan ladda.<\/p>\n<h2 id=\"host\">Hosta dina egna typsnitt i WordPress<\/h2>\n<p>Vissa utvecklare f\u00f6redrar att inte anv\u00e4nda webbtypsnitt utan ist\u00e4llet att vara hosta typsnitt p\u00e5 sina egna servrar och du kan vara en av dem.<\/p>\n<p>Detta kan vara av ett eller flera sk\u00e4l, inklusive <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-sakerhet\/\">s\u00e4kerhet<\/a>, <a href=\"https:\/\/kinsta.com\/blog\/wordpress-performance-plugins\/\">prestanda<\/a> eller budget.<\/p>\n<p>Om du \u00e4r orolig f\u00f6r prestanda kan du optimera prestanda f\u00f6r dina webbtypsnitt p\u00e5 ett antal s\u00e4tt, som vi tar upp senare i det h\u00e4r inl\u00e4gget. Men om du har beslutat att g\u00e5 ner den lokala v\u00e4gen, m\u00e5ste du veta hur man g\u00f6r det.<\/p>\n<h3>Varf\u00f6r hosta dina egna typsnitt?<\/h3>\n<p>Att anv\u00e4nda webbtypsnitt \u00e4r ofta l\u00e4ttare och kan ge dig mer flexibilitet samt tar upp mindre utrymme p\u00e5 din server. Men det betyder inte att det inte finns tillf\u00e4llen n\u00e4r <a href=\"https:\/\/kinsta.com\/blog\/local-fonts\/\">lokalt hostade typsnitt<\/a> kanske inte \u00e4r mer l\u00e4mpliga.<\/p>\n<p>Sk\u00e4l till att du kanske vill vara hosta typsnitt lokalt inkluderar:<\/p>\n<p>Du kan uppt\u00e4cka att du kan komma runt n\u00e5gra av dessa problem<\/p>\n<ul>\n<li>Du kanske f\u00f6redrar att inte dra in resurser fr\u00e5n tredjepartsleverant\u00f6rer av s\u00e4kerhetssk\u00e4l, att veta att din egen webbplats s\u00e4kerhet kontrolleras av dig.<\/li>\n<li>Det kan h\u00e4nda att anv\u00e4ndningen av en <a href=\"https:\/\/kinsta.com\/blog\/third-party-performance\/\">tredjeparts tj\u00e4nst p\u00e5verkar webbplatsens prestanda<\/a>.<\/li>\n<li>Du kanske har k\u00f6pt en typsnittsfil och vill anv\u00e4nda den. Se till att din licens inkluderar webbplatsanv\u00e4ndning samt anv\u00e4ndning i tryckt material.<\/li>\n<li>Din webbplats kan vara hostad lokalt, till exempel p\u00e5 ett intran\u00e4t, och anv\u00e4ndarna har inte tillg\u00e5ng till webbtypsnitt n\u00e4r de anv\u00e4nder den.<\/li>\n<\/ul>\n<h3>Var hittar du typsnitt du kan hosta lokalt<\/h3>\n<p>M\u00e5nga webbtypsnitt kan ocks\u00e5 laddas ner f\u00f6r anv\u00e4ndning som lokalt hostade typsnitt men du m\u00e5ste kontrollera att detta \u00e4r till\u00e5tet av licensen. N\u00e4r det g\u00e4ller Google Fonts \u00e4r det till\u00e5tet.<\/p>\n<p>Det finns ocks\u00e5 typsnitt som inte \u00e4r tillg\u00e4ngliga som webbtypsnitt som du kan ladda ner och hosta sj\u00e4lv. Alla typsnittsfiler som du kan ladda ner till din dator kan ocks\u00e5 laddas upp till din webbplats och lagras d\u00e4r. Om du beh\u00f6ver anv\u00e4nda ett typsnitt som inte \u00e4r tillg\u00e4ngligt som ett webbtypsnitt f\u00f6r att knyta samman med ditt <a href=\"https:\/\/kinsta.com\/blog\/wordpress-site-examples\/\">varum\u00e4rke<\/a>, kommer det att vara l\u00f6sningen men se till att din licens till\u00e5ter det.<\/p>\n<h3>S\u00e5 h\u00e4r l\u00e4gger du till lokalt hostat typsnitt till din WordPress-webbplats<\/h3>\n<p>S\u00e5 du vet att du vill hosta dina typsnitt lokalt, hur ska du konfigurera det?<\/p>\n<p>Processen skiljer sig fr\u00e5n att anv\u00e4nda webbtypsnitt. Du m\u00e5ste <a href=\"https:\/\/kinsta.com\/se\/blog\/okar-maxstorleken-pa-uppladdningar-i-wordpress\/\">ladda upp filen<\/a> (-filerna) till din webbplats och du l\u00e4nkar till dem i din stilmall utan att beh\u00f6va k\u00f6a dem i din funktionsfil.<\/p>\n<h4>Ladda ner och konvertera typsnitt<\/h4>\n<p>B\u00f6rja med att ladda ner de typsnitt du vill anv\u00e4nda. I Google Fonts kan du g\u00f6ra detta genom att klicka p\u00e5 nedladdningsikonen n\u00e4r du visar typsnittet i ditt bibliotek.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/hamta-typsnitt-google-fonts-1.jpg\" alt=\"H\u00e4mta typsnitt fr\u00e5n Google Fonts\" width=\"1500\" height=\"790\"><figcaption class=\"wp-caption-text\">H\u00e4mta typsnitt fr\u00e5n Google Fonts<\/figcaption><\/figure>\n<p>Packa upp typsnittsfilen p\u00e5 din dator och ta bort alla typsnittsvikter som du inte beh\u00f6ver anv\u00e4nda p\u00e5 din webbplats: det finns ingen anledning att ladda upp filer som du inte kommer att anv\u00e4nda.<\/p>\n<p>F\u00f6r att anv\u00e4ndas p\u00e5 din webbplats, m\u00e5ste filerna vara i .woff-format. Om de inte \u00e4r det (de kommer inte att vara det om du fick dem fr\u00e5n Google fonts) kan du anv\u00e4nda en tj\u00e4nst som <a href=\"https:\/\/convertio.co\/ttf-woff\/\">Convertio<\/a> f\u00f6r att konvertera dem.<\/p>\n<h4>Ladda upp typsnitt till ditt tema<\/h4>\n<p>Ladda nu upp typsnittsfilen till <a href=\"https:\/\/kinsta.com\/blog\/wordpress-free-vs-paid-themes\/\">ditt tema<\/a>, i <strong>wp-content\/themes\/themename<\/strong>, d\u00e4r <strong>themename<\/strong> \u00e4r mappen f\u00f6r ditt tema. Det \u00e4r en bra id\u00e9 att l\u00e4gga typsnittsfiler i sin egen mapp i temat, till exempel en <strong>fonts<\/strong>-mapp.<\/p>\n<p>Om du arbetar med ett tredjepartstema, <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-barntema\/\">skapa ett barntema<\/a> f\u00f6r dina typsnittsfiler och din stilmall.<\/p>\n<p>N\u00e4r du har gjort det m\u00e5ste du l\u00e4gga till typsnittet i din stilmall.<\/p>\n<h4>L\u00e4gga till typsnitt i CSS<\/h4>\n<p>\u00d6ppna temats stilmall.<\/p>\n<p>L\u00e4gg till koden s\u00e5 h\u00e4r, ers\u00e4tt de typsnitt jag har anv\u00e4nt med dina egna:<\/p>\n<pre><code class=\"language-css\">@font-face {\n font-family: 'Raleway';\n src: url( \"fonts\/Raleway-Medium.ttf\") format('woff'); \/* medium *\/\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'Raleway';\n src: url( \"fonts\/Raleway-Bold.ttf\") format('woff'); \/* medium *\/\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'Merriweather';\n src: url( \"fonts\/Merriweather.ttf\") format('woff'); \/* medium *\/\n font-weight: normal;\n font-style: normal;\n}<\/code><\/pre>\n<p>L\u00e4gg till mer om du beh\u00f6ver. Observera att om du vill anv\u00e4nda fet, kursiv, etc. varianter av ditt typsnitt, du m\u00e5ste deklarera var och en med <code>@fontface<\/code> och sedan <a href=\"https:\/\/css-tricks.com\/whats-deal-declaring-font-properties-font-face\/\">ange vikt eller stil f\u00f6r varje<\/a>, som jag har gjort ovan med Raleway f\u00f6r feta och normala vikter.<\/p>\n<p>L\u00e4gg nu till styling f\u00f6r dina element, som du skulle n\u00e4r du anv\u00e4nder webbtypsnitt:<\/p>\n<pre><code class=\"language-css\">body {\n font-family: 'Raleway', Helvetica, sans-serif;\n src: url( \"\/fonts\/Raleway-Medium.ttf\" );\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', Georgia, serif;\n}<\/code><\/pre>\n<p>Ditt lokalt hostade typsnitt kommer nu att fungera med ditt tema.<\/p>\n<h2 id=\"change\">S\u00e5 h\u00e4r \u00e4ndrar du typsnitt i WordPress<\/h2>\n<p>Nu vet du hur man installerar typsnitt i din WordPress-webbplats p\u00e5 ett av tv\u00e5 s\u00e4tt. Men hur redigerar du dem? Vad s\u00e4gs om att \u00e4ndra dem?<\/p>\n<p>Du kan redigera dina typsnitt p\u00e5 ett av tre s\u00e4tt: via Customizer, i inl\u00e4ggs- eller sidredigeringssk\u00e4rmen eller med hj\u00e4lp av CSS.<\/p>\n<p>L\u00e5t oss titta p\u00e5 var och en av dessa alternativ f\u00f6r att \u00e4ndra typsnitt, f\u00e4rg och storlek.<\/p>\n<h3>S\u00e5 \u00e4ndrar du typsnitt i WordPress<\/h3>\n<p>L\u00e5t oss se hur vi kan g\u00f6ra det b\u00e5de om du anv\u00e4nder Blockredigeraren eller den klassiska redigeraren.<\/p>\n<h4>\u00c4ndra typsnitt i Block-redigeraren (Gutenberg)<\/h4>\n<p>Om du anv\u00e4nder en ny version av WordPress med <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-gutenberg-redigeraren\/\">Gutenberg-redigeraren<\/a> kan du \u00e4ndra stilen p\u00e5 din text n\u00e4r du redigerar den i ditt inl\u00e4gg eller sida.<\/p>\n<p>V\u00e4lj det block du vill redigera och en stylingmeny visas ovanf\u00f6r det.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/Gutenberg-blockstyling-1.jpg\" alt=\"Gutenberg blockstyling\" width=\"1500\" height=\"567\"><figcaption class=\"wp-caption-text\">Gutenberg blockstyling<\/figcaption><\/figure>\n<p>Markera den text du vill redigera och klicka sedan p\u00e5 ikonerna f\u00f6r att g\u00f6ra den fet eller kursiv. Om du klickar p\u00e5 pilen bredvid dem ser du att du ocks\u00e5 kan v\u00e4lja genomstrykning.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/genomstrykning-gutenberg1.jpg\" alt=\"Genomstrykning i Gutenberg\" width=\"1500\" height=\"639\"><figcaption class=\"wp-caption-text\">Genomstrykning i Gutenberg<\/figcaption><\/figure>\n<h4>\u00c4ndra typsnitt i den klassiska redigeraren<\/h4>\n<p>Om du k\u00f6r en \u00e4ldre version av WordPress eller om du har <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/classic-editor\/\">Classic Editor<\/a>-pluginet installerat, kan du ocks\u00e5 redigera typsnitt. (Om du inte vill ha Gutenberg-redigeraren \u00e4r det b\u00e4ttre att <a href=\"https:\/\/kinsta.com\/docs\/support\/scope-of-support\/managed-wordpress-scope-of-support\/\">uppdatera WordPress<\/a> och <a href=\"https:\/\/kinsta.com\/se\/blog\/inaktiverar-gutenberg-wordpress-redigerare\/\">inaktivera Gutenberg<\/a>.)<\/p>\n<p>Den klassiska redigeraren inneh\u00e5ller ett verktygsf\u00e4lt ovanf\u00f6r huvudredigeringsf\u00f6nstret d\u00e4r du kan \u00e4ndra textens stilar. Om du klickar p\u00e5 V\u00e4xla verktygsf\u00e4lt-ikonen till h\u00f6ger, kan du komma \u00e5t fler alternativ, inklusive genomstrykning.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/classic-editor-verktygsfalt.jpg\" alt=\"Classic Editor styling-verktygsf\u00e4lt\" width=\"1500\" height=\"727\"><figcaption class=\"wp-caption-text\">Classic Editor styling-verktygsf\u00e4lt<\/figcaption><\/figure>\n<h4>\u00c4ndra typsnitt i Customizer<\/h4>\n<p>Om du vill \u00e4ndra typsnittsstilen f\u00f6r ett visst element kan du g\u00f6ra detta genom att l\u00e4gga till manuell CSS till Customizer.<\/p>\n<p>\u00d6ppna Customizer och klicka p\u00e5 <strong>Ytterligare CSS<\/strong>. Detta \u00f6ppnar en sk\u00e4rm d\u00e4r du kan skriva in CSS.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/ytterligare-css-i-customizer1.jpg\" alt=\"Ytterligare CSS i Customizer\" width=\"1500\" height=\"879\"><figcaption class=\"wp-caption-text\">Ytterligare CSS i Customizer<\/figcaption><\/figure>\n<p>Nu kan du skriva in CSS f\u00f6r dina typsnitt i rutan. S\u00e5 om du ville \u00e4ndra alla h1- och h2-element till kursiv, skulle du l\u00e4gga till denna CSS:<\/p>\n<pre><code class=\"language-css\">h1, h2 {\n font-style: italics;\n}<\/code><\/pre>\n<h4>\u00c4ndra typsnitt i din stilmall<\/h4>\n<p>Om du \u00e4r bekv\u00e4m med att l\u00e4gga till kod i din stilmall, \u00e4r detta ett b\u00e4ttre s\u00e4tt att g\u00f6ra det.<\/p>\n<p>Om du anv\u00e4nder ett tredjeparts tema, <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-barntema\/\">skapa ett barntema<\/a> f\u00f6r din egen styling annars kommer eventuella \u00e4ndringar du g\u00f6r att g\u00e5 f\u00f6rlorade n\u00e4r du uppdaterar temat. Du m\u00e5ste skapa en stilmall i barntemat f\u00f6r att tala om f\u00f6r WordPress att det \u00e4r ett barntema: det \u00e4r d\u00e4r du l\u00e4gger din nya typsnitt-styling.<\/p>\n<p>Om du anv\u00e4nder ditt eget tema kan du redigera och \u00e4ndra CSS i din egen stilmall. Filen \u00e4r <strong>style.css<\/strong> och du hittar den i din temamapp i <strong>wp-content\/themes<\/strong>.<\/p>\n<p>L\u00e4gg till eventuell typsnitt-styling i slutet av din stilmall s\u00e5 att den inte skrivs \u00f6ver av n\u00e5got som redan \u00e4r d\u00e4r. Eller \u00e4nnu b\u00e4ttre, ta bort och skriv \u00f6ver all befintlig typsnitt-styling, om du inte vill beh\u00e5lla den.<\/p>\n<p>\u00c4ndra vikten p\u00e5 ett element med font-weight:<\/p>\n<pre><code class=\"language-css\">span.featured {\n font-weight = bold;\n}<\/code><\/pre>\n<p>\u00c4ndra stilen p\u00e5 ett element med font-style:<\/p>\n<pre><code class=\"language-css\">span.featured {\n font-style = italic;\n}<\/code><\/pre>\n<p>\u00c4ndra justeringen med text-alignment:<\/p>\n<pre><code class=\"language-css\">span.featured {\n text-alignment: center;\n}<\/code><\/pre>\n<h3>S\u00e5 h\u00e4r \u00e4ndrar du teckenf\u00e4rger i WordPress<\/h3>\n<p>En annan \u00e4ndring du kanske vill g\u00f6ra \u00e4r att \u00e4ndra f\u00e4rgen p\u00e5 viss text p\u00e5 din webbplats. Akta dig f\u00f6r att g\u00e5 till \u00f6verdrift med detta: ditt tema har utformats med f\u00e4rger som fungerar bra tillsammans och om du l\u00e4gger till f\u00f6r m\u00e5nga f\u00e4rger, kan det se skrikigt och oprofessionellt ut.<\/p>\n<h4>\u00c4ndra teckenf\u00e4rger i Gutenberg<\/h4>\n<p>Gutenbergs textblock l\u00e5ter dig redigera teckenf\u00e4rg och bakgrund. F\u00f6r att g\u00f6ra detta, \u00f6ppna det block du vill \u00e4ndra och klicka p\u00e5 fliken <strong>F\u00e4rginst\u00e4llningar<\/strong> i <strong>Blocksektionen<\/strong> till h\u00f6ger p\u00e5 sk\u00e4rmen.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/fliken-farginstallningar.jpg\" alt=\"Fliken F\u00e4rginst\u00e4llningar\" width=\"1500\" height=\"667\"><figcaption class=\"wp-caption-text\">Fliken F\u00e4rginst\u00e4llningar<\/figcaption><\/figure>\n<p>H\u00e4rifr\u00e5n kan du redigera bakgrundsf\u00e4rgen och teckenf\u00e4rgen f\u00f6r ett textblock.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/anpassade-farger-i-ett-block1.jpg\" alt=\"Anpassade f\u00e4rger i ett block\" width=\"1500\" height=\"756\"><figcaption class=\"wp-caption-text\">Anpassade f\u00e4rger i ett block<\/figcaption><\/figure>\n<p>Observera att WordPress kommer att varna dig om kombinationen av f\u00e4rger du anv\u00e4nder kommer att vara d\u00e5ligt f\u00f6r tillg\u00e4nglighet, till exempel i exemplet jag har anv\u00e4nt ovan. Undvik frestelsen att g\u00e5 till \u00f6verdrift med dina f\u00e4rger &#8211; trots allt valde du ditt tema eftersom dess f\u00e4rgdesign var l\u00e4mplig f\u00f6r din webbplats, och att l\u00e4gga till m\u00e5nga fler f\u00e4rger kan f\u00e5 det att se skrikigt ut.<\/p>\n<p>Om du klickar p\u00e5 fliken <strong>Avancerat<\/strong> under fliken <strong>F\u00e4rginst\u00e4llningar<\/strong> kan du ocks\u00e5 l\u00e4gga till en klass i det blocket, som du sedan kan styla i Customizer eller din stilmall. S\u00e5 till exempel, om du lagt till en klass av <code>.featured<\/code> till ditt block, kan du sedan styla den med den klassen.<\/p>\n<h4>\u00c4ndra teckenf\u00e4rg i den klassiska redigeraren<\/h4>\n<p>Den klassiska redigerarens verktygsf\u00e4lt l\u00e5ter dig \u00e4ndra f\u00e4rgen p\u00e5 vilken text du \u00e4n v\u00e4ljer. S\u00e5 du kan v\u00e4lja ett enskilt ord och \u00e4ndra dess f\u00e4rg. Nedan har jag gjort en mening r\u00f6d.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/klassiska-editor-andra-farger-1.jpg\" alt=\"\u00c4ndra f\u00e4rger i den klassiska redigeraren\" width=\"1500\" height=\"716\"><figcaption class=\"wp-caption-text\">\u00c4ndra f\u00e4rger i den klassiska redigeraren<\/figcaption><\/figure>\n<p>Medan detta, i teorin, ger dig gott om flexibilitet, se till att inte \u00f6veranv\u00e4nda det. Om du b\u00f6rjar l\u00e4gga till m\u00e5nga fler f\u00e4rger i din text kan det leda till en webbplats som \u00e4r sv\u00e5r att l\u00e4sa och \u00e4r d\u00e5lig f\u00f6r tillg\u00e4nglighet.<\/p>\n<h4>\u00c4ndra teckenf\u00e4rg i Customizer<\/h4>\n<p>Om ditt tema inneh\u00e5ller alternativ f\u00f6r att \u00e4ndra <a href=\"https:\/\/kinsta.com\/se\/blog\/webbplats-fargscheman\/\">f\u00e4rgschemat p\u00e5 din webbplats<\/a> \u00e4r detta det b\u00e4sta st\u00e4llet att g\u00f6ra det.<\/p>\n<p>Till exempel, p\u00e5 webbplatsen nedan anv\u00e4nder jag ett tema som l\u00e5ter mig v\u00e4lja ett nytt f\u00e4rgschema f\u00f6r hela temat. Detta bidrar till att s\u00e4kerst\u00e4lla att de nya f\u00e4rgerna fungerar bra tillsammans och \u00e4r sammanh\u00e4ngande.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/redigera-fargschemat-customizer-1-1.jpg\" alt=\"Redigera f\u00e4rgschemat i Customizer\" width=\"1500\" height=\"815\"><figcaption class=\"wp-caption-text\">Redigera f\u00e4rgschemat i Customizer<\/figcaption><\/figure>\n<p>Alternativen f\u00f6r detta kommer att variera beroende p\u00e5 ditt tema &#8211; med vissa teman kan du v\u00e4lja rubriker, l\u00e4nkar och andra element och \u00e4ndra deras f\u00e4rg.<\/p>\n<p>Om du vill rikta in dig p\u00e5 specifika element f\u00f6r att \u00e4ndra dess f\u00e4rg men det inte \u00e4r ett alternativ med ditt tema, kan du l\u00e4gga till CSS i Customizer f\u00f6r att g\u00f6ra detta.<\/p>\n<p>V\u00e4lj <strong>Anpassa &gt; Ytterligare CSS<\/strong> och skriv din CSS i textrutan.<\/p>\n<p>Om du till exempel vill \u00e4ndra f\u00e4rgen p\u00e5 dina <code>h1<\/code>-rubriker skriver du detta:<\/p>\n<pre><code class=\"language-css\">h1 {\n color: #564534;\n}<\/code><\/pre>\n<p>Om det inte fungerar kan du beh\u00f6va l\u00e4gga till mer specifik CSS. I mitt tema kodas f\u00e4rgen f\u00f6r webbplatsens rubrikl\u00e4nk med <code>#site-title<\/code>-ID, s\u00e5 jag m\u00e5ste l\u00e4gga till denna CSS:<\/p>\n<pre><code class=\"language-css\">#site-title a {\n color: #564534;\n}<\/code><\/pre>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/ytterligare-css-farg.jpg\" alt=\"Ytterligare CSS - f\u00e4rg\" width=\"1500\" height=\"818\"><figcaption class=\"wp-caption-text\">Ytterligare CSS &#8211; f\u00e4rg<\/figcaption><\/figure>\n<p>Byt ut den f\u00e4rg jag har anv\u00e4nt ovan med din egen f\u00e4rg.<\/p>\n<p>Klicka sedan p\u00e5 knappen <strong>Publicera<\/strong> n\u00e4r du \u00e4r n\u00f6jd med dina inst\u00e4llningar.<\/p>\n<h4>\u00c4ndra teckenf\u00e4rger i din stilmall<\/h4>\n<p>Som med typsnittsstilar kan du ocks\u00e5 redigera temats stilmall (eller skapa ett barntema) f\u00f6r att \u00e4ndra teckenf\u00e4rgerna.<\/p>\n<p>\u00c4ndra f\u00e4rgen med f\u00e4rg. Nedan \u00e4ndrar jag huvudf\u00e4rgen f\u00f6r min webbplats text, med hj\u00e4lp av <code>body<\/code>-elementet:<\/p>\n<pre><code class=\"language-css\">body {\n color = #222222;\n}<\/code><\/pre>\n<p>Se till att du \u00e5sidos\u00e4tter all befintlig styling f\u00f6r samma element och att du ocks\u00e5 stylar eventuella element som \u00e4rver den stylingen om du vill att de ska ha en annan f\u00e4rg. All text kommer att \u00e4rva f\u00e4rgen p\u00e5 <strong>body<\/strong>-elementet om den inte har sin egen styling.<\/p>\n<h3>\u00c4ndra teckenstorlekar i WordPress<\/h3>\n<p>Av tillg\u00e4nglighetssk\u00e4l kanske du best\u00e4mmer att du vill att dina typsnitt ska vara st\u00f6rre \u00e4n de \u00e4r som standard i ditt tema. Eller s\u00e5 kan du best\u00e4mma att rubrikerna i dina widgetomr\u00e5den \u00e4r f\u00f6r sm\u00e5, till exempel.<\/p>\n<h4>\u00c4ndra teckenstorlek i Gutenberg<\/h4>\n<p>Med Gutenberg-redigeraren kan du \u00e4ndra storleken p\u00e5 texten i varje block.<\/p>\n<p>V\u00e4lj blocket och klicka sedan p\u00e5 fliken Textinst\u00e4llningar i Block-menyn till h\u00f6ger p\u00e5 sk\u00e4rmen. Du kan g\u00f6ra texten i blocket mindre eller st\u00f6rre, som visas nedan.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/redigera-teckenstorlek-i-gutenberg.jpg\" alt=\"Redigera teckenstorlek i Gutenberg\" width=\"1500\" height=\"672\"><figcaption class=\"wp-caption-text\">Redigera teckenstorlek i Gutenberg<\/figcaption><\/figure>\n<p>Akta dig f\u00f6r att g\u00f6ra detta f\u00f6r mycket: om alla stycken p\u00e5 din sida \u00e4r olika storlekar, kommer det att se osammanh\u00e4ngande ut och vara sv\u00e5rt att l\u00e4sa.<\/p>\n<h4>\u00c4ndra teckenstorlek i den Klassiska redigeraren<\/h4>\n<p>Den klassiska redigeraren ger dig inte m\u00f6jlighet att v\u00e4lja specifik text och \u00e4ndra dess storlek: s\u00e5 om du beh\u00f6ver den h\u00e4r funktionen m\u00e5ste du uppgradera till Gutenberg. Tyv\u00e4rr!<\/p>\n<h4>\u00c4ndra teckenstorlek i Customizer<\/h4>\n<p>Beroende p\u00e5 ditt tema, kan du ha en m\u00f6jlighet att \u00e4ndra teckenstorlekar i Customizer, antingen \u00e4ndra teckenstorlek f\u00f6r hela webbplatsen eller rikta in dig p\u00e5 rubriker och br\u00f6dtext.<\/p>\n<p>Om ditt tema inte inneh\u00e5ller ett anpassningsalternativ f\u00f6r att \u00e4ndra teckenstorlekar, kan du anv\u00e4nda det alternativet <strong>Ytterligare CCS<\/strong>. V\u00e4lj <strong>Anpassa &gt; Ytterligare CSS<\/strong> och skriv din CSS i textrutan.<\/p>\n<p>Nedan g\u00f6r jag rubrikerna i widgetomr\u00e5dena st\u00f6rre, med denna CSS:<\/p>\n<pre><code class=\"language-css\">h2.widget-title {\n\u00a0font-size: 3em;\n}<\/code><\/pre>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/10\/styla-teckenstorlek-med-ytterligare-CSS.jpg\" alt=\"Styla teckenstorlek med ytterligare CSS\" width=\"1500\" height=\"816\"><figcaption class=\"wp-caption-text\">Styla teckenstorlek med ytterligare CSS<\/figcaption><\/figure>\n<p>Kanske \u00e4r det lite f\u00f6r stort, men det visar id\u00e9n.<\/p>\n<h4>\u00c4ndra teckenstorlek i din stilmall<\/h4>\n<p>Att \u00e4ndra storleken p\u00e5 typsnitt i din stilmall fungerar p\u00e5 ett liknande s\u00e4tt som att \u00e4ndra vilken annan styling f\u00f6r dina typsnitt.<\/p>\n<p>Om du vill \u00e4ndra storleken p\u00e5 all text p\u00e5 din webbplats, skulle du anv\u00e4nda <code>body<\/code>-elementet:<\/p>\n<pre><code class=\"language-css\">body {\n font-size: 14px;\n}<\/code><\/pre>\n<p>F\u00f6r <code>body<\/code>-elementet anv\u00e4nder du pixlar, men f\u00f6r andra element anv\u00e4nder du em s\u00e5 storleken \u00e4r i f\u00f6rh\u00e5llande till storleken p\u00e5 <code>body<\/code>-elementet.<\/p>\n<pre><code class=\"language-css\">h1,\n#site-title {\n font-size: 2em;\n}<\/code><\/pre>\n<p>Kom ih\u00e5g om du ska g\u00f6ra \u00e4ndringar i typsnitt i ditt temas stilmall, testa det p\u00e5 en utvecklings eller <a href=\"https:\/\/kinsta.com\/docs\/wordpress-hosting\/staging-environment\/\">stagingsajt<\/a> f\u00f6rst, s\u00e5 att du inte riskerar att f\u00f6rst\u00f6ra din live-webbplats.<\/p>\n<h2 id=\"optimize\">S\u00e5 optimerar du typsnitt i WordPress<\/h2>\n<p>Oavsett om du anv\u00e4nder webbtypsnitt eller lokalt hostade typsnitt, \u00e4r det vettigt att g\u00f6ra allt du kan f\u00f6r att optimera dina typsnitt.<\/p>\n<p>H\u00e4r ska jag ge dig n\u00e5gra tips om att optimera dina typsnitt, b\u00e5de f\u00f6r hastighet och f\u00f6r design.<\/p>\n<h3>Optimera typsnitt f\u00f6r prestanda<\/h3>\n<p>Om du anv\u00e4nder webbtypsnitt p\u00e5 din webbplats vill du g\u00f6ra allt du kan f\u00f6r att se till att de levereras till dina sidor s\u00e5 fort som m\u00f6jligt och att det faktum att de \u00e4r hostade n\u00e5gon annanstans inte saktar ner saker och ting.<\/p>\n<ul>\n<li>Anv\u00e4nd cachning f\u00f6r att s\u00e4kerst\u00e4lla att sidor inte beh\u00f6ver byggas om varje g\u00e5ng de laddas. Kinstas hostingplaner kommer med <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-cache\/\">inbyggd cachning<\/a>.<\/li>\n<li>Anv\u00e4nd en leverant\u00f6r av webbtypsnitt som levererar typsnitt med hj\u00e4lp av ett <a href=\"https:\/\/kinsta.com\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#kinstas-cdn\">inneh\u00e5llsleveransn\u00e4tverk<\/a> eller CDN. Google Fonts g\u00f6r detta och det p\u00e5skyndar leveransen av typsnitt.<\/li>\n<li>Anv\u00e4nd bara de typsnitt du beh\u00f6ver. K\u00f6a inte variationer av typsnitt (vikter, stilar) som du inte kommer att anv\u00e4nda i din stilmall. Om du beh\u00f6ver dem vid ett senare tillf\u00e4lle, kan du alltid l\u00e4gga till dem d\u00e5.<\/li>\n<li>Om du anv\u00e4nder webbtypsnitt, se till att du k\u00f6ar dem ordentligt. Anv\u00e4nd inte en @import-rad i din stilmall, \u00e4ven om detta \u00e4r vad din webbtypsnitts-leverant\u00f6r s\u00e4ger att du ska g\u00f6ra.<\/li>\n<li>N\u00e4r du l\u00e4gger till CSS manuellt l\u00e4gger du till det i temats stilmall och inte i avsnittet &lt;head&gt; i din header.php-fil. Detta \u00e4r en anledning till att det \u00e4r b\u00e4ttre praxis att koda CSS manuellt i ditt tema i st\u00e4llet f\u00f6r att anv\u00e4nda Customizer eller ett block, som b\u00e5da kommer att l\u00e4gga till inline-CSS till sidan ist\u00e4llet f\u00f6r att l\u00e4gga till den i stilmallen.<\/li>\n<li>\u00d6verv\u00e4g att anv\u00e4nda CSS inlining f\u00f6r att minska sidladdningstider med n\u00e5gra extra millisekunder. Det h\u00e4r \u00e4r en process som anv\u00e4nder base64-kodning f\u00f6r att l\u00e4gga till CSS fr\u00e5n din stilmall till sidan innan du laddar den, vilket g\u00f6r att webbl\u00e4saren inte beh\u00f6ver ladda extra filer. Det kan tyckas kontraintuitivt med tanke p\u00e5 r\u00e5den ovan om att inte skriva inline CSS, men det fungerar fortfarande fr\u00e5n en separat CSS-fil och betyder inte att manuellt koda inline CSS. Om du laddar flera typsnitt <a href=\"https:\/\/www.bramstein.com\/writing\/web-font-anti-patterns-inlining.html\">kan inlining p\u00e5skynda din webbplats lite<\/a>.<\/li>\n<li>Anv\u00e4nd <a href=\"https:\/\/kinsta.com\/blog\/combine-external-css\/#combine-external-css-in-wordpress\">minifiering<\/a> f\u00f6r att minska storleken p\u00e5 din stilmall. Som <a href=\"https:\/\/kinsta.com\/se\/priser\/?plan=visits-business1\">Kinsta-kund<\/a> g\u00f6r du detta enkelt genom att dra f\u00f6rdel av <a href=\"https:\/\/kinsta.com\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#code-minification-1\">kodminifieringsfunktionen<\/a> som finns direkt i <a href=\"https:\/\/kinsta.com\/se\/mykinsta\/\">MyKinsta-instrumentpanelen<\/a>. Detta g\u00f6r att kunderna kan aktivera automatisk CSS- och JavaScript-minifiering med ett enkelt klick, vilket snabbar upp deras webbplatser utan manuell anstr\u00e4ngning.<\/li>\n<li>Om du hostar typsnitt lokalt, bara ladda upp filerna f\u00f6r de typsnitt och typsnittsvikter och stilar du beh\u00f6ver. L\u00e4gg bara till de variationer som du beh\u00f6ver med @font-face-deklarationen.<\/li>\n<li>\u00d6verv\u00e4g att anv\u00e4nda ett CDN f\u00f6r att hosta dina egna typsnitt ist\u00e4llet f\u00f6r att hosta dem p\u00e5 din egen server.<\/li>\n<li>N\u00e4r du hostar dina egna typsnitt, inkludera ytterligare format: woff2, woff, ttf och eot. Webbl\u00e4saren kan sedan v\u00e4lja den version som kommer att ladda snabbast.<\/li>\n<li>Om du anv\u00e4nder ett annat typsnitt f\u00f6r din webbplatstitel, k\u00f6a bara de tecken du beh\u00f6ver ist\u00e4llet f\u00f6r hela typsnittsbiblioteket.<\/li>\n<\/ul>\n<p>S\u00e5 om din webbplatstitel \u00e4r Kinsta, kan du g\u00f6ra en liten prestandaf\u00f6rb\u00e4ttring genom att \u00e4ndra stilmallen s\u00e5 h\u00e4r:<\/p>\n<pre><code class=\"language-php\">function kinsta_add_title_font() {\n wp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Raleway&text=\"kinsta');\n wp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );<\/code><\/pre>\n<h3>Optimera typsnitt f\u00f6r design<\/h3>\n<p>F\u00f6rutom att optimera prestandan hos dina typsnitt \u00e4r det ocks\u00e5 bra att se till att de \u00e4r visuellt optimerade: att de passar bra med designen av din webbplats och med ditt offlinematerial.<\/p>\n<p>Detta \u00e4r s\u00e4rskilt fallet om du anv\u00e4nder ett plugin eller ett barntema f\u00f6r att l\u00e4gga till extra typsnitt ovanp\u00e5 de som redan medf\u00f6ljer ditt tema. Det finns en risk f\u00f6r att ditt tema ser r\u00f6rigt om det finns f\u00f6r m\u00e5nga typsnitt i alltf\u00f6r m\u00e5nga f\u00e4rger och stilar.<\/p>\n<p>T\u00e4nk p\u00e5 f\u00f6ljande innan du l\u00e4gger till extra typsnitt p\u00e5 din webbplats:<\/p>\n<ul>\n<li>\u00c4r de nya typsnitten f\u00f6renliga med dina befintliga typsnitt? F\u00f6rmedlar de en liknande stil eller st\u00e4mning?<\/li>\n<li>Om du beh\u00f6ver matcha ett typsnitt som har anv\u00e4nts f\u00f6r utskrivet material men inte kan anv\u00e4nda samma typsnitt som ett webbtypsnitt, f\u00f6rs\u00f6k att hitta s\u00e5 n\u00e4ra en matchning som m\u00f6jligt p\u00e5 Google Fonts.<\/li>\n<li>\u00c4r de typsnitt du har valt f\u00f6renliga med ditt varum\u00e4rke? Om du driver ett seri\u00f6st f\u00f6retag vill du inte anv\u00e4nda Comic Sans (i sj\u00e4lva verket, vilken typ av webbplats du \u00e4n driver, anv\u00e4nd inte Comic Sans).<\/li>\n<li>Om du \u00e4ndrar f\u00e4rgerna p\u00e5 dina typsnitt, f\u00f6rs\u00f6k att anv\u00e4nda f\u00e4rger som redan finns i designen av ditt tema eller som passar v\u00e4l med dem. Att l\u00e4gga till alltf\u00f6r m\u00e5nga f\u00e4rger kommer att g\u00f6ra att din webbplats ser skrikig och oprofessionell ut.<\/li>\n<li>Om du f\u00f6rs\u00f6ker v\u00e4lja ut ett par typsnitt p\u00e5 Google Fonts, f\u00f6rs\u00f6k anv\u00e4nda en tj\u00e4nst som <a href=\"https:\/\/fontpair.co\/\">fontpair<\/a> f\u00f6r att hitta tv\u00e5 som fungerar bra tillsammans.<\/li>\n<\/ul>\n<p>De typsnitt du anv\u00e4nder i din design kommer att ha en inverkan p\u00e5 det intryck bes\u00f6kare f\u00e5r n\u00e4r de n\u00e5r din webbplats. Se till att du har \u00f6verv\u00e4gt detta och valt typsnitt som kommer att f\u00f6rst\u00e4rka ditt varum\u00e4rke.<\/p>\n<h3><strong>Arbeta med variabla typsnitt<\/strong><\/h3>\n<p><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/typography\/variable-fonts\/\">Variabla typsnitt<\/a> \u00e4r en ny typ av typsnitt som g\u00f6r det mer effektivt att l\u00e4gga till fler typsnitt p\u00e5 din webbplats.<\/p>\n<p>De till\u00e5ter mer information att lagras i en typsnittsfil, s\u00e5 att om du vill ha variationer av ditt typsnitt (fet, kursiv, etc.), beh\u00f6ver du inte ladda flera typsnittsfiler, utan kan bara ladda den enda.<\/p>\n<p>F\u00f6r ett typsnitt med flera typsnittsvikter, och stilar kan detta spara mycket filutrymme och g\u00f6ra processen att k\u00f6a typsnittet eller l\u00e4gga till det via @fontface l\u00e4ttare ocks\u00e5.<\/p>\n<p>Variabla typsnitt st\u00f6ds i de senaste versionerna av Chrome, Edge, Firefox och Safari, men inte av \u00e4ldre webbl\u00e4sare; s\u00e5 om du anv\u00e4nder dem beh\u00f6ver du en reserv. Och det finns inte m\u00e5nga variabla typsnitt tillg\u00e4ngliga \u00e4nnu. Google Fonts inneh\u00e5ller inga, men Google st\u00f6der specifikationen, s\u00e5 det \u00e4r troligt att de kommer att l\u00e4ggas till \u00f6ver tiden.<\/p>\n<p>Typsnittsutvecklare arbetar med att <a href=\"https:\/\/www.monotype.com\/resources\/articles\/variable-fonts-making-the-promise-a-reality\/\">skapa fler variabla typsnitt och f\u00f6rb\u00e4ttra deras tillf\u00f6rlitlighet<\/a>, s\u00e5 det \u00e4r v\u00e4rt att titta p\u00e5 framstegen s\u00e5 att du kan anv\u00e4nda variabla typsnitt f\u00f6r att optimera dina typsnitt n\u00e4r de blir stabilare.<\/p>\n\n<h2><strong>Sammanfattning<\/strong><\/h2>\n<p>Att \u00e4ndra typsnitt p\u00e5 din WordPress-webbplats \u00e4r inte en enkel uppgift. Du har olika m\u00f6jligheter att v\u00e4lja mellan:<\/p>\n<ol>\n<li>Anv\u00e4nda webbtypsnitt genom att installera ett plugin.<\/li>\n<li>Anv\u00e4nd webbtypsnitt genom att koda dem i ditt tema och k\u00f6a dem.<\/li>\n<li>Hosta dina typsnitt.<\/li>\n<\/ol>\n<p>Sedan b\u00f6r du fokusera p\u00e5 hur du optimerar dina typsnitt f\u00f6r b\u00e4ttre prestanda. Om du f\u00f6ljer tipsen i den h\u00e4r guiden b\u00f6r du inte bara kunna \u00e4ndra typsnitt i WordPress utan ocks\u00e5 ha mer kontroll \u00f6ver dem i ditt tema.<\/p>\n<p>Vill du rensa din sida eller blogglayout f\u00f6r att f\u00e5 dina l\u00e4sare att fokusera p\u00e5 ditt inneh\u00e5ll? Kolla d\u00e5 in detta: <a href=\"https:\/\/kinsta.com\/se\/blog\/sa-tar-du-bort-sidofalltet-i-wordpress\/\">Hur man tar bort sidof\u00e4ltet i WordPress (4 metoder)<\/a>.<\/p>\n<p>\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Typsnitt kan vara skillnaden mellan en tr\u00e5kig webbplats och en vacker webbplats. Genom att l\u00e4ra sig att \u00e4ndra typsnitt i WordPress, kan du f\u00e5 din webbplats &#8230;<\/p>\n","protected":false},"author":105,"featured_media":32401,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[167,80],"topic":[834],"class_list":["post-32381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-fonts","tag-website","topic-wordpress-teckensnitt"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>S\u00e5 \u00e4ndrar du typsnitt i WordPress (och \u00e4ndra storlek, f\u00e4rg, optimera)<\/title>\n<meta name=\"description\" content=\"L\u00e4r dig allt du beh\u00f6ver f\u00f6r att \u00e4ndra typsnitt i WordPress, hur du \u00e4ndrar teckenstorlek, teckenf\u00e4rger och l\u00e4r dig hur du optimerar dem f\u00f6r snabbare sidor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"S\u00e5 \u00e4ndrar du typsnitt i WordPress (och \u00e4ndra storlek, f\u00e4rg, optimera)\" \/>\n<meta property=\"og:description\" content=\"L\u00e4r dig allt du beh\u00f6ver f\u00f6r att \u00e4ndra typsnitt i WordPress, hur du \u00e4ndrar teckenstorlek, teckenf\u00e4rger och l\u00e4r dig hur du optimerar dem f\u00f6r snabbare sidor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstasweden\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-28T13:00:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-01T15:41:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/11\/sa-andrar-du-typsnitt-i-wordpress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rachel McCollin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"L\u00e4r dig allt du beh\u00f6ver f\u00f6r att \u00e4ndra typsnitt i WordPress, hur du \u00e4ndrar teckenstorlek, teckenf\u00e4rger och l\u00e4r dig hur du optimerar dem f\u00f6r snabbare sidor.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/11\/sa-andrar-du-typsnitt-i-wordpress.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_se\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_se\" \/>\n<meta name=\"twitter:label1\" content=\"Skriven av\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rachel McCollin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Ber\u00e4knad l\u00e4stid\" \/>\n\t<meta name=\"twitter:data2\" content=\"30 minuter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/\"},\"author\":{\"name\":\"Rachel McCollin\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\"},\"headline\":\"S\u00e5 \u00e4ndrar du typsnitt i WordPress (och \u00e4ndra storlek, f\u00e4rg, optimera)\",\"datePublished\":\"2019-11-28T13:00:47+00:00\",\"dateModified\":\"2025-09-01T15:41:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/\"},\"wordCount\":6684,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/11\/sa-andrar-du-typsnitt-i-wordpress.jpg\",\"keywords\":[\"fonts\",\"website\"],\"articleSection\":[\"De b\u00e4sta handledningarna f\u00f6r WordPress\"],\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/\",\"name\":\"S\u00e5 \u00e4ndrar du typsnitt i WordPress (och \u00e4ndra storlek, f\u00e4rg, optimera)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/11\/sa-andrar-du-typsnitt-i-wordpress.jpg\",\"datePublished\":\"2019-11-28T13:00:47+00:00\",\"dateModified\":\"2025-09-01T15:41:02+00:00\",\"description\":\"L\u00e4r dig allt du beh\u00f6ver f\u00f6r att \u00e4ndra typsnitt i WordPress, hur du \u00e4ndrar teckenstorlek, teckenf\u00e4rger och l\u00e4r dig hur du optimerar dem f\u00f6r snabbare sidor.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#breadcrumb\"},\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/11\/sa-andrar-du-typsnitt-i-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/11\/sa-andrar-du-typsnitt-i-wordpress.jpg\",\"width\":1460,\"height\":730,\"caption\":\"S\u00e5 \u00e4ndrar du typsnitt i WordPress (och \u00e4ndra storlek, f\u00e4rg, optimera)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/se\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress-teckensnitt\",\"item\":\"https:\/\/kinsta.com\/se\/topics\/wordpress-teckensnitt\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"S\u00e5 \u00e4ndrar du typsnitt i WordPress (och \u00e4ndra storlek, f\u00e4rg, optimera)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/se\/#website\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/se\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sv-SE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/se\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstasweden\/\",\"https:\/\/x.com\/kinsta_se\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\",\"name\":\"Rachel McCollin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"caption\":\"Rachel McCollin\"},\"description\":\"Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.\",\"url\":\"https:\/\/kinsta.com\/se\/blog\/author\/rachelmccollin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"S\u00e5 \u00e4ndrar du typsnitt i WordPress (och \u00e4ndra storlek, f\u00e4rg, optimera)","description":"L\u00e4r dig allt du beh\u00f6ver f\u00f6r att \u00e4ndra typsnitt i WordPress, hur du \u00e4ndrar teckenstorlek, teckenf\u00e4rger och l\u00e4r dig hur du optimerar dem f\u00f6r snabbare sidor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/","og_locale":"sv_SE","og_type":"article","og_title":"S\u00e5 \u00e4ndrar du typsnitt i WordPress (och \u00e4ndra storlek, f\u00e4rg, optimera)","og_description":"L\u00e4r dig allt du beh\u00f6ver f\u00f6r att \u00e4ndra typsnitt i WordPress, hur du \u00e4ndrar teckenstorlek, teckenf\u00e4rger och l\u00e4r dig hur du optimerar dem f\u00f6r snabbare sidor.","og_url":"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstasweden\/","article_published_time":"2019-11-28T13:00:47+00:00","article_modified_time":"2025-09-01T15:41:02+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/11\/sa-andrar-du-typsnitt-i-wordpress.jpg","type":"image\/jpeg"}],"author":"Rachel McCollin","twitter_card":"summary_large_image","twitter_description":"L\u00e4r dig allt du beh\u00f6ver f\u00f6r att \u00e4ndra typsnitt i WordPress, hur du \u00e4ndrar teckenstorlek, teckenf\u00e4rger och l\u00e4r dig hur du optimerar dem f\u00f6r snabbare sidor.","twitter_image":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/11\/sa-andrar-du-typsnitt-i-wordpress.jpg","twitter_creator":"@kinsta_se","twitter_site":"@kinsta_se","twitter_misc":{"Skriven av":"Rachel McCollin","Ber\u00e4knad l\u00e4stid":"30 minuter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/"},"author":{"name":"Rachel McCollin","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/52eb266d622b565d3206e355caac172e"},"headline":"S\u00e5 \u00e4ndrar du typsnitt i WordPress (och \u00e4ndra storlek, f\u00e4rg, optimera)","datePublished":"2019-11-28T13:00:47+00:00","dateModified":"2025-09-01T15:41:02+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/"},"wordCount":6684,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/11\/sa-andrar-du-typsnitt-i-wordpress.jpg","keywords":["fonts","website"],"articleSection":["De b\u00e4sta handledningarna f\u00f6r WordPress"],"inLanguage":"sv-SE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/","url":"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/","name":"S\u00e5 \u00e4ndrar du typsnitt i WordPress (och \u00e4ndra storlek, f\u00e4rg, optimera)","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/11\/sa-andrar-du-typsnitt-i-wordpress.jpg","datePublished":"2019-11-28T13:00:47+00:00","dateModified":"2025-09-01T15:41:02+00:00","description":"L\u00e4r dig allt du beh\u00f6ver f\u00f6r att \u00e4ndra typsnitt i WordPress, hur du \u00e4ndrar teckenstorlek, teckenf\u00e4rger och l\u00e4r dig hur du optimerar dem f\u00f6r snabbare sidor.","breadcrumb":{"@id":"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#breadcrumb"},"inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/11\/sa-andrar-du-typsnitt-i-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2019\/11\/sa-andrar-du-typsnitt-i-wordpress.jpg","width":1460,"height":730,"caption":"S\u00e5 \u00e4ndrar du typsnitt i WordPress (och \u00e4ndra storlek, f\u00e4rg, optimera)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/se\/blog\/sa-andrar-du-typsnitt-i-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/se\/"},{"@type":"ListItem","position":2,"name":"WordPress-teckensnitt","item":"https:\/\/kinsta.com\/se\/topics\/wordpress-teckensnitt\/"},{"@type":"ListItem","position":3,"name":"S\u00e5 \u00e4ndrar du typsnitt i WordPress (och \u00e4ndra storlek, f\u00e4rg, optimera)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/se\/#website","url":"https:\/\/kinsta.com\/se\/","name":"Kinsta\u00ae","description":"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar","publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/se\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sv-SE"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/se\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/se\/","logo":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstasweden\/","https:\/\/x.com\/kinsta_se","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/52eb266d622b565d3206e355caac172e","name":"Rachel McCollin","image":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","caption":"Rachel McCollin"},"description":"Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.","url":"https:\/\/kinsta.com\/se\/blog\/author\/rachelmccollin\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/32381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/users\/105"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/comments?post=32381"}],"version-history":[{"count":14,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/32381\/revisions"}],"predecessor-version":[{"id":58233,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/32381\/revisions\/58233"}],"alternate":[{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/32381\/translations\/es"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/32381\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/32381\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/32381\/translations\/fr"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/32381\/translations\/en"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/32381\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/32381\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/32381\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/32381\/translations\/se"},{"href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/32381\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media\/32401"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media?parent=32381"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/tags?post=32381"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/topic?post=32381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}