Egyéni betűtípusok használata

Probléma

Az iniciálék igazán akkor erősek, ha más betűtípussal írjuk őket. A böngészők alapértelmezetten igen kevés, úgynevezett, "web-safe" fontot támogatnak, főleg a különleges betűtípusok terén kicsi a választék. Ha egyéni kinézetre van szükségünk, magunknak kell utánajárnunk és beillesztenünk a kódba.

Megoldás menete

Senkit se ijesszen el a cím háttere, a cikk azért kapott "közepes" besorolást, mert sok pepecseléssel jár egy igazán egyedi font beillesztése, de nem nehéz. Főleg, ha van Dropbox felhasználónk.
Az elméleti háttér egyszerű: egy helyen belenyúlunk a kódba, és manuálisan hozzáadjuk a kérdéses betűtípust, majd átnavigálunk oda, ahol használni akarjuk, és az előző cikkben látott font vagy font-family tulajdonságnál beállítjuk az adott szövegre vagy betűre.
Több lehetőségünk van, attól függően, web-safe fontot akarunk beágyazni, Google Fontokat használunk, vagy valami még ennél is egyedibbre van szükségünk – akár magunk szerkesztette fontokra! Na, azért azt nem fogom elmagyarázni, van ennek saját irodalma, a lényeg az, hogy nem lehetetlen. A beillesztés is ebben a sorrendben lesz egyre nehezebb. A web-safe fontokhoz nem kell semmit tennünk, a böngésző automatikusan ismeri mindet, így azt csak használnunk kell majd. A Google Fontokhoz a Google Fonts honlap ad segítséget, de ha a Személyre szabás menüben valahol beállítottuk, például egy címhez, azt a betűtípust máshol is felhasználhatjuk. Ha nem, manuálisan kell hozzáadnunk, ami viszonylag egyszerű. Nem ilyen könnyű a helyzetünk, ha egyéni fontokra van szükségünk, mert ezeket fel kell töltenünk valahová, ahonnan nyilvánosan elérhetőek (hosztoljuk), majd onnét tudunk rájuk hivatkozni. A Dropboxot fogjuk használni, habár vannak más módszerek is, ez az egyik legnépszerűbb megosztó oldal. Ha a Google nem idén állítaná le a Drive-on keresztüli hosztolási lehetőséget, szívem szerint azt javasolnám, mert mégis maradjunk a Google berkein belül, de augusztusban úgyis át kell állni másra. Helyette van más lehetőség, a legtöbb fizetős, mint a Google Cloud Storage vagy a Google App Engine használata, esetleg a Google Firebase Hosting, de ez ágyúval verébre lövés, mert ezeket teljes weboldalak hosztolására tervezték. Ingyenes lehetőség még a GitHub használata, ha kisebb .woff fájlokat szeretnének feltölteni.

Megoldás

Első esetben egyedül azt kell tudnunk, mik a használható betűtípusok. Ehhez viszont ismernünk kell a betűtípus-családokat.
Az első és leggyakrabban használt a serif. A legismertebb példája a Times New Roman betűtípus, és főleg nyomtatásban találkozni vele. A serif fontok a kijelzőn nem mindig működnek jól. A család általános jellemzője, hogy a betűk apró talpakkal vannak ellátva, ami a régi könyvnyomtatási, betűvésési hagyományokra vezethető vissza. Főleg hosszabb, írott szöveghez javasolt betűcsalád, rendkívül elegáns megjelenést kölcsönöz a blognak.
A másik nagyon gyakori család a sans-serif. Ezeknek a betűknek nincs talpa, emiatt modernebb kinézettel rendelkeznek, mint a serif fontok. Monitoron remekül működnek! Szintén hosszabb szövegnek állnak jól. Az Arial betűtípus is ide sorolható.
A monospace, magyarul egyenlő szélességű fontok családja az írógéppel gépelt szöveget idézi. A Courier New a legismertebb példa. Előszeretettel használják, ha gépelt szöveget kell mimikálni, vagy számítógépes adatot kell megjeleníteni. Hosszabb szöveg is írható vele, de a szélessége miatt több helyet foglal el, mint más betűcsaládokkal írva.
Dekoratív fontok tartoznak a script, más néven handwriting, azaz kézzel írott fontok közé. Mivel gyakran dőlt betűs betűkből állnak, cursive (kurzív) néven is emlegetik őket. Hosszabb szövegekhez nem kifejezetten alkalmasak, inkább figyelemfelkeltő jellegű szövegrészekhez használhatóak.
A display család az olyan egyedi fontokat gyűjti, amik az előző kategóriákba nem fértek bele. Feltűnő szövegekhez, címekhez alkalmasak, ám a fontok jellegéből adódóan több soron keresztül nagyon fárasztó az ilyen betűtípusokat nézni.

