Ett bra sätt att lägga till lite varumärke och individualism på din WordPress- webbplats är att ändra teckensnitten i ditt tema.

Typografi och andra bandelement skapar ett bra första intryck, sätter stämningen för webbplatsens besökare och etablerar ditt varumärkes identitet. Studier^(Studies) har också funnit att typsnitt påverkar läsarnas förmåga att lära sig, återkalla information och memorera texter.

Om du precis har installerat ett WordPress-tema^{(installed a WordPress theme)} eller har någon erfarenhet av CSS och kodning, visar vi dig flera alternativ som du kan använda för att ändra teckensnitt i WordPress .

Hur man ändrar teckensnitt i WordPress^{(How to Change Fonts in WordPress)}

Det finns tre huvudalternativ tillgängliga för dig att ändra teckensnitt i WordPress:

• Använd webbteckensnitt som Google Fonts , Fonts.com eller Adobe Edge Web Fonts , som finns på en tredjepartswebbplats
• Koda in webbteckensnitt^(Code) i ditt tema och ställ dem i kö
• Var värd^(Host) för typsnitt på din webbplats och lägg till dem i ditt tema

1. Hur man ändrar teckensnitt i WordPress med webbteckensnitt^{(1. How to Change Fonts in WordPress Using Web Fonts)}

Att använda webbteckensnitt är ett enklare och snabbare sätt att ändra teckensnitt i WordPress än att ladda ner och ladda upp teckensnittsfiler.

Med det här alternativet kan du komma åt en mängd olika typsnitt^{(access a variety of fonts)} utan att uppdatera dem varje gång det sker en förändring, och det tar inte upp serverutrymmet på ditt webbhotell. Typsnitten serveras direkt från leverantörens servrar med hjälp av ett plugin eller genom att lägga till kod på din webbplats.

Se^(Make) till att webbteckensnitten du väljer för din webbplats matchar din varumärkesidentitet, är lätta att läsa för brödtext, är bekanta för webbplatsbesökare och förmedlar den typ av stämning och bild du vill ha.

Du kan lägga till webbteckensnitt med hjälp av ett WordPress-plugin^{(using a WordPress plugin)} eller manuellt genom att lägga till några rader kod på din webbplats. Låt oss utforska båda alternativen.

Hur man lägger till webbteckensnitt med hjälp av ett WordPress-plugin^{(How to Add Web Fonts Using a WordPress Plugin)}

Beroende på vilket webbteckensnitt du har valt kan du använda ett WordPress- plugin för att komma åt teckensnittsbiblioteket och välja det du vill ha på din webbplats. För den här guiden valde vi Google Fonts och använde Google Fonts Typography -plugin.

1. För att komma igång, logga in på din WordPress admin-dashboard och välj Plugins > Add New .

1. Skriv Google Fonts Typography i sökrutan och välj Installera nu^{(Install Now)} .

1. Välj Aktivera^(Activate) .

1. Öppna sedan Customizer genom att gå till Appearance > Customize .

1. Välj avsnittet Google Fonts .

1. Klicka sedan på länken för att öppna teckensnittens inställningar och konfigurera dem enligt följande:

• Under Grundinställningar^{(Basic Settings)} ställer du in standardteckensnittet för din brödtext, rubriker och knappar.

• Under Avancerade inställningar^{(Advanced Settings)} konfigurerar du webbplatsens titel och beskrivning, meny, rubriker och innehåll, sidofält och sidfot.

• Avmarkera^(Uncheck) alla oönskade teckensnittsvikter i avsnittet Font Loading för att ^{(Font Loading)}undvika att din webbplats saktar ner^{(avoid slowing down your site)} .

Om det finns teckensnitt på din webbplats som inte visas eller fungerar korrekt, använd avsnittet Felsökning^{(Debugging )} för att felsöka.

1. Du kan testa dessa inställningar i Customizer för att se till att de fungerar som du vill ha dem och sedan välja Publicera^(Publish) .

Obs^(Note) : Om du glömmer att välja publicera i Customizer , kommer du att förlora alla ändringar du har gjort.

Hur man lägger till webbteckensnitt med kod^{(How to Add Web Fonts Using Code)}

Du kan installera och använda webbteckensnitt om du har tillgång till ditt temas kod. Detta är ett manuellt alternativ till att lägga till ett extra plugin, men det är inte komplicerat om du följer stegen noggrant.

Det finns dock olika steg att ta om du använder ett tema från WordPress -temakatalogen eller ett anpassat tema.

Om du köpte ett tema från WordPress -temakatalogen, skapa ett underordnat tema^{(create a child theme)} och ge det sedan filen style.css och functions.php. Det är enklare om du har ett anpassat tema eftersom du kan redigera stilmalls- och funktionsfilen från ditt tema.

1. För att komma igång, välj ett teckensnitt från Google Fonts - biblioteket och välj ikonen + (plus) för att lägga till det i ditt bibliotek.

1. Välj sedan fliken längst ned där du hittar koden som du ska lägga till på din webbplats. Gå till avsnittet Bädda in teckensnitt^{(Embed font)} under fliken Bädda in^(Embed) . Du hittar koden som genereras av Google Fonts , som ser ut ungefär så här:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Obs^(Note) : Vi valde Work Sans för den här guiden så teckensnittsnamnet kan skilja sig från ditt beroende på vad du valde.

1. Kopiera den här delen av koden: https://fonts.googleapis.com/css2?family=Work+Sans

Detta gör att du kan ställa stilen i kö från Google Fonts -servrar för att förhindra konflikter med plugins från tredje part. Det möjliggör också enklare modifieringar av barntema.

