{"id":253818,"date":"2022-04-02T11:23:00","date_gmt":"2022-04-02T08:23:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=253818"},"modified":"2021-10-29T03:43:29","modified_gmt":"2021-10-29T00:43:29","slug":"hur-man-andrar-teckensnitt-i-wordpress-det-enkla-sattet","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-andrar-teckensnitt-i-wordpress-det-enkla-sattet\/","title":{"rendered":"Hur man \u00e4ndrar teckensnitt i WordPress [Det enkla s\u00e4ttet]"},"content":{"rendered":"<p>Vill du \u00e4ndra typsnittet som anv\u00e4nds p\u00e5 din WordPress-webbplats?<\/p>\n<p>Med r\u00e4tt verktyg \u00e4r det enkelt att byta typsnitt p\u00e5 din webbplats eller l\u00e4gga till flera nya teckensnitt. F\u00f6lj med i den h\u00e4r snabba handledningen, s\u00e5 kommer ett nytt teckensnitt att visas p\u00e5 din webbplats inom de n\u00e4rmaste minuterna.<\/p>\n<h2>Hur man anv\u00e4nder Easy Google Fonts<\/h2>\n<p>Det b\u00e4sta s\u00e4ttet att \u00e4ndra teckensnittet p\u00e5 din webbplats \u00e4r med plugin- programmet <a href=\"https:\/\/wordpress.org\/plugins\/easy-google-fonts\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Easy Google Fonts<\/a>.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/easy-google-fonts\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179764-616f52fca7150.png\" alt=\"Hur man \u00e4ndrar teckensnitt i WordPress [Det enkla s\u00e4ttet]\" \/><\/a><\/p>\n<p>Denna plugin ger dig tillg\u00e5ng till hundratals olika typsnitt att anv\u00e4nda p\u00e5 din webbplats. Innan vi g\u00e5r vidare med pluginet, l\u00e5t oss ta ett \u00f6gonblick f\u00f6r att t\u00e4cka vad Google Fonts \u00e4r.<\/p>\n<p><strong>Uppdatering:<\/strong> min nya videohandledning kommer att leda dig genom stegen (den anv\u00e4nder en annan plugin \u00e4n den i den h\u00e4r handledningen).<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/_CZCfFl59iE\" frameborder=\"0\"><\/iframe><\/div>\n<p><a href=\"http:\/\/link.competethemes.com\/subscribe\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Prenumerera p\u00e5 t\u00e4vla teman p\u00e5 Youtube<\/a><\/p>\n<h3>Vad \u00e4r Google Fonts?<\/h3>\n<p><a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Google Fonts<\/a> ger tillg\u00e5ng till hundratals teckensnitt som \u00e4r gratis att anv\u00e4nda p\u00e5 vilken webbplats som helst. F\u00f6r alla webbutvecklare som vill l\u00e4gga till ett teckensnitt p\u00e5 sin webbplats g\u00f6r Google Fonts det enkelt.<\/p>\n<p>Om du inte k\u00e4nner till detaljerna i att bygga webbplatser, \u00e4r det d\u00e4r plugin-programmet Easy Google Fonts kommer in. Det hanterar de tekniska delarna \u00e5t dig, s\u00e5 allt du beh\u00f6ver g\u00f6ra \u00e4r att v\u00e4lja vilka typsnitt du gillar.<\/p>\n<p>Jag fattar? Bra, l\u00e5t oss l\u00e4gga till dessa typsnitt!<\/p>\n<h3>Skapa din teckensnittskontroll<\/h3>\n<p>N\u00e4r du aktiverar plugin-programmet hittar du ett nytt menyalternativ f\u00f6r Google Fonts som lagts till under Inst\u00e4llningar. P\u00e5 den sidan hittar du f\u00f6ljande alternativ:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179764-616f52fedf994.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179764-616f52fedf994.png\" alt=\"Hur man \u00e4ndrar teckensnitt i WordPress [Det enkla s\u00e4ttet]\" ><\/a><\/p>\n<p>Du kommer senare att tilldela teckensnitt till din &quot;fontkontroll&quot; s\u00e5 att du kan ha flera teckensnittskontroller med olika teckensnitt och inst\u00e4llningar. F\u00f6r nu beh\u00f6ver du bara namnge din teckensnittskontroll.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179764-616f53009918f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179764-616f53009918f.png\" alt=\"Hur man \u00e4ndrar teckensnitt i WordPress [Det enkla s\u00e4ttet]\" ><\/a><\/p>\n<h3>L\u00e4gg till en CSS-v\u00e4ljare<\/h3>\n<p>Under kontrollnamnet finns en ruta d\u00e4r du kan definiera de CSS-v\u00e4ljare du vill anv\u00e4nda. Om du inte vet vad en CSS-v\u00e4ljare \u00e4r \u00e4r det inget problem.<\/p>\n<p>Det finns tre CSS-v\u00e4ljare som har lagts till som standard. Klicka p\u00e5 &quot;x&quot; p\u00e5 varje f\u00f6r att ta bort dem. N\u00e4r du har tagit bort, skriv in en asterisk (*) och tryck p\u00e5 enter. CSS Selectors-inst\u00e4llningen ska nu se ut s\u00e5 h\u00e4r:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179764-616f530271229.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179764-616f530271229.png\" alt=\"Hur man \u00e4ndrar teckensnitt i WordPress [Det enkla s\u00e4ttet]\" ><\/a><\/p>\n<p>Asterisken \u00e4r en CSS-v\u00e4ljare som riktar in sig p\u00e5 alla HTML-element p\u00e5 webbplatsen. Med andra ord, du har precis sagt till Easy Google Fonts att anv\u00e4nda ditt nya typsnitt f\u00f6r all text p\u00e5 webbplatsen.<\/p>\n<h3>Tvinga \u00f6verstyrning av stilar<\/h3>\n<p>Jag rekommenderar att du ocks\u00e5 markerar rutan &quot;Force Styles Override&quot;. Detta kommer att s\u00e4kerst\u00e4lla att det teckensnitt du v\u00e4ljer \u00e5sidos\u00e4tter de teckensnitt som anv\u00e4nds i temat. Det finns inga nackdelar med att anv\u00e4nda det h\u00e4r alternativet, s\u00e5 du kan lika g\u00e4rna kontrollera det och spara en minut om teckensnitten inte \u00e5sidos\u00e4tter det.<\/p>\n<h3>V\u00e4lj ditt nya typsnitt<\/h3>\n<p>Nu n\u00e4r Easy Google Fonts vet vilka delar av din webbplats som ska p\u00e5verkas kan du tala om f\u00f6r det vilket teckensnitt som ska anv\u00e4ndas.<\/p>\n<p>Bes\u00f6k Customizer f\u00f6r att b\u00f6rja ditt teckensnittsval (Utseende &gt; Anpassa). V\u00e4l d\u00e4r klickar du p\u00e5 det nya avsnittet Typografi.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179764-616f5304667c4.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179764-616f5304667c4.png\" alt=\"Hur man \u00e4ndrar teckensnitt i WordPress [Det enkla s\u00e4ttet]\" ><\/a><\/p>\n<p>EGF fungerar utm\u00e4rkt med temat <a href=\"https:\/\/www.competethemes.com\/period\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Period<\/a>.<\/p>\n<p>Det h\u00e4r avsnittet kommer att avsl\u00f6ja tv\u00e5 nya undersektioner: Standardtypografi och Tematypografi. Klicka p\u00e5 avsnittet Tematypografi.<\/p>\n<p>Du kommer nu att se kontrollen du namngav tidigare. Klicka p\u00e5 knappen Redigera teckensnitt f\u00f6r att visa anpassningsalternativen.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179764-616f5306ee488.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-179764-616f5306ee488.png\" alt=\"Hur man \u00e4ndrar teckensnitt i WordPress [Det enkla s\u00e4ttet]\" ><\/a><\/p>\n<p>Det finns en hel del alternativ, men bara tv\u00e5 du beh\u00f6ver redigera.<\/p>\n<h3>\u00c4ndra skriptet\/delupps\u00e4ttningen<\/h3>\n<p>Teckensnitt har teckenupps\u00e4ttningar utformade f\u00f6r att passa olika spr\u00e5k. Om din webbplats \u00e4r p\u00e5 engelska, v\u00e4lj det f\u00f6rsta alternativet, latin.<\/p>\n<p>Om du v\u00e4ljer &quot;Alla delm\u00e4ngder&quot; blir teckensnittsfilerna mycket st\u00f6rre och dina laddningstider \u00f6kar.<\/p>\n<h3>V\u00e4lj teckensnittsfamiljen<\/h3>\n<p>Det \u00e4r h\u00e4r du \u00e4ntligen f\u00e5r v\u00e4lja ditt nya typsnitt. N\u00e4r du v\u00e4ljer olika typsnitt kommer du att se din webbplats uppdateras omedelbart.<\/p>\n<p>\u00c4ven om detta verkligen \u00e4r ett bra s\u00e4tt att f\u00f6rhandsgranska och \u00e4ndra teckensnitt, \u00e4r det inte ett effektivt s\u00e4tt att bl\u00e4ddra.<\/p>\n<p>Jag rekommenderar att du bes\u00f6ker <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Google Fonts<\/a> som \u00e4r v\u00e4ldesignat f\u00f6r att bl\u00e4ddra och hitta typsnitt. N\u00e4r du har hittat n\u00e5gra typsnitt du gillar, kom tillbaka till din webbplats och prova dem med Easy Google Fonts<\/p>\n<h2>L\u00e4gga till och anpassa fler teckensnitt<\/h2>\n<p>F\u00f6rhoppningsvis \u00e4lskar du ditt nya typsnitt nu, men det finns mycket mer du kan g\u00f6ra med Easy Google Fonts.<\/p>\n<p>Kommer du ih\u00e5g avsnittet Standardtypografi fr\u00e5n tidigare? Du kan anv\u00e4nda det f\u00f6r att anpassa dina rubriker och stycken. Dessutom beh\u00f6ver du inte stanna vid att \u00e4ndra teckensnittsfamiljen, du kan ocks\u00e5 \u00e4ndra teckenstorlek och f\u00e4rg ocks\u00e5. Och om du \u00e4r bekv\u00e4m med vissa CSS-v\u00e4ljare kan du anpassa teckensnittet p\u00e5 vilken enskild del av din webbplats som helst.<\/p>\n<p>Om du har n\u00e5gra fr\u00e5gor om att byta teckensnitt med WordPress eller har en beg\u00e4ran om en ny handledning, v\u00e4nligen l\u00e4mna en kommentar nedan.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.competethemes.com\" class=\"external external_icon\">www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Har du 5 minuter? F\u00f6lj den h\u00e4r snabba handledningen f\u00f6r att uppt\u00e4cka det b\u00e4sta plugin-programmet f\u00f6r att \u00e4ndra teckensnitt och hur du implementerar det p\u00e5 din WordPress-webbplats.<\/p>\n","protected":false},"author":1,"featured_media":257299,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[554],"tags":[850],"class_list":["post-253818","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-anpassa-wordpress","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/253818","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=253818"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/253818\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/257299"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=253818"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=253818"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=253818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}