Egy nagyszerű módja annak, hogy márkajelzést és individualizmust adjon WordPress -webhelyéhez, ha megváltoztatja a témája betűtípusait.

A tipográfia és más sávozási elemek jó első benyomást keltenek, hangulatot teremtenek webhelye látogatói számára, és megalapozzák a márka identitását. Tanulmányok^(Studies) azt is kimutatták, hogy a betűtípusok befolyásolják az olvasók tanulási, információfelidézési és szövegmemorizálási képességét.

Ha most telepített egy WordPress témát^{(installed a WordPress theme)} , vagy rendelkezik némi CSS- és kódolási tapasztalattal, akkor bemutatunk néhány lehetőséget, amelyek segítségével módosíthatja a betűtípusokat a WordPressben^(WordPress) .

Betűtípusok megváltoztatása a WordPressben^{(How to Change Fonts in WordPress)}

Három fő lehetőség áll rendelkezésre a betűtípusok megváltoztatására a WordPressben:

• Használjon olyan internetes betűtípusokat, mint a Google Fonts , Fonts.com vagy Adobe Edge Web Fonts , amelyeket harmadik fél webhelyén tárolnak
• Kódolja^(Code) be a webes betűtípusokat a témájába, és helyezze sorba őket
• Hozzon^(Host) létre betűtípusokat a webhelyén, és adja hozzá őket a témához

1. Betűtípusok megváltoztatása a WordPressben webes betűtípusok használatával^{(1. How to Change Fonts in WordPress Using Web Fonts)}

A webes betűtípusok használata egyszerűbb és gyorsabb módja a betűtípusok megváltoztatásának a WordPressben^(WordPress) , mint a betűtípusfájlok letöltése és feltöltése.

Ezzel a lehetőséggel számos betűtípushoz férhet hozzá^{(access a variety of fonts)} anélkül, hogy minden változáskor frissítené őket, és nem foglal helyet a szerveren a tárhelyen. A betűtípusok közvetlenül a szolgáltató szervereiről jelennek meg egy beépülő modul segítségével vagy kód hozzáadásával az Ön webhelyéhez.

Győződjön^(Make) meg arról, hogy a webhelyéhez választott webes betűtípusok megfelelnek a márkaidentitásnak, könnyen olvashatóak a törzsszövegként, ismerősek a webhely látogatói számára, és a kívánt hangulatot és képet közvetítik.

Hozzáadhat webes betűtípusokat egy WordPress beépülő modul segítségével,^{(using a WordPress plugin)} vagy manuálisan is hozzáadhat néhány kódsort a webhelyéhez. Vizsgáljuk meg mindkét lehetőséget.

Webes betűtípusok hozzáadása WordPress beépülő modul használatával^{(How to Add Web Fonts Using a WordPress Plugin)}

A választott webes betűtípustól függően egy WordPress beépülő modul segítségével hozzáférhet a betűtípusok könyvtárához, és kiválaszthatja a kívánt betűtípust a webhelyén. Ehhez az útmutatóhoz a Google Fonts alkalmazást választottuk, és a Google Fonts Typography bővítményt használtuk.

1. A kezdéshez jelentkezzen be a WordPress adminisztrátori irányítópultjára, és válassza a Plugins > Add New menüpontot .

1. Írja be a Google Fonts Typography keresőmezőbe, és válassza a Telepítés most^{(Install Now)} lehetőséget .

1. Válassza az Aktiválás^(Activate) lehetőséget .

1. Ezután nyissa meg a Testreszabót^(Customizer) a Appearance > Customize .

1. Válassza a Google Fonts részt.

1. Ezután kattintson a hivatkozásra a betűtípusok beállításainak megnyitásához, és a következőképpen konfigurálja azokat:

• Az Alapbeállítások^{(Basic Settings)} alatt állítsa be a törzsszöveg, a fejlécek és a gombok alapértelmezett betűtípusát.

• A Speciális beállítások^{(Advanced Settings)} alatt állítsa be a webhely címét és leírását, a menüt, a címsorokat és a tartalmat, az oldalsávot és a láblécet.

• Törölje^(Uncheck) a nem kívánt betűsúlyok jelölését a Betűbetöltés^{(Font Loading)} részben, hogy elkerülje a webhely lelassulását^{(avoid slowing down your site)} .

