# Schriftarten Schriften können **lokal** über die Theme Schriften genutzt werden oder **extern** über die Custom Schriften durch Google Fonts eingebunden werden. Zusätzlich haben wir eine Anleitung, wie Du [Schriften selbst hosten](https://themedocs.zenit.design/tutorials/schriften-lokal-einbinden) kannst. ### Eigene Schriftarten Über das Theme stehen Dir alle 1600+ [Google Fonts Schriftarten](https://fonts.google.com/) zur Verfügung. Du kannst für Fließtexte und Überschriften separate Schriften oder auch die selbe Schrift definieren. {% hint style="info" %} Möchtest Du für Überschriften und Fließtexte die selbe Schrift verwenden, trage in beide Felder den selben Schriftnamen ein. Die Schriftstärken werden miteinander ergänzt, sollten sich diese in den Feldern unterscheiden. {% endhint %} ![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FkjGctn8GBNuqKGjBo5VX%2Fdocs-de-config-theme-typo-colors-custom-fonts.png?alt=media\&token=a29c4ad6-c072-4734-8d45-ab69c100bdbe) #### 1. Schrift aussuchen Um eine Schriftart von Google Fonts zu nutzen, suche Dir einfach je eine Schriftfamilie für Fließtexte (**Schriftart Text**) und eine Schriftfamilie für Überschriften (**Schriftart Überschrift**) aus - in diesem Beispiel möchten wir `Roboto Condensed` als Schriftart für Texte verwenden und geben diese in die Suche ein. ![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FX5r33sG8DzST8KbGYJL3%2Fdocs-google-fonts.png?alt=media\&token=99cd2239-f1aa-40d5-9f48-a8a212ca0dac) #### 2. Schriftschnitte einsehen Nach der Auswahl der Schrift können die Schriftschnitte eingesehen werden, welche die Schriftart bereitstellt. In diesem Beispiel bietet 'Roboto Condensed' alle möglichen Schriftschnitte `Light 300` bis `Bold 900` , da es sich um eine variable[^1] Schriftart handelt. ![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FqeXxbDV6kSd71tKpYaSM%2Fdocs-google-fonts-get-font.png?alt=media\&token=d6f9b543-ea1d-41f2-94f9-14785d14aedd)
#### 3. Schrift wählen Nach den Klick auf **Get embed code** gelangst Du zu der Seite mit den Einbettungscodes. Hier interessiert uns lediglich der technische Name der Schrift. **Notiere Dir daher den Namen der Schriftfamilie.** `'Roboto Condensed', sans-serif` {% hint style="warning" %} `font-family:` sowie das `Semikolon` entfallen. {% endhint %} {% hint style="info" %} Du musst hier auch keine Auswahl der Schriftschnitte vornehmen - **das passiert erst im Theme!** {% endhint %} ![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FKFv8dYrYayNxxhSW598s%2Fdocs-google-fonts-get-font-family.png?alt=media\&token=15b8df4e-8c43-498e-90d0-e14e201f4519) #### 4. Schriftfamilie im Theme hinterlegen. Trage nun den Namen der Schriftart in das Feld **Schriftart Text (1)** oder für Überschriften in das Feld **Schriftart Überschrift** ein. Behalte dabei die *generische Schriftfamilie* bei, falls die Schriftart wider erwarten einmal nicht geladen werden kann. {% tabs %} {% tab title="Was sind generische Schriftfamilien" %} > Generische Schriftfamilien dienen als Fallback-Mechanismus, ein Mittel, um etwas von der Absicht des Stylesheet Autors zu erhalten für den Fall, wenn keine der angegebenen Schriftarten verfügbar sind. > {% endtab %} {% tab title="Generische Schriftfamilien Beispiel" %} | Generische Schrift | Bedeutung | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `serif` | Schriftzeichen haben abschließende Striche, ausgeweitete oder zugespitzte Enden oder serifenbetonte Enden. | | `sans-serif` | Schriftzeichen haben gerade Strichenden. | | `monospace` | Alle Schriftzeichen haben die gleiche Breite. | | `cursive` | Schriftzeichen in kursiven Schriftarten haben üblicherweise verbindende Striche oder andere kursive Charakteristiken, die über die von kursiven Schriftzügen hinausgehen. Die Schriftzeichen sind teilweise oder ganz verbunden und das Ergebnis ähnelt eher einer Handschrift als gedruckten Lettern. | | `fantasy` | Fantasie Schriftarten sind überwiegend dekorative Schriftarten, die verspielte Darstellungen von Schriftzeichen beinhalten. | | {% endtab %} | | | {% endtabs %} | | ![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FAbAPbotc5kY0kkWUjcOY%2Fdocs-de-config-theme-typo-colors-custom-fonts-load-fonts.png?alt=media\&token=9a569d37-758c-432a-b079-a69b1b8262bf) Der Inhalt des Feldes **Schriftart Text (1)** oder **Schriftart Überschrift** sollte nun so aussehen: ``` 'Roboto Condensed', sans-serif ``` Die Schriftstärken (Schriftschnitte) wähle im Feld **Schriftstärken Text (2)** oder bei Überschriften im Feld Schriftstärken Überschrift aus. Du kannst nur die Schriftschnitte verwenden, welche die Schrift ausliefert. {% hint style="warning" %} Stelle sicher, dass **Schriften laden (3)** aktiv ist und bei den Theme Schriftarten im Feld **Schriftart Text (4)** eingestellt ist, dass die Eigene Schriftarten verwendet werden sollen. {% endhint %} Um keine unnötigen Ladezeiten zu erzeugen, wähle nur die Schriftstärken aus, welche Du auch wirklich nutzen möchtest. Häufig können für einzelne Elemente spezielle Schriftschnitte in der Konfiguration gewählt werden. Werden Schriftschnitte abgerufen, welche die Schrift nicht ausliefert, wenden Browser dan [Näherungsverfahren](https://developer.mozilla.org/de/docs/Web/CSS/font-weight#n%C3%A4herungsverfahren) an. ### Theme Schriften Neben der Einbindung von externen oder [selbstgehosteten](https://themedocs.zenit.design/tutorials/schriften-lokal-einbinden) Schriften, bietet das Theme eine Auswahl an integrierten Schriften. Diese Schriften werden mit dem Theme ausgeliefert und befinden sich nach der Installation auf **Deinem Server**. Du musst Dir daher bei den Theme Schriften keine Gedanken um den Datenschutz machen. Theme Schriften können ebenso wie die Custom Schriften für **Fließtexte (1)** und **Überschriften (2)** separat eingestellt werden. Die mitgelieferten **Schriftschnitte (3)** stehen in eckigen Klammern hinter dem Schriftnamen. Es ist ebenso möglich eine Theme Schrift für z.B. Fließtexte zu verwenden und eine Custom Schrift für die Überschriften. Beachte aber, dass durch die extern-eingebundene Custom-Schrift noch immer eine Verbindung zu den Google Servern besteht, es sei denn, Du hast die Custom-Schrift selbst gehostet und die Option **Schriften laden** im Abschnitt Custom Schriften deaktiviert. ![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-7743b2892ecb5ee152e47897744746354d2c9563%2Fdocs-theme-config-theme-schriften.png?alt=media) {% hint style="success" %} Sobald für beide Schriften eine andere Auswahl als `- Custom Schriftart -` gewählt wurde, werden **keine Schriften mehr von Google Servern geladen**. Die Einstellung **Theme Schriften** überschreibt die Einstellung der **Custom Schriften**. {% endhint %} [^1]: Variable fonts allow one font file to contain multiple variations. You can change the weight, width, style, optical size, and more. The variables within variable fonts are controlled by axes.