Sokszor fordulhat elő, hogy a Gantry keretrendszer alapú Joomla! oldalunkon olyan betűtípust szeretnénk használni, amelyet nem tartalmaz alapesetben a rendszer. Pár lépésből könnyedén orvosolhatjuk ezt a problémát.

Ebben a példában a Bloody betűtípust szeretném hozzáadni a sablonhoz.

1. Lépés: Egyedi betűtípus fájlok hozzáadása

A Bloody az egy ingyenes betűtípus, amit le tudunk tölteni a Fontsquirrel oldaláról. (Webfont kit -> Download @font-face kit). A letöltött ZIP-ben található fájlokat

  • BLOODY-webfont.eot
  • BLOODY-webfont.svg
  • BLOODY-webfont.ttf
  • BLOODY-webfont.woff

tömörítsük ki a következő mappába: /templates/[TEMPLATE]/fonts/

Gantry - Egyedi betűtípus hozzáadása 01 - Joomla! Magyarország

2. Lépés: CSS kódok hozzáadása

Hozzuk létre a /templates/[TEMPLATE]/css/ elérhetőségben az egyedi css fájlunkat gantry-custom.css néven, majd adjuk hozzá  következő sorokat:

    /* Adding Font BLOODY */
    @font-face {
    font-family: 'BloodyNormal';
    src: url('../fonts/BLOODY-webfont.eot');
    src: url('../fonts/BLOODY-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/BLOODY-webfont.woff') format('woff'),
    url('../fonts/BLOODY-webfont.ttf') format('truetype'),
    url('../fonts/BLOODY-webfont.svg#BloodyNormal') format('svg');
    }
    .font-family-bloody {
    font-family: 'BloodyNormal',Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-style: normal;
    }

3. Lépés: Betűtípus hozzáadása az adminisztrációs felülethez

Nyissuk meg a /templates/[TEMPLATE]template-options.xml fájt és adjuk hozzá az új betűtípust (kilencedik sor):

    <field name='family' type='fonts' default='s:helvetica' primary='helvetica' label='FONT_FAMILY' isbodyclass='true' setbyurl='true' setinsession='true' setbysession='true' setincookie='true' setbycookie='true'>
    <option value='geneva'>Geneva</option>
    <option value='georgia'>Georgia</option>
    <option value='helvetica'>Helvetica</option>
    <option value='lucida'>Lucida</option>
    <option value='optima'>Optima</option>
    <option value='palatino'>Palatino</option>
    <option value='trebuchet'>Trebuchet</option>
    <option value='bloody'>Bloody</option>
    </field>

Ezek után lépjünk be a sablonuk Style menüpontjába, majd ellenőrizzük, hogy megjelenik-e a listában az imént hozzáadott új betűtípust.

Gantry - Egyedi betűtípus hozzáadása 02 - Joomla! Magyarország

A Gantry sablon alapértelmezett betűtípusa a Helvetica, amivel a következőképpen néz ki a főoldal:

Gantry - Egyedi betűtípus hozzáadása 03 - Joomla! Magyarország

Most állítsuk át az alapértelmezett betűtípust Bloody-ra, majd frissítsük főoldalt és nézzük meg az eredményt:

Gantry - Egyedi betűtípus hozzáadása 04 - Joomla! Magyarország

Evvel a leírással bármennyi betűtípus hozzáadható, továbbá alkalmazhatunk több féle betűtípust is egy adott oldalon.

Betűtípus használata egyedi elemeknél

Szükség esetén beállíthatjuk, hogy mely helyeken jelenítődjön meg a beállított Bloody betűtípus.

Ha kicseréljük a 2. pontban hozzáadott css kódot az alábbiakra:

    /* Adding Font BLOODY */
    @font-face {
    font-family: 'BloodyNormal';
    src: url('../fonts/BLOODY-webfont.eot');
    src: url('../fonts/BLOODY-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/BLOODY-webfont.woff') format('woff'),
    url('../fonts/BLOODY-webfont.ttf') format('truetype'),
    url('../fonts/BLOODY-webfont.svg#BloodyNormal') format('svg');
    }
    .font-family-bloody .title, .font-family-bloody .component-content h2{
    font-family: 'BloodyNormal',Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-style: normal;
    }

akkor kizárólag a komponens és a modulcímek fognak átíródni Bloody betűtípusra, míg a tartalom az alapértelmezett Helvetica marad.

Gantry - Egyedi betűtípus hozzáadása 05 - Joomla! Magyarország

Forrás: gantry-framework.org