Ha webhelyén vannak olyan betűtípusok, amelyek nem jelennek meg vagy nem működnek megfelelően, használja a Hibakeresés^{(Debugging )} részt a hibaelhárításhoz.

1. Tesztelheti ezeket a beállításokat a Testreszabóban^(Customizer) , hogy megbizonyosodjon arról, hogy a kívánt módon működnek, majd válassza a Közzététel^(Publish) lehetőséget .

Megjegyzés^(Note) : Ha elfelejti kiválasztani a Közzététel lehetőséget a Testreszabóban^(Customizer) , elveszíti az összes módosítást.

Webes betűtípusok hozzáadása kóddal^{(How to Add Web Fonts Using Code)}

Telepíthet és használhat webes betűtípusokat, ha hozzáfér a téma kódjához. Ez egy manuális alternatíva egy további beépülő modul hozzáadására, de nem bonyolult, ha gondosan követi a lépéseket.

Azonban különböző lépéseket kell tennie, ha a WordPress témakönyvtárából vagy testreszabott témát használ.

Ha a WordPress témakönyvtárából^(WordPress) vásárolt témát , hozzon létre egy gyermektémát^{(create a child theme)} , majd adja meg a style.css és functions.php fájlt. Egyszerűbb, ha testreszabott témája van, mivel szerkesztheti a stíluslapot és a függvényfájlt a témából.

1. A kezdéshez válasszon ki egy betűtípust a Google Fonts könyvtárból, majd kattintson a + (plus) ikonra, hogy hozzáadja a könyvtárához.

1. Ezután válassza ki azt a lapot az alján, ahol megtalálja a webhelyéhez hozzáadandó kódot. Nyissa meg a Betűtípus beágyazása^{(Embed font)} szakaszt a Beágyazás^(Embed) lapon. Megtalálja a Google Fonts által generált kódot , amely valahogy így néz ki:

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

Megjegyzés^(Note) : Ehhez az útmutatóhoz a Work Sans -t választottuk, így a betűtípus neve eltérhet az Ön által választott betűtípustól függően.

1. Másolja ki a kód ezen részét: https://fonts.googleapis.com/css2?family=Work+Sans

Ez lehetővé teszi, hogy sorba állítsa a stílust a Google Fonts szervereiről, hogy elkerülje a harmadik féltől származó beépülő modulokkal való ütközést. Lehetővé teszi a gyermektéma egyszerűbb módosítását is.

1. A betűtípus sorba helyezéséhez nyissa meg a függvényfájlt, és adja hozzá a következő kódot. ( Cserélje^(Replace) ki a linket a Google Fonts -tól kapott hivatkozásra ):

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. Hozzáadhat egy új sort a függvényéhez, vagy ugyanahhoz a sorhoz, ha a jövőben további betűtípusokat szeretne hozzáadni az alábbiak szerint:

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' );

Ebben az esetben a Cambria és a Work Sans betűtípusokat is sorba állítottuk.

A következő lépés a betűtípusok hozzáadása a téma stíluslapjához, hogy a betűtípus működjön a webhelyen.

1. Ehhez nyissa meg a téma style.css fájlját, és adja hozzá a kódot az egyes elemek stílusozásához a webes betűtípusokkal az alábbiak szerint:

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

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

Ebben az esetben a fő betűtípus a Work Sans lesz, míg a fejlécelemek, például a h1, h2 és h3 a Cambriát használják^(Cambria) .

Ha elkészült, mentse el a stíluslapot, és ellenőrizze, hogy a betűtípusok megfelelően működnek-e. Ha nem, ellenőrizze, hogy a betűtípusok nincsenek-e felülírva a stíluslapon, vagy törölje a böngésző gyorsítótárát, és próbálkozzon újra.

1. Készítsen tartalék betűkészletet annak biztosítására, hogy a betűtípusok könnyen megjeleníthetők vagy elérhetők legyenek, különösen a régi eszközökkel, rossz kapcsolatokkal rendelkező felhasználók számára, vagy ha a betűkészlet-szolgáltatónak technikai problémái vannak. Ehhez lépjen a stíluslapra, és módosítsa a CSS -t a következőképpen:

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

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

