# Egyedi betűtípusok hozzáadása

> Saját betűtípusfájlok feltöltése, külső CSS-címről (Adobe Fonts, Bunny Fonts) betöltött és saját szerveren tárolt betűtípusok beállítása, tippek és hibaelhárítás.

Az egyedi betűtípusokkal a beépített Google Fonts és webbiztos betűk listáján túli betűket is használhatsz. Betölthetsz betűt külső szolgáltatótól (például Adobe Fonts), vagy kiszolgálhatsz saját betűtípusfájlokat.

## Előkészületek

Háromféleképp adhatsz hozzá egyedi betűtípust, és attól függ, mit kell előkészítened, melyiket választod.

| Módszer | Mire van szükséged |
| --- | --- |
| Közvetlen feltöltés | A betűtípusfájlok `.woff2`, `.woff`, `.ttf` vagy `.otf` formátumban, minden használni kívánt vastagsághoz és stílushoz egy fájl, és a betűcsalád neve. Ez a leggyorsabb módszer: a bővítmény megírja helyetted az `@font-face` CSS-t, és magától felismeri minden fájl vastagságát és stílusát. |
| Külső szolgáltató | A szolgáltató (például Adobe Fonts vagy Bunny Fonts) által adott CSS-cím. Az Adobe Fonts ezt a kitjén belül adja, a Bunny Fonts a betűtípus-címtárából. |
| Saját szerveren tárolt betű | A szerverre feltöltött betűfájlok és egy `@font-face` deklarációkat tartalmazó CSS-fájl, amely nyilvánosan elérhető egy URL-en. |

Mindhárom esetben tudnod kell a pontos betűcsaládnevet, a használni kívánt vastagságokat, és azt, hogy a betűt a modulszerkesztőben, az élő oldalon, vagy mindkettőn szeretnéd elérni.

## Betűtípusfájlok feltöltése

A feltöltési űrlappal egyszerre több betűtípusfájlt tölthetsz fel. A bővítmény minden fájlt beolvas, felismeri a vastagságát és stílusát, és elkészíti a betöltéshez szükséges `@font-face` CSS-t. Saját CSS-fájl nem kell hozzá.

