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 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;
​
}

Egyéb eszközök - Previous

Google Fonts

Next - Egyéb eszközök

Type Scale

Last modified 3yr ago

Export as PDF

Copy link

Outline

Mi az a Font Squirrel?

Font Squirrel használata