Betűtípusok a weben

Az alap hozzáállás az kéne legyen, hogy amikor csak lehet, lokálisan elérhető fontot használunk a weben. Ettől viszont eszközönként eltérő lehet az oldal tipográfiája; a szokásos fontok unalmassá válhatnak; a megrendelő szebbet és jobbat akarhat. Gyorsan eljutunk oda, hogy behúzzunk egy fontot, amit nagyon könnyen megtehetünk. Lássuk be, hogy manapság 200-400 KiB egyszeri letöltése már mobilon sem okoz gondot (bár ettől még felvethető, hogy az a pár száz KiB is fölösleges).

Akkor mi okozhat gondot, ha egyedi fontot használunk? A lustaságunk, amit a Google számos vonatkozásban olyan jól kihasznál. Először ők találták ki, hogy egyetlen sor beszúrásával behúzhasson betűtípust a fejlesztő a szerverükről, és máig az övék a legelterjedtebb és leggyorsabb CDN. Szinte mindenki ezt csinálja, nem is kell gondolkozni a problémán, és mint minden fejlesztő tudja: a megoldott probléma a legjobb probléma. A fontot behúzó weboldal látogatói pedig majd szépen pingelik a Google-t, igaz, csak az első alkalommal, mert a font letöltése után lokális cache-be kerül.

Noha a Google-től való eltávolodást magam is fontosnak tartom, akárcsak az online magánélet védelmét, ennek a kérdésnek nem tulajdonítottam túlzott jelentőséget, bár megjegyeztem már magamnak, hogy hosszú távon e gyakorlaton is változtatni kéne. Minapi hír, hogy a német bíróság megbüntette egy webhely üzemeltetőjét, amiért felhasználói jóváhagyás nélkül töltött le fontokat a Google szerveréről a panaszos eszközére, s ezzel megsértette a GDPR-t.¹ A büntetés jelképes, 100€, és nem is a lehetséges – sokak szerint értelmetlen² – szankcióktól való félelem a lényeg, hanem annak üzenete, hogy az ilyesmi igenis helytelen, és egy rossz fejlesztői berögződésről van szó, amin lehet változtatni. Elégedett vagyok ezzel az iránnyal, és elégedetlen a saját hozzáállásommal.

Mit tehetünk? Fontoljuk meg (lol) újra a system fontok alkalmazását.

font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif

Ha egyedi fontot akarunk, azt pedig töltsük fel a saját kiszolgálónkra, és állítsunk be legalább 1 évnyi cache-control headert a font fájlokra. 1 sornyi CSS helyett másoljunk többet:

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    src:    url(/fonts/Rubik-Regular.woff2) format('woff2'),
            url(/fonts/Rubik-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'Rubik';
    font-style: italic;
    font-weight: 400;
    src:    url(/fonts/Rubik-Italic.woff2) format('woff2'),
            url(/fonts/Rubik-Italic.ttf) format('truetype');
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    src:    url(/fonts/Rubik-Bold.woff2) format('woff2'),
            url(/fonts/Rubik-Bold.ttf) format('truetype');
}