Barion Pixel
Segédlet

Webfontok okosan

2021. június 10. | Bognár Péter

# # # # # # #

Ugyan már sokszor leszögeztem, hogy a webdesignban az egyik legfontosabb szerepet a képek töltik be, természetesen nem szabad alábecsülni a szöveg és a feliratok súlyát, elvégre mégiscsak ott történik az információ átadása. Ha pedig szövegről beszélünk, a frappánsan, lényegretörően és jó stílusban megírt tartalom mellett a tördelés, elrendezés és általában a szöveg vizuális tálalása is nagyon fontos. Ezt a design mai állása szerint nem lehet elképzelni különböző, gondosan összeválogatott betűtípusok nélkül

A web kezdeti korszakában a felirat az felirat volt, nem lehetett válogatni: ha nem tetszett a Times New Roman, maximum képekbe lehetett csomagolni a mondanivalódat. Persze hamar megjelent rá az igény, hogy másképp is lehessen írni, de a fontok használhatósága lényegében azon múlt, az egyes felhasználók gépére fel van-e telepítve a vágyott betűkészlet. A helyzetet 1996-ban a Microsoft próbálta meg orvosolni azzal, hogy elérte, hogy egy csokornyi font ingyenesen elérhető legyen mindenki számára, így Windowson és Macintosh számítógépeken is egyaránt lehetett rá számítani, hogy ha valaki Arial vagy Trebuchet fonttal tervezett meg egy weboldalt, akkor azzal is fog megjelenni a felhasználó böngészőjében. (A projekt neve Core Fonts for the Web volt, és az Andalé Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana és Webdings készleteket tartalmazta).

Ez ugyan sokat jelentett, de még mindig nem adott szabad kezet a designereknek. Ha valaki bonyolult, vagy extravagáns fontokat alkalmazó tervekkel állt elő, vagy fel kellett, hogy adja az álmait, vagy olyan nyakatekert megoldásokat kellett bevetnie, mint a Flash, vagy a karakterek JavaScripttel vektorrá konvertálása. A megváltás első morzsáit persze a CSS elterjedése hozta el, bár az út nem volt tökéletesen zökkenőmentes. A weboldal anyagával együtt letölthető fontokra alapuló rendszerek fejlődésnek indultak és lassan elvezettek a mai helyzethez. Fontos mérföldkő még ebben a történetben a Google Fonts 2010-es elindulása. A Google, mint általában, itt is az egész web megreformálását tűzte ki maga elé, és ingyenessé, tehát bárki által elérhetővé és használhatóvá tett egy olyan szolgáltatást, amit addig mások, mint pl. a Typekit (a mai Adobe Fonts) csak előfizetési díjért cserébe ajánlottak. 

A Google Fonts használata

A Google Fonts egy csodás erőforrás, a cikk írása pillanatában 1052 ingyenes betűtípust tartalmaz, amelyet szabadon letölthetünk a különböző design projektjeinkhez vagy bármilyen hétköznapi felhasználásra (Figyelem! Sajnos nincsen rá garancia, hogy az ott található készletek tartalmazzák a magyar ABC betűit.), de természetesen a honlapjaink designjához is ideálisan használhatóak. 

A fontok ugyan, ahogy írtam, mind letölthetőek, ám igazából Google atyuskánk nem ezt a felhasználást propagálja, hanem a fontok beágyazását. Mivel a keresőcég hatalmas globális szerverparkkal rendelkezik, viszonylag biztonságos fogadás arra tenni fel az oldalunk működését, hogy a Google szerverei tempósan működni fognak és megbízhatóan küldik a fontokat minden egyes oldalletöltésnél – legalábbis az internet jelentős része így gondolja (az oldal jelenleg olyan 51 trillió fontmegtekintésnél tart, kb. a web fele használja ezeket a betűket, a szám pedig egyre nő). 

Ha erre adod a fejed, a szükséges fontokat, pontosabban stílusokat kijelölve (elvégre ha nem variábilis fontról beszélünk, a félkövér, dőlt és különböző fokokban (300-as, 400-as, 700-as, stb) vastagságú változatok mind-mind külön betűtípust, azaz betöltendő fájlt jelentenek) az oldal jobb szélső oszlopában megkapjuk azt a két kódrészletet, amit egyrészt a weblapok html kódjában a head részbe, másrészt a fontok felhasználási területehez kapcsolódó css kódba kell egyszerűen bemásolni, hogy a vágyott font megjelenjen az oldalunkon. 

A kódrészleteket megfigyelve láthatjuk, hogy a böngésző az oldal betöltésekor a https://fonts.gstatic.com és https://fonts.googleapis.com/ oldalakkal lép kapcsolatba, innen kapja le a betűtípusokat, valamint, hogy a css kódban fallbacket, azaz biztonsági tartalékokat is beállít, ha mégsem működnének valamiért a spéci fontok. Ez ilyenkor a böngésző alap betűkészletei egy-egy variánsát veszi elő (serif, sans-serif és cursive stílusokban).

