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

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 és a Fájlok és adatok törlése 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.

   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.