# A betűtípusok nem jelennek meg az éles oldalon

> A Google Fonts vagy az egyedi betűtípusok a szerkesztőben látszanak, az éles oldalon nem: CORS-hiba, vegyes tartalom, URL-ek és gyorsítótárak.

A Google Fonts vagy az egyedi betűtípusok (Elementor Pro) a szerkesztőben jól látszanak, de az éles oldalon nem jelennek meg.

## Lehetséges okok

Két gyakori ok van, külön-külön és együtt is előfordulhatnak:

- **CORS-szabálysértés:** a böngésző blokkolja a más eredetről érkező betűtípus-kérést.
- **Vegyes tartalom:** a biztonságos (HTTPS) oldal nem biztonságos (HTTP) kapcsolaton próbál betűtípust betölteni.

Tipikus helyzetek:

| Helyzet | Ok |
| --- | --- |
| A webhely költöztetése után | A költöztetéskor (helyi vagy teszt webhelyről) a címek megváltoznak, de az Elementor által generált CSS-fájlok `@font-face` szabálya még a régi címre mutat. A böngésző a CORS miatt blokkolja. |
| SSL-tanúsítvány telepítése után | Az Elementor `http://` címmel mentette a betűtípusokat, az oldal már `https://` alatt fut, ezért a böngésző blokkolja a vegyes tartalmat. |
| A webhely címének megváltoztatása után | Tartománycsere, aldomain, almappa vagy HTTP-ről HTTPS-re váltás után elavult címek maradnak a CSS-fájlokban. |
| A WordPress beállításai még HTTP-t használnak | Ha a **WordPress cím (URL)** és a **Honlap cím (URL)** `http://` kezdetű, az Elementor is ezt használja a betűtípusok címeiben. |
| HTTP-n lépsz be az adminba | A WordPress a munkamenet alatt minden belső címet HTTP-vel ad vissza, és az Elementor ezeket menti a CSS-fájlokba. |

## Előzetes ellenőrzés

Nézd meg, hogy az egyedi betűtípus-fájlok a szerveren vannak-e, és megfelelőek-e a jogosultságok:

1. Nyisd meg a `/wp-content/uploads/elementor/fonts/` mappát.
2. Győződj meg róla, hogy ott vannak a betűtípus-fájlok (WOFF2 és WOFF), és egyeznek az Elementorban beállított vastagságokkal és stílusokkal.
3. Ha a fájlok hiányoznak vagy sérültek, töltsd fel újra őket, és ürítsd a gyorsítótárakat.
4. A tárhelyszolgáltatódnál ellenőrizd a jogosultságokat: a mappák 755-ösek, a fájlok 644-esek legyenek.

## Megoldás

1. **Mindig biztonságos kapcsolaton lépj be.** Győződj meg róla, hogy az adminisztrációs felületet `https://` címen éred el, nem `http://` címen. Ha lehet, kérd meg a tárhelyszolgáltatódat, hogy minden `http://` kérést irányítson át `https://` címre. Ha a webhelyed HTTP-t használ, ugorj a 3. lépésre.
2. **Állítsd HTTPS-re a webhely címét.**
   1. A WordPress adminban nyisd meg a **Beállítások → Általános** oldalt.
   2. Ellenőrizd, hogy a **WordPress cím (URL)** és a **Honlap cím (URL)** is `https://` kezdetű-e.
   3. Ha nem, szerkeszd őket, és kattints a **Módosítások mentése** gombra az oldal alján.
3. **Használd az URL cseréje eszközt, majd töröld a fájlokat és adatokat.** A lépések az [URL-váltás utáni hibák](https://hub.hellowp.io/hu/plugins/elementor/hibaelharitas-url-valtas-utan-nem-mukodik/) és a [Fájlok és adatok törlése](https://hub.hellowp.io/hu/plugins/elementor/hibaelharitas-fajlok-es-adatok-torlese/) fejezetben vannak.
4. **(Nem kötelező) Állítsd vissza a Google Fonts betöltését.** Ez jelezheti a gyorsítótár-rétegeknek, hogy újragenerálják a betűtípus-hivatkozásokat. Az Elementor a Google Fonts `font-display` tulajdonságát állítja:
   1. Nyisd meg az **Elementor → Beállítások** oldalt.
   2. Kattints a **Haladó** fülre.
   3. A **Google Fonts betöltése** legördülő listában válassz másik értéket.
   4. Kattints a **Módosítások mentése** gombra.
   5. Az oldal újratöltődése után állítsd vissza az eredeti értéket, és mentsd újra.

   ![A Haladó fül a Google Fonts betöltése beállítással](./kepek/hibaelharitas-halado-ful-google-fonts.webp)

   *A Haladó fül a Google Fonts betöltése beállítással* (https://minta-bolt.hu/wp-admin/admin.php?page=elementor-settings)

   A képen a **Google Fonts betöltése** beállítás látszik, alapértéke **Csere**.
5. **Ürítsd a gyorsítótárakat** ebben a sorrendben:
   - kiszolgáló gyorsítótára: a tárhely vezérlőpultján, vagy kérd a tárhelyszolgáltatótól;
   - webhely gyorsítótára: gyorsítótár-bővítmény;
   - CDN gyorsítótára: a CDN-nél vagy a tárhely vezérlőpultján;
   - böngésző gyorsítótára: a többi után.

Ha még mindig hibás:

- kapcsold ki az összes bővítményt az Elementoron és az Elementor Pro-n kívül, majd kapcsold vissza őket egyenként;
- válts a Hello Elementor sablonra. Ha így megoldódik, a sablon készítőjét kérdezd.

## Költözés vagy tartománycsere után

A költöztetések után az útvonalak gyakran a régi tartományra mutatnak. Ilyenkor:

- töröld a fájlokat és adatokat,
- ellenőrizd a webcímeket,
- mentsd újra a közvetlen hivatkozásokat (**Beállítások → Közvetlen hivatkozások**, majd **Módosítások mentése**).

## Így előzheted meg a jövőbeli gondokat

- Tartsd az egész webhelyet HTTPS-en: a WordPress és a webhely címe `https://` legyen, kényszerítsd a HTTPS-t a kiszolgálón, és ne írj bele HTTP-címeket kézzel a kódba vagy a CSS-be.
- Tartománycserénél és élesítésnél cseréld az URL-t, és generáld újra a fájlokat.
- Ne optimalizálj túl agresszíven: ha gondot okoz, zárd ki az Elementor CSS- és JS-fájljait az összevonásból és tömörítésből, és minden módosítás után ürítsd a gyorsítótárakat.
- Frissítsd a WordPresst, a sablont, az Elementort és az Elementor Pro-t, a nagyobb módosításokat pedig előbb próbáld ki egy tesztwebhelyen.