Google Font WordPress-be építése

A Google Web Fonts nagyon hasznos és egyben fontos szolgáltatás webmesterek számára, mely lehetővé teszi, hogy különféle betűtípusokat építsünk be a weboldalainkba.

Ezzel régen az volt a probléma, hogy ha a weboldalra látogatónak a számítógépén nem volt telepítve az adott betűtípus akkor az automatikusan le lett cserélve egy másikra. Ez nyilván problémát jelentett a weboldal tulajdonosoknak, mivel a tartalom nem úgy jelent meg a látogatók számára ahogyan azt ők szerették volna. Ez a Google szolgáltatás erre a problémára ad megoldást. A betűtípusok könnyen hozzáadhatók a weboldalhoz, és így már nem jelent problémát, ha az nincs telepítve a látogató számítógépén.

Az adatbázisukban jelenleg több mint 600 betűtípus található, melyek ingyen felhasználhatók weboldalakon. Természetesen a WordPresshez is hozzá lehet adni Google Web Fontot, készült is erre a feladatra számtalan plugin, de ebben a tutorialban megnézzük, hogyan lehet manuálisan beépíteni Google Web Fontot WordPress oldalunkba.

Először is látogass el a Google Web Font oldalára. Itt válaszd ki a betűtípust amelyik tetszik. A “Preview Text” mezőbe írj be egy teszt szöveget, hogy lásd, hogyan néz ki az adott betűtípus. Érdemes beírni az összes magyar ékezetes betűt, mivel nem minden betűtípusban találhatók meg.

Ha kiválasztottad a betűtípust, kattints az “Add to Collection” vagy a “Quick-use” gombra. Kiválaszthatsz és használhatsz több betűtípust is az oldaladon, de érdemes mindig csak azt telepíteni amelyiket használod, mert több betűtípus lelassíthatja az oldalt. Ezután kapsz egy kódot, amelyet be kell illesztened az aktív WordPress theme header.php fájljába a tag elé. Google azt ajánlja, hogy ez legyen az első elem a részben. Háromféle képpen lehet elhelyezni a kódot a weboldalon, a “Standard”, vagyis a szokásos stíluslap beillesztéssel, @import vagy Javascript használatával. Érdemes a Standard módot választani, mert így elkerülhetők bizonyos böngésző hibák. A mi kódunk:

<link href='http://fonts.googleapis.com/css?family=Orienta' rel='stylesheet' type='text/css'>

Ezután már csak a CSS kódot kell beilleszteni a theme style.css fájljába, vagyis cseréld le a jelenlegi “font-family” nevűt.

font-family: 'Orienta', sans-serif;