# Schriften generieren

**Beispiel** <https://google-webfonts-helper.herokuapp.com/fonts>\
\
1\. Wählen Sie links im Menü ihre gewünschte Schrift aus\
\
\
2\. Wählen Sie nur einen Style aus z.B. Regular<br>

<figure><img src="https://designer.pixeleyes.de/media/image/ca/ce/d7/Screenshot-2018-06-20-um-20-01-13.png" alt=""><figcaption></figcaption></figure>

3\. Geben Sie unter „Customize folder Prefix“ das Schriftenverzeichnis ein. In diesem Fall\
\
\#url#fonts/

\
4\. unter Download Files wird Ihnen die Schrift als Download dann angeboten.\
\
5\. Laden Sie dann die darin enthaltenen Schriften (eot,svg, ttf, woff,woff2) in das Verzeichnis /public/fonts/  hoch. Wenn der Ordner public fonts nicht vorhanden ist, erstellen Sie diesen.\
\
6\. Fügen Sie dann den CSS Code bei der Schrift ein.

<figure><img src="https://dev1.pixeleyes.de/media/9f/6d/5d/1635955790/artikeldesigner-schriften-generieren.png" alt=""><figcaption></figcaption></figure>

7\. Tragen Sie bei CSS Name dann den Schriftnamen ein der im Code unter "font-family: 'xxx''" steht. im Beispiel oben wäre es "Oswald". Achten Sie darauf dass sofern der Schriftname Leerzeichen (font-family: 'xxx') enthält, diese dann entfernt werden müssen.\
Zum Beispiel heisst eine Schrift "Oswald Regular" so muss der CSS Name dann "OswaldRegular" oder "Oswald-Regular" heissen (Bindestriche sind erlaubt).\
8\. Tragen Sie dann beim Schriftenname das gleiche wie unter (font-family: 'xxx') ein.\
9\. Prüfen Sie dann diese Schrift im Frontend.\
&#x20;\
\
\
Sollte die Schrift nicht korrekt dargestellt werden (Schriftenmenü, Text etc.) wird die Schrift entweder nicht unterstützt, der CSS Name enthält Leerzeichen / Sonderzeichen oder der  Schriftenname weicht von (font-family: 'xxx') ab

{% hint style="warning" %}
Wir möchten Sie darauf hinweisen, dass Sie nur Schriften nutzen sollten, für die Sie eine Berechtigung haben diese online zur nutzen, da Schriften generell urheberrechtlich geschützt sind.\
\
Bei sehr vielen Schriften Anbietern ist das Einbinden Ihrer Schriften als Webfonts untersagt.&#x20;

Wir empfehlen hierbei sich Rat bei Ihren Rechtsbeistand zu holen und bei den jeweiligen Anbieter von dem Sie die Schrift nutzen möchten anzufragen ob Sie dies dürfen.&#x20;

**Auch können wir nicht gewährleisten dass alle Schriften mit unserem Designer einwandfrei funktionieren können.**

Wir empfehlen darüber hinaus nicht zu viele Schriften einzubinden, da dies zu Performance Problemen führen kann.
{% endhint %}