En fantastisk måde at tilføje noget branding og individualisme til dit WordPress -websted er at ændre skrifttyperne i dit tema.

Typografi og andre båndelementer skaber et godt førstehåndsindtryk, sætter stemningen for dit websteds besøgende og etablerer dit brands identitet. Undersøgelser^(Studies) har også fundet ud af, at skrifttyper påvirker læseres evne til at lære, huske information og huske tekster.

Hvis du lige har installeret et WordPress-tema^{(installed a WordPress theme)} eller har en vis erfaring med CSS og kodning, viser vi dig flere muligheder, du kan bruge til at ændre skrifttyper i WordPress .

Sådan ændres skrifttyper i WordPress^{(How to Change Fonts in WordPress)}

Der er tre hovedmuligheder tilgængelige for dig til at ændre skrifttyper i WordPress:

• Brug webskrifttyper som Google Fonts , Fonts.com eller Adobe Edge Web Fonts , som hostes på et tredjepartswebsted
• Kod^(Code) webskrifttyper ind i dit tema, og sæt dem i kø
• Vær vært^(Host) for skrifttyper på dit websted, og føj dem til dit tema

1. Sådan ændres skrifttyper i WordPress ved hjælp af webskrifttyper^{(1. How to Change Fonts in WordPress Using Web Fonts)}

Brug af webskrifttyper er en nemmere og hurtigere måde at ændre skrifttyper i WordPress end at downloade og uploade skrifttypefiler.

Med denne mulighed kan du få adgang til en række forskellige skrifttyper^{(access a variety of fonts)} uden at opdatere dem, hver gang der sker en ændring, og det optager ikke serverplads på din hosting. Skrifttyperne serveres direkte fra udbyderens servere ved hjælp af et plugin eller ved at tilføje kode til dit websted.

Sørg^(Make) for, at de webskrifttyper, du vælger til dit websted, matcher din brandidentitet, er lette at læse for brødtekst, er velkendte for webstedsbesøgende og formidler den slags stemning og billede, du ønsker.

Du kan tilføje webskrifttyper ved hjælp af et WordPress-plugin^{(using a WordPress plugin)} eller manuelt ved at tilføje et par linjer kode til dit websted. Lad os undersøge begge muligheder.

Sådan tilføjes webskrifttyper ved hjælp af et WordPress-plugin^{(How to Add Web Fonts Using a WordPress Plugin)}

Afhængigt af den webskrifttype, du har valgt, kan du bruge et WordPress - plugin til at få adgang til biblioteket med skrifttyper og vælge den, du vil have på dit websted. Til denne vejledning valgte vi Google Fonts og brugte Google Fonts Typography plugin.

1. For at komme i gang skal du logge ind på dit WordPress admin-dashboard og vælge Plugins > Add New .

1. Skriv Google Fonts Typography i søgefeltet, og vælg Installer nu^{(Install Now)} .

1. Vælg Aktiver^(Activate) .

1. Gå derefter til Customizer ved at gå til Appearance > Customize .

1. Vælg afsnittet Google Fonts .

1. Klik derefter på linket for at åbne skrifttypernes indstillinger og konfigurere dem som følger:

• Indstil standardskrifttypen for din brødtekst, overskrifter og knapper under Grundlæggende indstillinger .^{(Basic Settings)}

• Under Avancerede indstillinger^{(Advanced Settings)} skal du konfigurere dit websteds titel og beskrivelse, menu, overskrifter og indhold, sidebjælke og sidefod.

• Fjern markeringen^(Uncheck) af ​​eventuelle uønskede skrifttypevægte i sektionen Font Loading for at ^{(Font Loading)}undgå at gøre dit websted langsommere^{(avoid slowing down your site)} .

Hvis der er skrifttyper på dit websted, der ikke vises eller fungerer korrekt, skal du bruge afsnittet Fejlfinding^{(Debugging )} til at fejlfinde.

1. Du kan teste disse indstillinger i Customizer for at sikre, at de fungerer, som du vil have dem til, og derefter vælge Udgiv^(Publish) .

Bemærk^(Note) : Hvis du glemmer at vælge udgiv i Customizer , mister du alle de ændringer, du har foretaget.

Sådan tilføjes webskrifttyper ved hjælp af kode^{(How to Add Web Fonts Using Code)}

Du kan installere og bruge webskrifttyper, hvis du har adgang til dit temas kode. Dette er et manuelt alternativ til at tilføje et ekstra plugin, men det er ikke kompliceret, hvis du følger trinene omhyggeligt.

Der er dog forskellige trin at tage, hvis du bruger et tema fra WordPress -temabiblioteket eller et tilpasset tema.

Hvis du har købt et tema fra WordPress -temabiblioteket, skal du oprette et undertema^{(create a child theme)} og derefter give det filen style.css og functions.php. Det er nemmere, hvis du har et tilpasset tema, da du kan redigere stylesheet- og funktionsfilen fra dit tema.

1. For at komme i gang skal du vælge en skrifttype fra Google Fonts- biblioteket og vælge + (plus) -ikonet for at tilføje den til dit bibliotek.

1. Vælg derefter fanen nederst, hvor du finder koden, du vil tilføje til dit websted. Gå til afsnittet Integrer skrifttype^{(Embed font)} under fanen Integrer^(Embed) . Du finder koden genereret af Google Fonts , som ser nogenlunde sådan ud:

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

Bemærk^(Note) : Vi valgte Work Sans til denne vejledning, så skrifttypenavnet kan være forskelligt på dit, afhængigt af hvad du valgte.