A web-safe fontok főleg az első három kategóriából kerülnek ki. Itt egy összefoglaló a leggyakrabban használt típusokról. Használatuk egyszerű: csak nyissuk meg a Személyre szabás menüben a Speciális táblán a Stíluslap (CSS) hozzáadása pontot, állítsuk be a megfelelő osztályhoz vagy elemhez a font-family, esetleg a font tulajdonságot, és már használhatjuk is. A megfelelő böngésző-kompatibilitás elérése érdekében előbb a font teljes nevét szokás kiírni (ha több szóból áll, dupla idézőjelek közé téve), utána (vesszővel elválasztva) jöhet egy "általánosabb" név, majd a betűcsalád. Ezek a tartalék meghatározások, és ha a böngésző az elsővel nem boldogul, ugrik a következőre, és így tovább. A Times New Roman például Windows alatt tökéletesen megjelenik; Linux vagy OS-X (Mac) viszont a Times betűtípust használja helyette. Mint már tudjuk, a font a serif családba tartozik. Így, ha egy szöveget ezzel a betűtípussal akarunk megírni, használjuk ezt a fajta deklarációt.

See the Pen dOaMQx by Szuzs (@szuzs) on CodePen.

Természetesen lehet egy sorba írni, csak akkor nem fért volna ki rendesen... Ugyanígy minden másnál is. Ha nem vagyunk biztosan a betűcsaládban vagy a betűtípus pontos nevében, esetleg abban, hogy milyen tartalék típust határozzunk meg, a net mindig készséggel segít. Ha más nem működik, a forráskódban mindig meg tudjuk nézni.

Ha ennél különlegesebb betűtípusra vágyunk, a Google hatalmas csomag ingyenes és szabadon használható fontot bocsát a rendelkezésünkre! Ezen a linken elérhetőek. Van egy összetett keresési lehetőség is, továbbá megnézhetjük, mely népszerű betűtípusokkal mutat jól a választott font. Ha nagyobb szöveghez keresünk betűtípust, nézzük a Paragraph nézetet, ha csak címhez, a Sentence is megfelelő. A párosítások a font "Pop out" gombján a Pairings fülön láthatóak. Természetesen a népszerűbb választások eleve integráltak a Bloggerbe, a Személyre szabás menüben az adott elemnél, ha lehetőségünk van betűtípust váltani, magunk is választhatunk egyet. Most arról az esetről beszélek, ha nem erre van szükségünk, mert van olyan szövegrészletet szeretnénk más betűtípussal megjeleníteni, amit a menüben nem tudunk külön kezelni (például iniciálét), vagy olyan dizájnt használunk, ami régi típusú sablonra épül, ahol nincs is ilyen menü. (Ez esetben mondjuk a CSS hozzáadása is nehezebb, de akinek egyedi sablonja van, az relatíve ritkán akar belenyúlni.)
Válasszuk ki a nekünk tetszőt betűtípust. Ha még nem használtuk a blogon, szükségünk lesz egy hivatkozásra, amivel betölthetjük a fontokat. Ha már használtuk, mindez nem szükséges, mindent betöltöttünk, egyszerűen írjuk a megfelelő helyre a típus nevét, és kész. Tegyük fel, hogy még nem volt hozzá szerencsénk. Ez esetben a font "Quick Use" gombjára kell kattintanunk, és itt kövessük a leírtakat. Ha több stílus is elérhető, a nekünk szükséges(eke)t válasszuk ki, közben ügyeljünk, hogy az oldalbetöltést ne nagyon dobjuk meg. A következő a karaktertábla, általában a sima latin elég. (Ha nem, mert olyan szöveget írunk, adjuk hozzá azokat is, ami kell.) A harmadik pont a lényeges rész. A Standard fül alatt látható stíluslap-hivatkozást másoljuk ki, majd lépjünk át a blogunkhoz. Itt a Sablon, majd a HTML-kód szerkesztése menüt nyissuk meg. Látni fogunk egy <b:skin>...</b:skin> sort, e fölé másoljuk be a kódunkat. Minimális módosításra még szükségük van: a záró kúpos zárójel elé rakjunk be egy perjelet. Mivel a Google a fontot sima HTML kódként adja, ami nem igényel bezárást, ez ütközik a Blogger XHTML formátumával, vagyis kötelező az egyelemű objektumokat is bezárnunk (az ilyeneket nevezik önzáró elemnek). Ha nem tesszük, a Blogger figyelmeztet (nem engedi menteni), de a figyelmeztető üzenet nem mindig mutat a hiba pontos helyére.

