... avagy: Van élet a Google Fonts-on túl is
Egy honlap megjelenésének egyedivé tétele, színvonalának emelése érdekében biztosan sokak fejében megfordult már a gondolat, hogy egyedi betűtípusokat szeretne alkalmazni a honlapon, mondjuk a bannerben (Title), jelmondatban (Slogan), vagy akár a cikkek, blokkok címében.
Egyik lehetséges megoldás erre a Google Fonts szolgáltatásának igénybe vétele. Nincs is ezzel semmi gond mindaddig, amíg az ilyen speciális, egyedi fontokkal megjelenítendő szövegek nem tartalmaznak kifejezetten magyar ékezetes karaktereket: ő,Ő illetve ű,Ű betűket. Mihelyst azonban olyan szövegeket kell kiírni, mint például "Hőtűrő törölköző", Tűsarkú cipő" stb, előbukkan a Google Fonts hibája... Az általuk "szolgáltatott" fontkészletek legtöbbször nem tartalmazzák a Central European (Windows 1250) kódtáblában lévő magyar, szlovák, román, bolgár nyelv sajátos betűit.
A probléma megoldása a "Csináld magad" módszer, amire egyszerű lehetőség kínálkozik a stíluslapban definiált saját fontokkal. Ha beírod keresődbe a @font-face kifejezést, rengeteg találatot kapsz, így ezekkel most nem is igen kívánok túlzottan foglalkozni. Maradva a lényegnél:
Hogyan csináljuk a legegyszerűbben? Íme:
Példa font: a Berliner
1.) A használni kívánt font Windows-ban általában .ttf (TrueType) vagy .otf (OpenType) formátumú. Ehhez még szükséges a font .eot (Embedded OpenType) formátumú, esetleg a .woff (Web Open Font Format) és/vagy .svg (Scalable Vector Graphics) változatára, mely(ek)et egyszerű online konverter(ek)rel elkészíttethetünk;
2.) Sablonunk mappája alatt hozzunk létre - értelemszerűen elnevezve - a fonts mappát:
<joomla_gyökérmappa>/templates/<sajátsablonneve>/fonts
2.1) Töltsük fel ebbe a mappába fontjainkat FTP-vel
<joomla_gyökérmappa>/templates/<sajátsablonneve>/fonts/berliner.otf
<joomla_gyökérmappa>/templates/<sajátsablonneve>/fonts/berliner.eot
3.) Sablonunk stíluslapjában végezzük el a következőket:
3.1) Célszerűen a [template].css fájl elején, definiáljuk fontjainkat a @font-face deklarációval:
/* Berliner font definíció */
@font-face {
font-family: "Berliner";
src: url('/../fonts/berliner.otf'),
url('../fonts/berliner.eot') format('embedded-opentype');
font-style: normal;
}
3.2) A sablonban lévő, módosítani kívánt stílusoknál állítsuk be a font képét a font-family deklarációval (itt pl. az oldal fejlécében lévő oldalcím betűtípusát állítjuk be. A példasablon Artisteer-rel készült, ezért látható itt az .art előtag):
.art-logo-name
{
display: block;
text-align: left;
font-family: "Berliner";
font-size: 48pt;
font-weight: bold;
padding: 0;
margin: 0;
color: #29291E !important;
}
Megjegyzések:
A különböző böngésző verziók különféleképpen kompatibilisek a @font-face deklarációval és az .eot, .otf, .woff, .svg formátumokkal. Ezek összehasonlító táblázatai az alábbi oldalakon tekinthetők át:
http://caniuse.com/fontface
http://caniuse.com/eot
http://caniuse.com/woff
http://caniuse.com/ttf
Ha a font neve szóközt tartalmaz, akkor azt a @font-face és font-family deklarációknál idézőjelek közé kell tenni, pl.: "DinPro Regular". Célszerű tehát ezt eleve elkerülni, így inkább szóköz nélküli neveket válasszunk.
S végül itt egy példa, a Berliner font alkalmazására