1. För att ställa teckensnittet i kö, öppna funktionsfilen och lägg till följande kod. ( Ersätt^(Replace) länken med länken du får från Google Fonts ):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts');

1. Du kan lägga till en ny rad till din funktion eller till samma rad om du vill lägga till fler teckensnitt i framtiden enligt följande:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts');

I det här fallet har vi ställt både Cambria- och^(Cambria) Work Sans^{(Work Sans)} -teckensnitt i kö.

Nästa steg är att lägga till typsnitten i ditt temas stilmall för att få typsnittet att fungera på din webbplats.

1. För att göra detta, öppna ditt temas style.css-fil och lägg till koden för att utforma individuella element med dina webbteckensnitt enligt följande:

body {
font-family: 'Work Sans', sans-serif;
}

h1, h2, h3 {
font-family: 'Cambria', serif;
}

I det här fallet kommer huvudteckensnittet att vara Work Sans medan rubrikelement som h1, h2 och h3 kommer att använda Cambria .

När du är klar, spara stilarket och kontrollera om dina teckensnitt fungerar som de ska. Om inte, kontrollera att typsnitten inte åsidosätts i stilmallen, eller rensa webbläsarens cacheminne och försök igen.

1. Ha ett backup-teckensnitt på plats för att säkerställa att teckensnitten kan renderas eller nås enkelt, särskilt för användare med gamla enheter, dåliga anslutningar eller om teckensnittsleverantören har tekniska problem. För att göra detta, gå till stilarket och redigera CSS för att läsa enligt följande:

body {
font-family: 'Work Sans', Arial, sans-serif;
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

Om allt är bra kommer besökarna på din webbplats att se dina standardwebbteckensnitt, i vårt fall Work Sans och Cambria . Om det finns problem kommer de att se reservteckensnitten, till exempel Arial eller Times New Roman i vårt fall.

2. Hur man ändrar teckensnitt i WordPress genom att vara värd för teckensnitt^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Att vara värd för typsnitt på dina egna servrar hjälper dig att optimera prestandan för dina webbteckensnitt, men det är också ett säkrare sätt^{(a more secure way)} att göra det istället för att dra in resurser från tredje parts webbplatser.

Med Google^(Google) Fonts och andra webbteckensnitt kan du ladda ner typsnitt för användning som lokalt värdbaserade typsnitt, men du kan fortfarande ladda ner andra typsnitt till din dator förutsatt att licenserna tillåter dig att göra det.

1. För att komma igång, ladda ner, packa upp, ladda upp teckensnittsfilen till din webbplats och länka den sedan i din stilmall. I det här fallet behöver du inte köa typsnitten i functions.php-filen som du gjorde med webbteckensnitten. Bekräfta att filerna du laddar upp är i .woff- formatet innan du använder dem på din webbplats.

1. Gå sedan till wp-content/themes/themename för att ladda upp teckensnittsfilen till ditt tema. 
2. Öppna stilarket och lägg till följande kod (i det här fallet använder vi Work Sans -teckensnitt men du kan ersätta det med dina egna teckensnitt):

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
teckensnittsstil: normal; ^{( font-style: normal;)}
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: fet; ^{( font-weight: bold;)}
teckensnittsstil: normal; ^{(font-style: normal;)}
}

@font-face {
font-family: 'Cambria';
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
teckensnittsstil: normal; ^{( font-style: normal;)}
}

Obs^(Note) : Genom att använda @fontface kan du använda fetstil, kursiv stil och andra varianter av ditt teckensnitt, varefter du kan ange vikten eller stilen för varje teckensnitt.

1. Lägg sedan till styling för dina element enligt följande:

body {
font-family: 'Work Sans', Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

Anpassa din WordPress-typografi^{(Customize Your WordPress Typography)}

Att ändra teckensnitt i WordPress är en utmärkt idé för att förbättra varumärket och användarupplevelsen. Det är inte en enkel uppgift, men du har mer kontroll över ditt tema.

Kunde^(Were) du anpassa din webbplats teckensnitt med hjälp av stegen med hjälp av tipsen i den här guiden? Berätta för^(Tell) oss i kommentarerna.

How to Change Fonts in WordPress

A great way to add somе branding and іndividualism to your WordPress sitе is to change the fonts in yоur theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• Hur man flyttar WordPress-webbplats från en värd till en annan

• Hur man installerar och ställer in WordPress på Microsoft Azure

• Hur man kör blixtrande snabbt WordPress på Microsoft Azure

• Hur man konfigurerar sekretess i WordPress och varför det är viktigt

• Hur man installerar WordPress på Google Cloud Platform

• Hur man lösenordsskyddar sidor på din WordPress-webbplats

• Hur man tar bort skadlig programvara från din WordPress-webbplats

• 11 bästa WordPress Podcast Plugins

• Hur man duplicerar en sida i WordPress

• Wix vs WordPress: Vilket är bäst för att skapa din webbplats?

• Hur man manuellt ställer in WordPress på en domän

• Hur man kontrollerar om en webbplats är avstängd från AdSense

• Måste ha WordPress Yoast SEO-inställningar 2022

• WordPress Jetpack: Vad är det och är det värt att installera?

• Hur du ändrar din WordPress-inloggningsadress för bättre säkerhet

• Hur man snabbar upp en WordPress-webbplats med .HTACCESS

• Hur man spårar trasiga länkar med Google Webmaster Tool

• Hur man bygger en Wix-blogg som är lika bra som WordPress

• Hur man säkerhetskopierar din WordPress-webbplats

• Hur man utför effektiva delade tester i WordPress