A bemásolandó kódhoz választhatunk a link és @import opciók közül. Felhasználásában ez annyi különbséget jelent, hogy az @import esetében az első kódrészletet nem a html kódba, hanem a css stíluslap elejére kell betennünk.

Fontok hozott anyagból

Érdekes gondolatkísérlet elképzelni, hogy mi történne, ha valamiért egyik napról a másikra megszűnne (vagy legalábbis szünetelne) ez az ingyenes, teljesen karitatív okokból létrehozott és ezért teljesítésre valójában nem is kötelezhető szolgáltatás. Nem valami megnyugtató gondolat, igaz?

Van persze arra is mód, hogy a kezünkbe vegyük a kezdeményezést. A megoldás a self-hosting, azaz a fontok elhelyezése a képek, stíluslapok és egyéb, a honlaphoz tartozó anyagok mellett. Ebben alapvetően a @font-face css szabály siet a segítségünkre. A lenti példából láthatjuk, hogy a css kód elején kell elhelyezni a fontot betöltő hivatkozást, azután a megfelelő szövegrészleteknél egyszerűen a @font-face alatt megadott néven tudunk hivatkozni a betűtípusra.  

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

Formátumok

Nem mindegy persze,hogy milyen formátumban töltjük fel a betűtípusainkat a honlapon, mint a webdesignban mindenhol, itt is a méret a lényeg – minél kisebb, annál nagyobb az öröm! A fontok – különösen a weben használt fontok esetében négy formátum szokott szóba kerülni (meg még egy-kettő kuriózum).

TTF

A nagy klasszikus. A True Type Font a vektoros betűtípusok alapvető számítógépes formátuma – eredetileg éppen az Apple fejlesztette ki. Régi motoros, és éppen ezért nem kifejezetten a méretére optimalizált. Nem árt tudni, hogy a TTF formátumú fontok belső leírásában jelezheti a font tulajdonosa, ha nem engedélyezi a betűtípus beágyazását. Régebbi böngészőknek problémákat okozhat, ha ez esetleg be van kapcsolva.

OTF

A TTF „ablakos” párja, az Open Type Font a nevével ellentétben nem lülönösebben nyitott: ezt a megoldást a Microsoft és az Adobe fejlesztette ki közösen, válaszul az Apple fontkészleteire. Mára ugyanúgy általánosan, mindenhol elérhető formátummá vált. 

WOFF

Ez nem valami Star Wars faj neve, hanem a Web Open Font Format rövidítése. A Mozilla fejlesztette, és ahogy a neve is mutatja, már kifejeleztten a webes használatra optimalizálták. Igazság szerint a Woff nem igazi fontkészlet-formátum, hanem inkább egy tömörítési módszer, ami TTF vagy OTF fontokat csomagol be gyorsabban felhasználható méretbe. Mára gyakorlatilag minden böngésző használni képes (Chrome 6-tól, Firefox 3.6-tól és Safari 5.1-től fölfelé, többek között).

WOFF2

A Woff fejlesztett változata (teljes nevén Woff 2.0), lényegében ugyanazt tudja, csak a korábbihoz képest 30%-kal hatékonyabb tömörítést ígér, és az újdonsága miatt (2014-ben mutatták be) kicsit korlátozottabb a támogatása (Chrome 36, Opera 26, Firefox 35, Edge 14 és fölfelé).

SVG

Lehetséges éppenséggel a fontjainkat a jól ismert SVG formátumba is átkonvertálni, de nem nagyon éri meg, ugyanis egyrészt ez a megoldás nem tartalmaz tömörítést, másrészt mára már lényegében egyetlen böngésző sem támogatja.

EOT

Ez egy másik zsákutca, a Microsoft saját szabványú webfont-standardja az évezred elejéről (Embedded Open Type). Az Internet Explorer 8 csak ezt a formátumot hajlandó kezelni @font-face alatt. (Mi viszont az Internet Explorer 8-ot nem vagyunk hajlandóak kezelni, ha van rá mód.)

Letöltések

A legtöbb széles körben használt fontlelőhely nem fogja felajánlani a betűtípusok Woff formátumú letöltését, jobbára csak ttf vagy otf kapható. (Vannak persze üdítő kivételek, például a korábban itt, a blogon is bemutatott Fontshare.) ugyanakkor sok lehetőség nyílik a betűtípusaink konvertálására. A Google Fonts esetében persze különösen dühítő, hogy csakazértsem kaphatjuk meg webbarát verziókban ugyanazokat a fontokat, amiket amúgy ugyanez az oldal szívesen felkínál, ha csatolni kívánjuk a betűtípusokat. Persze erre is van megoldás, Mario Ranftl munkája, a Google Webfonts Helper éppen ezt oldja meg nekünk – persze nem a Google programozói álltak vele elő, de legalább nem is tiltják. 