1. Kopiér denne del af koden: https://fonts.googleapis.com/css2?family=Work+Sans

Dette giver dig mulighed for at sætte stilen i kø fra Google Fonts -servere for at forhindre konflikt med tredjeparts plugins. Det giver også mulighed for lettere modifikationer af børnetema.

1. For at sætte skrifttypen i kø skal du åbne funktionsfilen og tilføje følgende kode. ( Erstat^(Replace) linket med det link, du får fra Google Fonts ):

funktion wosib_add_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 tilføje en ny linje til din funktion eller til den samme linje, hvis du ønsker at tilføje flere skrifttyper i fremtiden som følger:

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 dette tilfælde har vi sat både Cambria- og^(Cambria) Work Sans^{(Work Sans)} - skrifttyper i kø.

Det næste trin er at tilføje skrifttyperne til dit temas stylesheet for at få skrifttypen til at fungere på dit websted.

1. For at gøre dette skal du åbne dit temas style.css-fil og tilføje koden for at style individuelle elementer med dine webskrifttyper som følger:

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

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

I dette tilfælde vil hovedskrifttypen være Work Sans , mens header-elementer som h1, h2 og h3 vil bruge Cambria .

Når du er færdig, skal du gemme typografiarket og kontrollere, om dine skrifttyper fungerer, som de skal. Hvis ikke, så tjek, at skrifttyperne ikke tilsidesættes i typografiarket, eller ryd din browsers cache og prøv igen.

1. Hav en backup-skrifttype på plads for at sikre, at skrifttyperne kan gengives eller nemt fås, især for brugere med gamle enheder, dårlige forbindelser, eller hvis skrifttypeudbyderen har tekniske problemer. For at gøre dette skal du gå til stilarket og redigere CSS'en^(CSS) for at læse som følger:

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

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

Hvis alt er godt, vil dit websteds besøgende se dine standardwebskrifttyper, i vores tilfælde Work Sans og Cambria . Hvis der er problemer, vil de se backupskrifttyperne, for eksempel Arial eller Times New Roman i vores tilfælde.

2. Sådan ændres skrifttyper i WordPress ved at hoste skrifttyper^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Hosting af skrifttyper på dine egne servere hjælper dig med at optimere ydeevnen af ​​dine webskrifttyper, men det er også en mere sikker måde^{(a more secure way)} at gøre det på i stedet for at trække ressourcer ind fra tredjepartswebsteder.

Google Fonts og andre webskrifttyper giver dig mulighed for at downloade skrifttyper til brug som lokalt hostede skrifttyper, men du kan stadig downloade andre skrifttyper til din computer, forudsat at licenserne tillader dig at gøre det.

1. For at komme i gang skal du downloade, udpakke, uploade skrifttypefilen til dit websted og derefter linke den til dit stylesheet. I dette tilfælde behøver du ikke at sætte skrifttyperne i køen i functions.php-filen, som du gjorde med webskrifttyperne. Bekræft, at de filer, du uploader, er i .woff -formatet, før du bruger dem på dit websted.

1. Gå derefter til wp-content/themes/themename for at uploade skrifttypefilen til dit tema. 
2. Åbn stilarket og tilføj følgende kode (i dette tilfælde bruger vi Work Sans - skrifttype, men du kan erstatte det med dine egne skrifttyper):

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

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

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

Bemærk^(Note) : Brug af @fontface giver dig mulighed for at bruge fed, kursiv og andre varianter af din skrifttype, hvorefter du kan angive vægten eller stilen for hver skrifttype.

1. Tilføj derefter styling til dine elementer som følger:

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;
}

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

Ændring af skrifttyper i WordPress er en god idé til at forbedre brandingen og brugeroplevelsen. Det er ikke en ligetil opgave, men du får mere kontrol over dit tema.

Var^(Were) du i stand til at tilpasse dit websteds skrifttyper ved hjælp af trinene ved hjælp af tipsene i denne vejledning? Fortæl^(Tell) os i kommentarerne.

How to Change Fonts in WordPress

Α great way to add some branding and individualism to your WordPress site is to change the fontѕ in your 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

• Sådan flytter du WordPress-websted fra en vært til en anden

• Sådan installeres og konfigureres WordPress på Microsoft Azure

• Sådan kører du lynhurtigt WordPress på Microsoft Azure

• Sådan konfigurerer du privatlivets fred i WordPress og hvorfor det er vigtigt

• Sådan installeres WordPress på Google Cloud Platform

• 9 skal have plugins til nye WordPress-installationer

• Sådan beskytter du sider med adgangskode på dit WordPress-websted

• Sådan bruger du Lumen5 til at gøre dit blogindlæg til en video

• Sådan opretter du din egen kupon-popup i WordPress

• 7 WordPress-tip til en mobilvenlig hjemmeside

• Wix vs WordPress: Hvilken er bedst til at oprette din hjemmeside?

• Boganmeldelse: Byg din egen hjemmeside: En tegneserieguide til HTML, CSS og Wordpress

• 10 essentielle WordPress-plugins til et websted for små virksomheder

• Sådan fremskynder du ethvert WordPress-websted ved hjælp af .HTACCESS

• Sådan duplikeres en side i WordPress

• Hvad er AMP til WordPress, og hvordan man installerer det

• WordPress Jetpack: Hvad er det, og er det værd at installere?

• Sådan fjerner du alle spor af et WordPress-plugin

• Squarespace vs WordPress: Hvilken er den bedre webstedsplatform?

• Sådan går du fra den klassiske WordPress-editor til Gutenberg