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:
Szövegek, szövegközi elemekFont 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;
}
Last updated