Zum Inhalt springen
Astro Astro

Eigene Schriftarten verwenden

Astro unterstützt alle gängigen Möglichkeiten zum Hinzufügen benutzerdefinierter Schriftarten zu deinem Website-Design. Diese Anleitung zeigt zwei verschiedene Möglichkeiten, Webfonts in dein Projekt einzubinden.

Verwenden einer lokalen Schriftdatei

Wenn du Schriftdateien zu deinem Projekt hinzufügen möchtest, empfehlen wir, sie in deinem public/-Verzeichnis zu platzieren. In deinem CSS-Code können die Schriftarten dann mit einer @font-face-Regel registriert und mit einer font-family-Eigenschaft verwendet werden, um deine Website zu gestalten.

Beispiel

Nehmen wir an, du hast eine Schriftdatei namens DistantGalaxy.woff.

  1. Platziere die Schriftdatei im public/fonts/-Verzeichnis.

  2. Füge deinem CSS-Code eine @font-face-Regel hinzu. Du kannst dazu entweder eine global importierte .css-Datei verwenden, oder sie in einem <style>-Block innerhalb des Layouts oder der Komponente platzieren, in der du die Schriftart verwenden möchtest.

    /* Registriere deine benutzerdefinierte Schriftart und teile dem Browser mit, wo sie zu finden ist. */
    @font-face {
      font-family: 'DistantGalaxy';
      src: url('/fonts/DistantGalaxy.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

  3. Benutze den font-family-Wert aus deiner @font-face-Regel, um Elemente innerhalb deiner Komponente oder deines Layouts zu gestalten. Im folgenden Beispiel wird die benutzerdefinierte Schriftart auf das <h1>-Element angewendet, aber nicht auf den Absatz <p>.

    src/pages/example.astro
    <h1>In einer Galaxie weit, weit entfernt...</h1>
    

    <p>Benutzerdefinierte Schriftarten machen meine Überschriften viel cooler!</p>
    

    <style>
    h1 {
      font-family: 'DistantGalaxy', sans-serif;
    }
    </style>

Verwenden von Fontsource

Das Fontsource-Projekt ermöglicht die Verwendung von Google Fonts und anderen Open Source-Schriftarten. Es stellt npm-Pakete bereit, um die gewünschten Schriftarten zu installieren.

  1. Finde die Schriftart, die du benutzen möchtest, im Fontsource-Katalog. Für dieses Beispiel werden wir Twinkle Star nutzen.

  2. Installiere das Paket deiner gewählten Schriftart.

    Terminal-Fenster
    npm install @fontsource/twinkle-star

  3. Importiere das Schriftarten-Paket in dein Layout oder die Komponente, in der du es benutzen möchtest. Normalerweise solltest du dies in einer gemeinsamen Layoutkomponente tun, um sicherzustellen, dass die Schriftart überall auf deiner Website verfügbar ist.

    Der Import fügt automatisch die erforderliche @font-face-Regel hinzu, die zum Einrichten der Schriftart benötigt wird.

    src/layouts/BaseLayout.astro
    ---
    import '@fontsource/twinkle-star';
    ---

  4. Benutze die font-family-Eigenschaft so, wie es auf der jeweiligen Schriftarten-Seite der Fontsource-Website beschrieben ist. Du kannst sie überall dort verwenden, wo du CSS-Code in deinem Astro-Projekt schreiben kannst.

    h1 {
      font-family: "Twinkle Star", cursive;
    }

Weitere Ressourcen

Schriftarten mit Tailwind hinzufügen

Falls du die Tailwind-Integration (EN) verwendest, kannst du entweder eine @font-face-Regel für eine lokale Schriftart hinzufügen oder die Import-Strategie von Fontsource verwenden, um die Schriftart zu registrieren. Folge dann Tailwinds Dokumentation zum Hinzufügen benutzerdefinierter Schriftfamilien.

Erfahre, wie Web-Schriftarten funktionieren

Die Web Fonts-Anleitung von MDN bietet eine Einführung in das Thema.

Generiere CSS für deine Schriftart

Der Font Squirrel Webfont Generator kann dir dabei helfen, deine Schriftarten vorzubereiten.