1. Készítsd össze a betűtípusfájlokat. Egy vastagsághoz vagy stílushoz egy fájl kell, például a Barlow betűhöz külön `Barlow-Regular.ttf`, `Barlow-Bold.ttf`, `Barlow-Italic.ttf`, `Barlow-BoldItalic.ttf` és így tovább minden szükséges változathoz. Csak azokat a változatokat gyűjtsd össze, amelyeket valóban használsz, mert minden további fájl növeli a betöltendő betű teljes méretét.
2. A WordPress adminfelületen nyisd meg a Slider Revolution bővítmény-vezérlőpultját, és a felső sávban kattints a **Beállítások** gombra, hogy megnyíljon a [Globális beállítások](https://hub.hellowp.io/hu/plugins/revslider/globalis-beallitasok/) panel.
3. Kattints a panel tetején a **Betűtípusok** fülre.
4. Görgess le az **Egyedi betűtípusok** szakaszhoz, és kattints az **Egyéni betűtípus feltöltése** gombra. Ez más gomb, mint az **Egyedi betűtípus hozzáadása**, amely a CSS-címes módszerekhez való.
5. A betűcsalád nevének mezőjébe írd be a betű nevét, például `Barlow`. Ez a név jelenik meg a modulszerkesztő betűválasztójában, ezért válassz felismerhetőt. A nevet a fájlok feltöltése előtt kell megadni.
6. Kattints a fájlok feltöltésére szolgáló gombra. Megnyílik a fájlböngésző: jelöld ki a betűcsalád összes fájlját. Egyszerre többet is kijelölhetsz.
7. Nézd át a feltöltött fájlok listáját. Minden fájl egy sor a fájlnévvel, a felismert vastagsággal és a felismert stílussal (Normal vagy Italic). Ha egy fájl vastagsága vagy stílusa nem a várt, javítsd: írd át a vastagság mezőjének számát, vagy a legördülővel válts stílust. A szokásos vastagságértékek: `100` vékony, `200` extra könnyű, `300` könnyű, `400` normál, `500` közepes, `600` félkövér, `700` kövér, `800` extra kövér, `900` fekete. A tévedésből hozzáadott fájlt a sor végén lévő törlés gombbal távolíthatod el.
8. Kattints a betűtípus hozzáadására szolgáló gombra. Ha mégsem akarod, a mégse gomb az űrlap bezárása anélkül, hogy bármi hozzáadódna.
9. A panel jobb alsó sarkában kattints a **Globális beállítások mentése** gombra.

Az egyedi betűt ezután egy szövegrétegre a modulszerkesztőben alkalmazhatod: Tervezési mód → **Stílus** fül → **Szöveg** szakasz → **Betűtípus**. Ha törölni akarod, kattints a bejegyzése végén lévő törlés gombra az **Egyedi betűtípusok** szakaszban.

## Külső szolgáltatótól betöltött betűtípus

A külső betűszolgáltatók (például Adobe Fonts, Bunny Fonts) egy tárolt CSS-fájlt adnak, amelyben benne van a betű betöltéséhez szükséges `@font-face` kód. A bővítménynek csak ezt a CSS-címet kell megadnod.

1. A bővítmény-vezérlőpult felső sávjában kattints a **Beállítások** gombra a Globális beállítások megnyitásához.
2. Kattints a **Betűtípusok** fülre.
3. Az **Egyedi betűtípusok** szakaszban kattints az **Egyedi betűtípus hozzáadása** gombra (nem a feltöltésre). Új beállítóűrlap jelenik meg.
4. A **Név** mezőbe pontosan úgy írd be a betűcsalád nevét, ahogy a szolgáltató CSS-fájljában szerepel. Ha a CSS `font-family: 'Barlow'` sort tartalmaz, a mezőbe `Barlow` kell. Eltérő név esetén a betű nem jelenik meg helyesen.
5. A **CSS URL** mezőbe illeszd be a szolgáltató CSS-fájljának teljes URL-jét. A Bunny Fontsnál ez nagyjából `https://fonts.bunny.net/css?family=barlow`, az Adobe Fontsnál a kitjében megadott CSS-beágyazási cím. A cím CSS-fájlra mutasson, nem közvetlenül betűfájlra (`.woff2`, `.ttf`).
6. A **Vastagság** mezőbe vesszővel elválasztva írd a betölteni kívánt vastagságokat. A `400,400i,700` a normál, a dőlt normál és a kövér vastagságot tölti be. Csak a ténylegesen használtakat töltsd be, mert a felesleges vastagság növeli az oldal betöltési idejét.
7. A **Betöltés helye** legördülőben válaszd ki, hol töltődjön be a betű. Szerkesztő és élő oldal: a betű a modulszerkesztőben és az élő oldalon is elérhető. Szerkesztő: ha az élő oldali betöltést más módszerrel oldod meg, de tervezés közben látni akarod a betűt. Élő oldal: ha csak az élő oldalon kell.
8. A jobb alsó sarokban kattints a **Globális beállítások mentése** gombra.

A betű a szövegréteg betűválasztójában ugyanott érhető el, mint a feltöltött betű. A törléshez használd a beállítóűrlap végén lévő törlés gombot.

## Saját szerveren tárolt betűtípus

Ha a betűfájlokat a saját szervereden szolgálnád ki, a legegyszerűbb a feltöltési űrlap, mert az megírja az `@font-face` CSS-t. Az alábbi módszert akkor használd, ha a CSS-t magad szeretnéd kezelni: például ha az `@font-face` súlyon és stíluson túli opciói kellenek, ha a betűfájlok már a szervereden vannak, vagy ha a betöltő CSS-t saját verziókövetés alatt akarod tartani.

1. Szerezd be a betűfájlokat webkompatibilis formátumban. A `.woff2` a legjobban tömörít, és minden modern böngésző támogatja. Ajánlott mellé `.woff` tartalék is a szélesebb kompatibilitáshoz.
2. Töltsd fel a fájlokat a webszerverre. Logikus hely az aktív sablon mappája, például `/wp-content/themes/sablonod/fonts/`. Jegyezd fel az egyes fájlok nyilvános URL-jét.
3. Készíts CSS-fájlt, például `custom-fonts.css` néven, és írd bele az `@font-face` deklarációkat. Minden blokkban szerepeljen a `font-family` neve, a feltöltött fájlokra mutató `src` útvonalak, a `font-weight` és a `font-style`. Egy normál vastagságú betű deklarációja így nézhet ki:

   ```css
   @font-face {
     font-family: 'MyCustomFont';
     src: url('/wp-content/themes/sablonod/fonts/mycustomfont.woff2') format('woff2'),
          url('/wp-content/themes/sablonod/fonts/mycustomfont.woff') format('woff');
     font-weight: 400;
     font-style: normal;
   }
   ```

   Minden támogatott vastagsághoz és stílushoz külön `@font-face` blokk kell.
4. Töltsd fel a kész CSS-fájlt a szerverre, és jegyezd fel a nyilvános URL-jét, például `https://sajatdomain.hu/wp-content/themes/sablonod/fonts/custom-fonts.css`. Nyisd meg az URL-t böngészőben, és ellenőrizd, hogy a fájl nyilvánosan elérhető.
5. A bővítmény-vezérlőpult felső sávjában kattints a **Beállítások** gombra, és nyisd meg a **Betűtípusok** fület.
6. Az **Egyedi betűtípusok** szakaszban kattints az **Egyedi betűtípus hozzáadása** gombra.
7. A **Név** mezőbe pontosan úgy írd a betűcsalád nevét, ahogy a CSS-fájl `font-family` tulajdonságában deklaráltad (a példában `MyCustomFont`). A mező kis- és nagybetűérzékeny, pontosan egyeznie kell.
8. A **CSS URL** mezőbe illeszd be a CSS-fájl teljes nyilvános URL-jét.
9. A **Vastagság** mezőbe vesszővel elválasztva írd a CSS-ben deklarált vastagságokat. Ha 400-as és 700-as blokkot készítettél, `400,700`. Dőlt változathoz fűzz `i` betűt a vastagsághoz, például `400,400i,700`.
10. A **Betöltés helye** legördülőben válaszd ki, hogy a betű a szerkesztőben, az élő oldalon, vagy mindkettőn töltődjön be (a leírás a külső szolgáltatós rész 7. lépésében).
11. A jobb alsó sarokban kattints a **Globális beállítások mentése** gombra.

## Tippek

- Ha megvannak a betűfájlok, és nincs okod a CSS-t magad kezelni, a feltöltési űrlap a leggyorsabb és legkevésbé hibalehetőséges út. Kiküszöböli a két leggyakoribb hibaokot: az eltérő betűcsaládnevet és a hibás CSS-címet.
- A hozzáadás előtt mindig nézd át a felismert vastagságokat. A téves érték javítása itt másodpercek kérdése, és megspórolja a később rossz vastagsággal megjelenő betű hibakeresését.
- Használj leíró, következetes betűcsaládneveket, speciális karakterek nélkül, így elkerülhető, hogy a bővítménybe beírt név eltérjen a CSS-fájlban deklaráltól.
- Külső CSS-címnél beírás előtt nyisd meg az URL-t közvetlenül a böngészőben. Ha hibát ad, vagy betűletöltésre irányít át stíluslap helyett, a betű csendben nem fog betöltődni.
- Saját szerveren tárolt betűnél elsődleges formátumnak a `.woff2`-t válaszd, és tegyél mellé `.woff` tartalékot.
- Csak azokat a vastagságokat töltsd be, amelyeket a modulokban használsz. Minden vastagság külön hálózati kérés és letöltés, ami az oldal sebességét ronthatja. Ez a feltöltési űrlappal hozzáadott fájlokra és a **Vastagság** mezőben felsorolt értékekre is igaz.
- CSS-címes betűnél, ha a közzététel előtt látni akarod a betűt a szerkesztőben, a **Betöltés helye** legyen eleve Szerkesztő és élő oldal. Ha csak az élő oldal van kiválasztva, tervezés közben nem a helyes betűt látod, ami nehezíti az elrendezés munkáját.
- Saját CSS-fájlnál a betű- és CSS-fájlokat az aktív sablon mappájába vagy a szerver nyilvános gyökerének külön `/fonts/` mappájába tedd. Kerüld az olyan helyeket, amelyek egy bővítmény- vagy sablonfrissítés után elérhetetlenné válhatnak.

## Hibaelhárítás

| Probléma | Teendő |
| --- | --- |
| A fájlfeltöltés gomb nem csinál semmit. | A fájlok feltöltése előtt ki kell tölteni a betűcsalád nevének mezőjét. Írd be a nevet, utána kattints a feltöltésre. |
| Egy betűfájlt elutasít a feltöltés. | Csak `.woff2`, `.woff`, `.ttf` és `.otf` fájl fogadható el. Az `.eot`, `.svg` és a betűfájlokat tartalmazó `.zip` nem. Csomagold ki az archívumot, és konvertáld a nem támogatott formátumokat. |
| A betű nem jelenik meg a modulszerkesztő betűválasztójában. | Ellenőrizd, hogy a hozzáadás után kattintottál-e a **Globális beállítások mentése** gombra. Feltöltési űrlapnál azt is, hogy a hozzáadás gombot nyomtad, nem a mégse gombot. CSS-címes betűnél, ha mentett, mégsem látszik, nézd meg, hogy a **Név** mező pontosan, a kis- és nagybetűket is beleértve egyezik-e a CSS-fájl `font-family` értékével. |
| A betű a szerkesztőben látszik, az élő oldalon nem. | CSS-címes betűnél nézd meg a **Betöltés helye** beállítást. Ha csak Szerkesztő van kiválasztva, váltsd Szerkesztő és élő oldal értékre, és mentsd. Ellenőrizd azt is, hogy a CSS-cím a külső látogatók számára is nyilvánosan elérhető, és nem védi jelszó, tűzfalszabály vagy `.htaccess` korlátozás. |
| A betű egyik oldalon sem töltődik be. | CSS-címes betűnél nyisd meg a CSS URL mezőben lévő címet közvetlenül a böngészőben. Ha nem tölt be, 404-es hibát ad, vagy fájlletöltést kér, a cím hibás, vagy a fájl nem nyilvános. Javítsd a címet vagy a fájl helyét, és próbáld újra. |
| A saját szerveren tárolt betű helyett tartalék betű látszik. | Általában a bővítménybe beírt **Név** nem egyezik a CSS-fájlban deklarált névvel, vagy az `@font-face` blokkban szintaktikai hiba van. A böngésző fejlesztői eszközeinek Hálózat lapján nézd meg, kéri-e a betűfájlt, és sikeres-e a kérés. |
| Az Adobe Fonts betűi a szerkesztőben betöltenek, de mentés után eltűnnek. | A kitből generált Adobe Fonts CSS-címek néha használati korlátozást vagy hivatkozóellenőrzést tartalmaznak. Ellenőrizd, hogy a domained szerepel-e az Adobe Fonts kitjének engedélyezett tartományai között, mert az Adobe letilthatja a CSS betöltését a nem szereplő domainekről. |
| A betű vastagsága vagy a dőlt stílus nem jelenik meg jól. | Feltöltött betűnél ellenőrizd, hogy feltöltöttél-e fájlt az adott vastagsághoz és stílushoz, mert fájl nélküli változat nem jeleníthető meg. CSS-címes betűnél nézd meg, hogy a használni kívánt vastagság szerepel-e a **Vastagság** mezőben. Dőlt szöveghez add hozzá a dőlt változatot `i` utótaggal (például `400i`), és legyen a CSS-ben megfelelő `@font-face` blokk `font-style: italic` értékkel. |