# Egyéni betűtípusok

> Saját betűtípusfájlok feltöltése a WordPress felületén, támogatott formátumok, további formátumok engedélyezése és Google-betűtípusok saját kiszolgálása.

A weboldal tipográfiája nagy hatással van arra, hogyan hat a webhely, ezért érdemes időt fordítani a helyes beállítására. A Bricks bármilyen betűtípust használni enged: a webbiztos betűtípusoktól a Google-betűtípusokon át a saját betűtípusok feltöltéséig a WordPress felületén, a **Bricks → Egyéni betűtípusok** menüpontban. Ez a fejezet az utóbbit mutatja be részletesen. A szerkesztőn belüli kezelésről a [Betűtípuskezelő](https://hub.hellowp.io/hu/plugins/bricks-child/stilusok-betutipuskezelo/) fejezet szól.

Az **Egyéni betűkészletek előtöltése** beállítással (**Bricks → Beállítások → Teljesítmény**) a feltöltött egyéni betűtípusokat előtöltheted, hogy elkerüld a formázatlan szöveg villanását (FOUT).

## Egyéni betűtípus létrehozása és feltöltése

![A Bricks → Egyéni betűtípusok lista, még egyetlen betűtípus nélkül](./kepek/stilusok-egyeni-betutipusok.webp)

*A Bricks → Egyéni betűtípusok lista, még egyetlen betűtípus nélkül* (https://minta-bolt.hu/wp-admin/edit.php?post_type=bricks_fonts)

Új egyéni betűtípus létrehozásához nyisd meg a **Bricks → Egyéni betűtípusok** oldalt, és kattints az **Új egyéni betűtípus hozzáadása** gombra. A lista oszlopai: **Betűcsalád**, **Betűtípus előnézete**, **WOFF2 fájl**, **WOFF fájl** és **TTF fájl**.

![Új egyéni betűtípus szerkesztése: címmező és az első betűtípus-változat sora](./kepek/stilusok-egyeni-betutipus-uj.webp)

*Új egyéni betűtípus szerkesztése: címmező és az első betűtípus-változat sora* (https://minta-bolt.hu/wp-admin/post-new.php?post_type=bricks_fonts)

Először add meg a betűtípus címét. Ez a cím jelenik meg a font-family legördülőben, amikor a szerkesztőben a tipográfiát szerkeszted.

Ezután töltsd fel a betűtípusfájlokat minden változathoz (betűvastagság és betűstílus), amelyet használni fogsz. Egy változat sorában kiválasztható a betűvastagság (például `400 (Normál)`) és a stílus (`Normál`), mellette pedig látszik egy előnézeti szöveg. A sor végén van a **Szerkesztés** és a **Törlés** gomb.

Ha például a normál (400) vastagságú, **Normál** stílusú változathoz feltöltöttél egy `.woff` és egy `.woff2` fájlt, és van 700-as (félkövér) vastagságú, dőlt stílusú fájlod is, kattints a **Betűtípus-változat hozzáadása** gombra, válaszd ki a 700-as vastagságot és a dőlt stílust, majd töltsd fel az ahhoz tartozó fájlokat.

Amikor minden változatot létrehoztál, és minden fájlt feltöltöttél, mentsd a betűtípust a **Közzététel** gombbal. Az új egyéni betűtípus ezután elérhető a szerkesztőben.

Az egyéni betűtípus feltöltése csak a Bricks tipográfiai vezérlőiben teszi elérhetővé. A frontenden való használathoz válaszd ki a betűtípust egy tipográfiai beállításban, például egy elemen, egy globális osztályban, a sablonstílusban, az oldalbeállításokban vagy a sablonbeállításokban.

Ha az egyéni betűtípusnak több vastagsága vagy stílusa van, a megfelelő betűcsaládot és a vastagságot/stílust ugyanabban a tipográfiai vezérlőben együtt válaszd ki. Így a Bricks a beállítást a megfelelő mentett változathoz tudja párosítani, különösen, ha az **Egyéni betűkészletek előtöltése** be van kapcsolva.

A betűtípus előnézetét a szerkesztésekor és az **Egyéni betűtípusok** oldalon is láthatod.

## Támogatott betűtípusformátumok

Alapból ezek a formátumok engedélyezettek:

- **WOFF** (Web Open Font Format): az ajánlott formátum, amelyet minden modern böngésző használ. A betűtípusadatok tömörítettek, ezért gyorsabban töltődnek be, mint ugyanaz a TrueType vagy OpenType fájlként. Az IE9-től felfelé teljes a támogatottsága.
- **WOFF2** (Web Open Font Format 2.0): TrueType/OpenType betűtípus a WOFF 1.0-nál is jobb tömörítéssel. IE böngészőkben nem támogatott.
- **TTF** (TrueType Font): tömörítetlen betűtípusadat, részleges IE9+ támogatással.

Az ajánlott formátum a WOFF, mivel a jelenlegi böngészők nagy többsége támogatja.

## További betűtípusformátumok engedélyezése

Ha az IE8-at is támogatnod kell, programozottan engedélyezheted az EOT formátumot (vagy bármely másikat) a következő kód hozzáadásával a Bricks gyermektémádhoz:

```php
add_filter( 'bricks/custom_fonts/mime_types', function( $mime_types ) {
  // EOT formátum engedélyezése az IE9-nél régebbi böngészők támogatásához
  array_unshift( $mime_types, ['eot' => 'font/eot'] );

  return $mime_types;
} );
```

Ha legalább egy egyéni betűtípust létrehoztál, minden font-family vezérlőben a **Szabványos betűtípusok** alatt megjelenik az **Egyéni betűtípusok** szakasz az összes egyéni betűtípusoddal.

## Tipp: GDPR-megfelelés a Google-betűtípusok saját kiszolgálásával

Ha Google-betűtípust használsz a weboldaladon, a betűtípus megjelenítése előtt a látogatók hozzájárulását kell kérned. Ezt elkerülheted úgy, hogy letöltöd a használni kívánt Google-betűtípusok összes változatát, és egyéni betűtípusként feltöltöd a Bricks-be.

A Bricks lehetővé teszi a Google Fonts teljes letiltását is a Bricks **Teljesítmény** beállításai között a **Google Fonts letiltása** kapcsolóval.

![A Bricks beállításai, Teljesítmény lap, ahol a Google Fonts letiltása és az Egyéni betűkészletek előtöltése is megtalálható](./kepek/elso-lepesek-2-beallitasok-teljesitmeny.webp)

*A Bricks beállításai, Teljesítmény lap, ahol a Google Fonts letiltása és az Egyéni betűkészletek előtöltése is megtalálható* (https://minta-bolt.hu/wp-admin/admin.php?page=bricks-settings)

A letöltést a szerkesztőben a [Betűtípuskezelő](https://hub.hellowp.io/hu/plugins/bricks-child/stilusok-betutipuskezelo/) is elvégzi helyetted: egy Google-betűtípus letöltése egyéni betűtípust hoz létre a webhelyen.