Font Squirrel

Mi az a Font Squirrel?

A Font Squirrel (vagy Betű Mókus) egy webfont szolgáltatás, ingyenes, és fizetős webfontok mellett kínálnak egy webfont generátort. A generátorral hagyományos betűtípusokból készíthetünk a böngészők által is támogatott webfontokat, a generátor fontok bekötéséhez szükséges CSS-t is elkészíti.
A webfont generátor a Generator menüpont alatt érhető el: https://www.fontsquirrel.com/tools/webfont-generator
A webfontokról bővebben:

Font Squirrel használata

A webfont előállításához szükség van egy font állományra, amit az Upload Fonts gombbal lehet feltölteni. Párhuzamosan több fontot is fel lehet tölteni.
A generáláshoz el kell fogadni a jogi nyilatkozatot, hogy van jogunk az adott fontot felhasználni.
A feltöltött fontokat kilistázza a generátor, amiket az x -re kattintva lehet eltávolítani, ha mégsemakarjuk webfontá alakítani őket.
Az Expert beállításokat kiválasztva számos beállítás közül kiválaszthatjuk például a generálandó webfont formátumokat. A webfont formátumokról bővebben: @font-face.
Amennyiben csak modern böngészőket akarunk támogatni, elég a WOFF, és a WOFF2 formátumot választani (ez az alapbeállítás). A TrueType, EOT és SVG formátumokat csak régebbi, mára már elavult böngésző verziók támogatása esetén kell kiválasztani.
Magyar ékezetes betűtípus generálásához a fontnak támogatnia kell a megfelelő ékezeteket, és az Expert beállításokban ki kell választanunk a nyelvi támogatást (Subsetting > Custom Subsetting > Language):
A generált állományokat a Download your kit gombra kattintva lehet letölteni.
A letöltés egy tömörített zip állomány, ami tartalmazza a legenerált webfont állományokat, egy CSS állományt a generált @font-face stílussal, és egy demó HTML állományt, amiben megtekinthetjük a fontot egy próbaszövegen (a használatba vételhez tömörítsük ki).
A demó állomány böngészőben megnyitva:
A legenerált CSS állomány tartalma (ami a fontok bekötéséhez szükséges @font-face):
@font-face {
font-family: 'plaingermanicaregular';
src: url('plain_germanica-webfont.woff2') format('woff2'),
url('plain_germanica-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}