Csináld okosabban!

Optimalizálni persze mindig lehet a megoldásainkat, sőt éppen, hogy javasolt is. Lássunk néhány módszert, amivel kicsit pattanósabbra hangolhatjuk az oldalunk működését!

CSS

Először is érdemes a beágyazott fontjainkat több formátumban is elhelyezni az oldal anyagai között. A W3c standardja a Woff használatát ajánlja, de persze a modern böngészők már képesek a Woff2 betöltésére is – ugyanakkor az elavultabbak meg lehet, hogy csak egy ttf vagy otf betöltésével képesek megbirkózni. Szerencsére a css van elég intelligens hozzá, hogyha jól felépítjük a fallback opcióinkat, minden böngészőben a használható legmodernebb formátumot hívja le a szerverről. (Ami azt illeti, A woff és a ttf fontok ma már lényegében csak akkor játszanak, ha az Internet Explorer támogatást is meg akarjuk tartani)

@font-face {
  font-family: 'Typefesse';
  src: url('typefesse.woff2') format('woff2'),
    url('typefesse.woff') format('woff');
}

Eldöntheted, mi történjen, ha első látogatásnál nem tölt be azonnal a szükséges betűtípus: a két fő lehetőség a FOIT (flash of invisible text, azaz amíg a font meg nem érkezik, a feliratnak csak a hűlt helyét láthatjuk), és a FOUT (flash of unstyled text, a szöveg a pucér fallback betűtípussal jelenik meg, amíg fel nem öltözhet). Ezek között a font-display tulajdonság swap (FOUT) és block (FOIT) értékeivel választhatunk. (Létezik még pár cizelláltabb opció is, ennek Iain Bean cikkében olvashatsz utána, a példák is tőle származnak.)

Ahhoz, hogy minimumra szorítsuk a betöltési időt, bevethetjük a preload funkciót, ezt a html head részében kell elhelyezni, és értelemszerűen arra kérjük meg vele a böngészőt, hogy a font betöltésével kezdje az oldal összeállítását – így ha elő is fordul valami FOUT-féleség, a lehető legrövidebb ideig rontja majd az összképet.

<link rel="preload" href="/typefesse.woff2" as="font" type="font/woff2" crossorigin>

Bizonyos helyzetekben nagy hasznot hajthat a subsetting, azaz a fontkészletek méretre igazítása. Ezzel a trükkel kivágjuk a betűtípusunkból az oldalon nem használt karaktereket, értelemszerűen karcsúbbá téve a fájl méretét. Egyszerűbb esetben előfordulhat, hogy a választott fontunk tartalmaz pl cirill vagy görög karaktereket, de extrémebb esetben egy korlátozottan használt fonthoz megszabadulhatunk akár a kisbetűktől is. A subsettinghez praktikus eszköz az Everything Fonts Font Subsettere

Google Fonts

Ugyan a fenti opciók használhatók a távoli szerverről betöltött fontokra is (például a gépileg generált kód tartalmazza a fent emlegetett swap paramétert is), itt felgyorsíthatjuk a betöltögetést a dns-prefetch és a preconnect funkciókkal. Mind a kettő arról gondoskodik, hogy a böngésző előre vegye a fontok betöltéséhez szükséges kapcsolatokat.

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Érdekes, a subsettinghez hasonló beépített funkciója a Google Font API-nak a text paraméter, ez csak az érintett szöveghez szükséges betűket tölti le. Display fontoknál, mondjuk egy magában álló címsor esetén akár kifejezetten hasznos is lehet.

https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

Végezetül pedig felhívnám még a figyelmet Iain Bean-re, aki egy formabontó ötlettel állt elő: nem muszáj ragaszkodnunk a puccos fontokhoz – történetesen el lehet képzelni hatásos designokat a klasszikus webbiztos rendszerfontok használatával is. Nem lesz annyira extravagáns, de az biztos, hogy ez a megoldás a lehető leggyorsabb.

Iratkozz fel 7 napos ingyenes, alapozó webdesign kurzusunkra!

Kipróbálom

blog

Segédlet Élethalálharc a WordPressben – a plugin-biznisz

Élethalálharc a WordPressben – a plugin-biznisz

2021. június 16.

A webdesign világának kikerülhetetlen monolitja a WordPress, ez a nyílt forráskódú, idén éppen 18 éves blog-, majd weblapmotor szinte páratlan karriert futott be. Ugyanakkor, valószínűleg éppen azért, mert a nyílt forráskódú, rajongásból és ingyenesen fejlesztett projektek világából ered, és ehhez a világhoz máig is ezer szállal kötődik (lényegében máig belőle építkezik), a WP arányosan sokkal […]

Tovább a cikkre