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:

pageSzövegek, szövegközi elemek

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;

}