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

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

Platziere die Schriftdatei im public/fonts/-Verzeichnis.
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;
}
```
Wir lassen public bei der Quell-URL der Schriftart weg, denn alle Dateien im public-Verzeichnis werden dem Stammverzeichnis deiner Website hinzugefügt.
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.

Finde die Schriftart, die du benutzen möchtest, im Fontsource-Katalog. Für dieses Beispiel werden wir Twinkle Star nutzen.
Installiere das Paket deiner gewählten Schriftart.
- npm
- pnpm
- Yarn
Terminal-Fenster
npm install @fontsource/twinkle-star
Terminal-Fenster
pnpm add @fontsource/twinkle-star
Terminal-Fenster
yarn add @fontsource/twinkle-star
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.
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';
---
```
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

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:

Folge einer der Anleitungen oben, lasse aber den Schritt, die font-family in deinem CSS-Code hinzuzufügen, aus.
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.

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

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.

Wirke mit

Community