# 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:

{% content-ref url="/pages/-LUfLbv5Ainzhp\_LnK8c" %}
[Szövegek, szövegközi elemek](/digitalis-kiadvanyok/css/szoevegek-szoevegkoezi-elemek.md)
{% endcontent-ref %}

## Font Squirrel használata

![](/files/-LZW0uRXsF474KYJvQtE)

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.&#x20;

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.

![](/files/-LZW1kdoinopz2kYKYCi)

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](https://digikiad.gitbook.io/digitalis-kiadvanyok/css/szoevegek-szoevegkoezi-elemek#font-face).

![](/files/-LZW2hvrQtdL74vQRIk4)

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.&#x20;

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):

![](/files/-LZW5jwYRi4ZnJ_AYkvY)

A generált állományokat a `Download your kit` gombra kattintva lehet letölteni.

![](/files/-LZW2kSY9I4MuUzDMDim)

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).

![](/files/-LZW3Lio_xyL_6019DCK)

A demó állomány böngészőben megnyitva:

![](/files/-LZW3lFbVariUcGs4IeC)

A legenerált CSS állomány tartalma (ami a fontok bekötéséhez szükséges `@font-face`):

```css
@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;

}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://digikiad.gitbook.io/digitalis-kiadvanyok/egyeb-eszkoezoek/font-squirrel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.