Eigene Schriften einbinden

Kein Einheitsbrei: mit eigenen Schriften kannst du deiner Website eine individuelle Note verleihen. So klappt die Einbindung mit Fontsource.

Tipp

Lies dir bitte das Webfonts-Tutorial durch. Dort lernst du, was Schriftschnitte und variable Schriftarten sind und wie du Schriften allgemein einbinden kannst. Du erfährst du auch, welche rechtlichen Aspekte du bedenken musst.

Fontsource bietet eine große Auswahl an Open-Source-Schriftarten, die du datenschutzkonform einbinden kannst. Das ist beim Starterkit denkbar einfach, unterscheidet sich aber je nach Schriftarttyp. In der Übersicht siehst du schon, ob es sich bei einer Schriftart um eine variable Schriftart oder um eine reguläre Schriftart mit Schriftschnitten handelt.

Einbindung

Und so bindest du die Schriftart in dein Projekt ein:

Variable Schrift

1. Öffne die Dateilseite der variablen Schriftart, die du einbinden möchtest.
   Zum Beispiel Inter.

2. Klicke rechts oben auf den Button Install.

3. Wähle unter dem Punkt Installation die Option yarn aus und kopiere den Befehl.

4. Führe den Befehl im Terminal von Visual Studio Code aus, um die Schriftart in dein Projekt zu installieren. Bei Inter sieht der Befehl so aus:

   yarn add @fontsource-variable/inter

5. Kopiere dir aus dem Bereich Import den Code und füge ihn in der app.js oben ein:

   src/app.js

   import '@fontsource/variable/noto-serif.css'

6. Kopiere von der Detailseite auch den den CSS-Code. Für dich relevant ist lediglich die font-family-Deklaration. Bei Inter sieht das so aus:

   font-family: 'Inter Variable', sans-serif;

7. Öffne die Datei variables.css und ändere den Wert der Custom-Property --ff (steht für font-family) auf den Namen der Schriftart. Weise hier auch die Custom-Property --fw (steht für font-weight) den Wert 400 zu, um den Schriftschnitt Regular zu verwenden. --fw-bold wird für den Schriftschnitt Bold verwendet, wähle hier 600, 700, oder 800.

   src/styles/base/variables.css

   :root {
     --ff: 'Inter Variable', sans-serif;
     --fw: 400;
     --fw-bold: 600;
   }

   In der Datei layout.css werden diese Variablen dem body-Element — und damit dem Fließtext — zugewiesen:

   src/styles/base/layout.css

   body {
     font-family: var(--ff);
     font-weight: var(--fw);
   }

   Wenn du eine weitere Schriftart für Überschriften verwenden möchtest, wiederhole die Schritte 1 bis 5 und ändere die Custom-Properties in variables.css und layout.css entsprechend.

Schriftschnitte

1. Öffne die Dateilseite der variablen Schriftart, die du einbinden möchtest.
   Zum Beispiel PT Serif.

2. Klicke rechts oben auf den Button Install.

3. Wähle unter dem Punkt Installation die Option yarn aus und kopiere den Befehl.

4. Führe den Befehl im Terminal von Visual Studio Code aus, um die Schriftart in dein Projekt zu installieren. Bei Inter sieht der Befehl so aus:

   yarn add @fontsource/pt-serif

5. Wähle im Bereich Import die Schriftschnitte aus, die du verwenden möchtest. In unserem Fall entscheiden wir uns für 400 und 700 . Kopiere nun den Code und füge ihn in der app.js oben ein:

   src/app.js

   import '@fontsource/pt-serif/400.css';
   import '@fontsource/pt-serif/700.css';

6. Kopiere von der Detailseite auch den den CSS-Code. Für dich relevant ist lediglich die font-family-Deklaration. Bei Inter sieht das so aus:

   font-family: 'PT Serif', serif;

7. Öffne die Datei variables.css und ändere den Wert der Custom-Property --ff (steht für font-family) auf den Namen der Schriftart. Weise hier auch die Custom-Property --fw (steht für font-weight) den Wert 400 zu, um den Schriftschnitt Regular zu verwenden. --fw-bold wird für den Schriftschnitt Bold verwendet, also 700. Bei anderen Schriftarten könnte das auch 600 oder 800 sein.

   src/styles/base/variables.css

   :root {
     --ff: 'PT Serif', serif;
     --fw: 400;
     --fw-bold: 700;
   }

   In der Datei layout.css werden diese Variablen dem body-Element — und damit dem Fließtext — zugewiesen:

   src/styles/base/layout.css

   body {
     font-family: var(--ff);
     font-weight: var(--fw);
   }

   Wenn du eine weitere Schriftart für Überschriften verwenden möchtest, wiederhole die Schritte 1 bis 5 und ändere die Custom-Properties in variables.css und layout.css entsprechend.

Überschriften anders gestalten

Wenn du eine weitere Schriftart für Überschriften verwenden möchtest, wiederhole die o.g. Schritte und ergänze die Custom-Properties in variables.css und layout.css entsprechend. In unserem Beispiel verwenden wir die Schriftart PT Serif für Überschriften:

src/styles/base/variables.css

:root {
  --ff-headings: 'PT Serif', serif;
  --fw-headings: 700;
}

src/styles/base/layout.css

h1, h2, h3, h4 {
  font-family: var(--ff-headings);
  font-weight: var(--fw-headings);
}