Google font beágyazása a HTML-kódba

Mint látható, a link maga elég egyszerű. Ha több betűtípust is hozzá akarunk adni a bloghoz, nem kell mindegyiket egyenként. Vagy egy kollekciót hozunk létre, majd azokat együtt adjuk hozzá, vagy közvetlenül az előbb bemásolt sort szerkesztjük. a css?family= rész után soroljuk fel az összes hozzáadni kívánt betűtípust. Az Indie Flowers és a Lobster betűk együtt a Indie+Flowers|Lobster néven futnak (tehát a több szóból állók plusz jelekkel, a betűtípusok pedig álló vonallal vannak elválasztva). Ezek után a kérdéses betűtípusokat bárhol használhatjuk a blogon. A Google segít: a 4. pontban le is írja, hogyan állítsuk a kérdéses elem betűtípusát, noha ezt már tudjuk, mégis jól jöhet, például a betűcsalád választásánál. Vagyis menjünk a Személyre szabáshoz, ahogy eddig is, Stíluslap hozzáadása, és szerkesszük tovább mondjuk az iniciálénkat, vagy bármely szöveget.

See the Pen gLqrqM by Szuzs (@szuzs) on CodePen.

Ha csak egy bejegyzés (vagy lap) szerkesztése során gyorsan hozzá akarunk adni egy Google fontot, de nem akarjuk az egész oldalra alkalmazni, van egy másik lehetőségünk is. Ekkor csak az adott bejegyzés (vagy lap) terjedelmében használhatjuk, máshol nem, de valószínűleg nincs is rá máshol szükségünk. A trükk az, hogy a bejegyzések (és oldalak) is kaphatnak külön belső stíluslapot, csak az elejére be kell szúrnunk a style tageket, ahogy például a CSS alapozásnál szó volt róla. Tehát kezdjük így a bejegyzést:

<style>
/* Ide jön a kód */
</style>

A megjegyzés helyére pedig beírjuk a következőt:

