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

Abschnitt betitelt Verwenden einer lokalen Schriftdatei

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;
   }

   Hinweis

   Wir lassen public bei der Quell-URL der Schriftart weg, denn alle Dateien im public-Verzeichnis werden dem Stammverzeichnis deiner Website hinzugefügt.

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

Abschnitt betitelt 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.

   npm

   npm install @fontsource/twinkle-star

   pnpm

   pnpm add @fontsource/twinkle-star

   Yarn

   yarn add @fontsource/twinkle-star

   Tipp

   Du findest den korrekten Paketnamen im Abschnitt “Quick Installation” jeder Schriftarten-Seite auf der Fontsource-Website. Er beginnt immer mit @fontsource/, gefolgt vom Namen der Schriftart.

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;
   }

Schriftarten mit Tailwind hinzufügen

Abschnitt betitelt Schriftarten mit Tailwind hinzufügen

Falls du die Tailwind-Integration 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.

Um deine Schriftart in Tailwind zu registrieren:

1. Folge einer der Anleitungen oben, lasse aber den Schritt, die font-family in deinem CSS-Code hinzuzufügen, aus.
2. Füge den Schriftartnamen in der tailwind.config.mjs Datei hinzu.

Dieses Beispiel ergänzt die Serifenlose-Schriftfamilie um Inter, mit Standard-Ersatzschriftarten von Tailwind CSS.

tailwind.config.mjs

import defaultTheme from 'tailwindcss/defaultTheme'

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
}

Durch diese Änderung wird der gesamte serifenlose Text (der Standard mit Tailwind) deines Projekts die von dir ausgewählte Schriftart verwenden. Die font-sans Klasse verwendet auch die Inter Schriftart.

Für mehr Informationen, folge Tailwinds Dokumentation zum Hinzufügen benutzerdefinierter Schriftfamilien.

Weitere Ressourcen

Abschnitt betitelt Weitere Ressourcen

• Erfahre, wie Web-Schriftarten funktionieren: Die Web Fonts-Anleitung von MDN bietet eine Einführung in das Thema.

• Generiere CSS für deine Schriftart mit dem Font Squirrel Webfont Generator.