Egyedi betűtípusok hozzáadása

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 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:

   @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.