@import url(https://fonts.googleapis.com/css?family=Lobster);

Ahogy az előbb is, a family= utáni rész tetszés szerint bővíthető (és persze változtatható, ha más betűtípusra van szükségünk... én szeretem a Lobstert, csinos). Ugyanitt beállíthatunk bármely CSS-tulajdonságot (azonosítók vagy osztályazonosítók segítségével), de később is, inline stílus használatával. Ehhez a bejegyzéshez például ezt a módszert használtam.
Egy apró furcsaság van az így importált stílusokkal: az egész oldalra vonatkoznak. A HTML hivatalos szabványából kihúzták a belső stíluslapok adott elemre korlátozási lehetőségét, így ezt nem is tudjuk módosítani. Szerencsére nem okoz problémát az oldal betöltése közben, de ha egy bejegyzésnél speciális fontokat importáltunk, a böngésző CSS-szerkesztője segítségével azokat más elemekre is alkalmazhatja az olvasó, ha akarja, így például átírhatja a cím betűtípusát. Ami nem nagy gond, csak nála lesznek láthatóak a változások, és csak addig, amíg nem frissíti az oldalt.

A Google fontok majdnem minden igényünket kielégítik, de csak majdnem mindet! Mi van, ha valami egészen egyedire van szükségünk? Itt jön a képbe a cikk azon része, ami megérdemli a "közepes" nehézségű besorolást. Keresünk magunknak egy pofás fontot, letöltjük, szükség esetén konvertáljuk, hosztoljuk Dropbox segítségével, majd vagy a Blogger, vagy a Dropbox oldalán beágyazzuk egy @font-face szabályba, és csak ezek után kerül használható állapotba.
Oké, az első lépés egyszerű: keresünk egy fontot. A neten rengeteg olyan oldal van, ami ingyenes fontokat oszt meg, ilyen a DaFont, a FontSquirrel vagy az UrbanFonts. A jogokra mindig ügyeljünk! Ha a szerző korlátozott használatot enged (csak személyes használatra, például), akkor tartsuk tiszteletben. Letöltéskor egy zippelt állományt kapunk egy TTF (TrueType Font) vagy OTF (OpenType Font) típusú fájllal és egy readmevel együtt. Ezt a fontot közvetlenül is beágyazhatjuk a számítógépünkre a fontok mappába (itt írnak róla, hogyan), hogy a munkáinkhoz használjuk. Ez viszont még nem teszi a neten is elérhetővé, tehát nincs más, mint előre: Dropbox hosting! Ehhez kell egy felhasználó, tehát készítsünk egyet itt. A sima, ingyenes, alap felhasználó tökéletes, két és fél giga szabad hely jár vele, aki ezt telerakja fontokkal, az ipari mértékben csinálhatja a beágyazást.
Maga a .ttf fájl is használható fontként, de lassú a betöltése, ezért konvertáljuk előbb. Sokféle netes konverter létezik, a leggyorsabb talán az Online Font Converter. Jelöljük ki a font-face oszlopot, majd menjünk tovább a SELECT FONT(S) menübe, ahol kiválasztjuk a konvertálandó fontokat. A zippelt állományt előbb csomagoljuk ki, és csak a .ttf/.otf fájlt adjuk hozzá. Több fájlt is kiválaszthatunk, ha többet szeretnénk konvertálni. Egyelőre elég egy is. Ha nem történt hiba, akkor a letöltésben egy újabb zippelt mappát kapunk, de már más fájlokkal: lesz benne egy .css fájl is. Ellenőrizzük, ha jónak tűnik, csomagoljuk ki valahová. Mentsük mellé az eredeti .ttf/.otf fájl mellől az olvassel (readme) fájlunkat, hogy egy helyen legyenek. Ha a konvertálás valami ok miatt nem sikerült, nem gond, majd lassan tölt be az oldal, de használhatjuk az eredeti .ttf (vagy .otf) fájlunkat. Most veszi kezdetét a hosztolás.
Hozzunk létre egy mappát a Dropbox oldalunkon a fontoknak. Mindegy, mi a neve. A jobb átláthatóság kedvéért létrehozhatunk almappákat is a különféle fontoknak. Mondjuk én letöltöttem az UrbanFonts oldaláról egy Harry Potteres fontcsomagot (ugyanez fent van a DaFont oldalán is) .ttf-ben, konvertáltam, létrehoztam a Dropbox kliensemben egy "fonts" mappát, azon belül egy "harryp" mappát, majd ide bemásoltam a konvertálás után kapott zippelt állományból a .woff2 fájlt. Ha sima szövegszerkesztővel megnyitjátok az ugyanitt található font.css fájlt, közel sem olyan egyszerűen néz ki, mindenféle .eot, .svg és egyéb kiterjesztések is vannak benne, de ez biztonsági játék. Mi szeretünk veszélyesen élni, és csak a .woff2-t használjuk. Ez tölt be a leggyorsabban. Most pedig, attól függően, mennyire akarunk megint belenyúlni a blog kódjába, két lehetőségünk van. Vagy úgy importáljuk a fontokat, mint a Google betűtípusokat, vagy a Blogger sablonjában létrehozunk egy @font-face szabályt. Ezt csak akkor javaslom, ha biztonsággal mozgunk a HTML-szerkesztés terén, és biztosak vagyunk benne, hogy nem fogjuk elrontani a már meglévő CSS-kódokat. De előbb nyissuk meg a Jegyzettömböt (vagy bármely más, egyszerű szövegszerkesztőt – nem, a Word nem jó).
A @font-face szabály létrehozása egyszerű. Olyan, mint egy elemre több CSS-tulajdonság beállítása, csak ezzel a sorral kezdődik, majd kapcsos zárójelek között jönnek a deklarációk. Meg kell határoznunk a font-family attribútumot (ezen a néven fogunk a betűtípusunkra hivatkozni) és a font-style attribútumot (hogy tudja a böngésző, normál vagy döntött a szöveg). Ha van több, akkor többet is, sőt, minden font-vastagsághoz külön egyet (a font-weight tulajdonság beállításával együtt). Utána az src attribútum fogja meghatározni, hol keresse a böngésző a betűtípushoz tartozó fontot, és itt jön képbe a Dropbox. Ezt az egészet elmentjük, kicsit kiegészítjük a jogi nyilatkozatokkal, majd ha a Bloggeren akarjuk meghatározni a fontot, akkor bemásoljuk a kódba, vagy feltöltjük a Dropboxra. A meglévő font.css fájl jó kiindulási alapot nyújt, ezt szerkesszük át! Az én harryp fontom így néz ki:

@font-face {
  font-family: harryp;
  font-style: normal;
  src: local('harryp'), url('https://dl.dropbox.com/s/56su49dlpnb6fuk/harryp.woff2') format('woff2');
  unicode-range: U+0020-007F;
}

Ha több meghatározás tartozik az src alá, vesszővel válasszuk el. (Sajnos a hosszú URL miatt nem fér ki rendesen.) A local egy ellenőrzés: ha a lokális készletbe letöltöttük a fontot, ne keresse a neten, hanem töltse be helyben. A font (hivatalos) neve áll itt. Ha nem .woff2, hanem más formátum lenne, a formátum-meghatározás helyén is más állna (pl. woff, eot, svg, ttf). Az unicode-range nektek nem kell, csak biztonsági megoldás, mivel a font nem támogatja, csak az alap angol betűket, így beállítottam, hogy máskor meg se próbálja betölteni.
Az url a Dropboxról leszedhető. A .woff2 fájlunkra nyomjunk rá, osszuk meg ("Share"), és kérjük le a megosztási linket, majd másoljuk be az url mögé, aposztrófokkal ellátva, zárójelben. Kis kozmetikázás következik megint: a www helyébe írjuk, hogy dl, és a végéről a ?dl=0 (vagy bármely más szám, ha több verziónk van) részt szedjük le. Így működnie kell. Írjuk a meghatározás elé vagy mögé a jogi szöveget egy kommentbe (itt jön képbe az eredeti olvassel fájl):

/* Harry Potter fonts made by GEM,
downloaded form: UrbanFonts (http://www.urbanfonts.com/)
converted by: Online Font Converter (http://onlinefontconverter.com) */

Na igen, az én fontjaimhoz nem tartozott egy túl hosszú leírás... Lényegében a HP könyvek borítójáról beszkennelte a művész a szavakat és a betűket felvágta fontokká. Nektek, ha más fontjaitok vannak, talán hosszabb ez a szöveg. Én lényegesnek tartottam megjegyezni, hogy mivel konvertáltam és honnét vettem a betűket (és kié az eredeti kredit). Ezt az egészet tehát másoljuk be a skin tagok közé a CSS kódba a változódeklarációs rész után, de még a CSS-meghatározások elé. Vagy...
Másoljuk a Dropbox mappánkba! Ahogy a fontfájlnál, itt is kérjük le a megosztási linket ("Share", link másolása, kozmetikázás: dl a www helyett, vége levágva). Ez úgy viselkedik, mint a Google fontoknál a link, vagyis ugyanolyan hivatkozási linkként beilleszthető a HTML-kódunk elejére (vagy a bejegyzés/oldal elejére az @import kulcsszóval)! Sokkal egyszerűbb. Plusz így minden font egy helyen van, ha később egy másik bloghoz szükségünk van rájuk, azonnal tudjuk linkelni, nem kell a @font-face szabályokat másolgatni. Az enyém ilyen:

<link href='https://dl.dropbox.com/s/7lixzxj7q91w9at/font.css'
    rel='stylesheet' type='text/css'>

Ugyanazok a lehetőségek, mint a Google fontoknál, innentől kezdve. Teljes sablon import, bejegyzésenkénti import, a szükséges helyen pedig használjuk. Remek!

Összefoglalás

Ebben az igen hosszú cikkben összefoglaltuk, hogyan lehet újabb betűtípusokat használni a már létezők mellett. Használtuk a Bloggerbe betöltött betűcsaládokat, a web-safe fontokat, a Google fontjait, végül letöltöttünk és hosztoltunk egyedi fontcsaládokat is. Igyekeztem részletesen elmagyarázni, de ha van még kérdés, ne tartsátok magatokban!