Ha minden rendben van, akkor webhelye látogatói látni fogják az alapértelmezett webes betűtípusokat, esetünkben a Work Sans -t és a Cambriát^(Cambria) . Ha problémák vannak, látni fogják a tartalék betűtípusokat, esetünkben például az Arial vagy a Times New Roman .

2. Betűtípusok megváltoztatása a WordPressben a betűtípusok tárolásával^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

A betűkészletek tárolása saját szerverein segít optimalizálni a webes betűtípusok teljesítményét, de biztonságosabb módja^{(a more secure way)} is ennek, ahelyett, hogy harmadik felek webhelyeiről vonná be az erőforrásokat.

A Google^(Google) Fonts és más internetes betűtípusok lehetővé teszik a betűtípusok letöltését helyi tárolt betűtípusként való használatra, de továbbra is letölthet más betűtípusokat a számítógépére, feltéve, hogy a licencek ezt lehetővé teszik.

1. A kezdéshez töltse le, csomagolja ki, töltse fel a fontfájlt a webhelyére, majd csatolja a stíluslapon. Ebben az esetben nem kell sorba állítania a fontokat a functions.php fájlban, ahogyan azt a webes betűtípusoknál tette. Mielőtt felhasználná őket webhelyén, győződjön meg arról, hogy a feltöltött fájlok .woff formátumúak.^(.woff)

1. Ezután lépjen a wp-content/themes/themename , és töltse fel a fontfájlt a témába. 
2. Nyissa meg a stíluslapot, és adja hozzá a következő kódot (jelen esetben Work Sans^(Sans) betűtípust használunk, de ezt lecserélheti saját betűtípusaira):

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normál; ^{( font-weight: normal;)}
betűstílus: normál; ^{( font-style: normal;)}
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: félkövér; ^{( font-weight: bold;)}
betűstílus: normál; ^{(font-style: normal;)}
}

@font-face {
font-family: 'Cambria';
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normál; ^{( font-weight: normal;)}
betűstílus: normál; ^{( font-style: normal;)}
}

Megjegyzés^(Note) : A @fontface használata lehetővé teszi a félkövér, dőlt betűk és a betűtípus egyéb változatainak használatát, amelyek után megadhatja az egyes betűtípusok súlyát vagy stílusát.

1. Ezután a következőképpen adja hozzá az elemek stílusát:

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

Szabja testre WordPress tipográfiáját^{(Customize Your WordPress Typography)}

A betűtípusok megváltoztatása a WordPressben^(WordPress) nagyszerű ötlet a márkaépítés és a felhasználói élmény javítására. Ez nem egyszerű feladat, de jobban irányíthatja a témáját.

Sikerült^(Were) személyre szabnia webhelye betűtípusait az útmutatóban található tippek segítségével? Mondja el^(Tell) nekünk a megjegyzésekben.

How to Change Fonts in WordPress

A great waу to аdd some branding and individualism to your WоrdPress site is to сhange the fonts 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

• A WordPress webhely áthelyezése egyik gazdagépről a másikra

• A WordPress telepítése és beállítása a Microsoft Azure-ban

• Hogyan futtassuk a hihetetlenül gyors WordPress-t a Microsoft Azure-on

• Az adatvédelem konfigurálása a WordPressben és miért fontos

• A WordPress telepítése a Google Cloud Platformon

• 7 WordPress-tipp a mobilbarát webhelyhez

• Hogyan telepítsünk témát a WordPress-re

• A WordPress webhely felgyorsítása 11 lépésben

• A WP Super Cache használata a WordPress blogon

• Saját Twitter-szerű webhely létrehozása a WordPress P2 témája használatával

• A PHP frissítése a WordPressben

• Wix vs WordPress: Melyik a legjobb webhely létrehozásához?

• Kell rendelkeznie a WordPress Yoast SEO beállításaival 2022

• Lebegő oldalsáv hozzáadása a Wordpresshez

• A lábléc szerkesztése a WordPressben

• Mi az AMP for WordPress és hogyan kell telepíteni?

• Hogyan készítsünk egy WordPress webhelyet biztonságossá

• A WordPress manuális beállítása egy domainen

• Gyermektéma létrehozása a WordPressben

• Hogyan lehet felgyorsítani bármely WordPress webhelyet .HTACCESS használatával