Schriftfamilie

Mordoc rendert Fließtext in Inter und Code in einem monospaced Standard-Stack.

Wenn Ihre Marke eine eigene Schriftart hat, können Sie diese in config/site.json registrieren, und Mordoc verwendet sie überall, wo diese Rolle vorkommt: Fließtext, Überschriften, Navigation und Schaltflächen für die eine Rolle, Code-Blöcke und Inline-Code für die andere.

Schritt 1 – Die Schriftdateien hinzufügen

Schriftdateien befinden sich hier:

config/assets/fonts/

Fügen Sie eine Datei pro vorhandenem Stil hinzu: eine normale Schriftstärke und optional eine kursive. Mordoc erwartet variable Schriftarten (eine einzelne Datei, die einen ganzen Schriftstärkenbereich abdeckt, 100–900), nicht eine Datei pro Schriftstärke.

Unterstützte Dateitypen sind .woff2, .woff und .ttf. .woff2 ist kleiner und lädt schneller, bevorzugen Sie es daher, wenn Ihr Schriftartenanbieter eine Wahl bietet.

Zum Beispiel:

config/assets/fonts/
├── SpaceGrotesk.woff2
├── SpaceMono.woff2
└── SpaceMono-Italic.woff2

Schritt 2 – Die Schriftart in site.json registrieren

Fügen Sie ein fonts-Feld zu config/site.json hinzu, mit einem Slot pro Rolle:

{
  "fonts": {
    "body": {
      "family": "Space Grotesk",
      "regular": "SpaceGrotesk.woff2"
    },
    "code": {
      "family": "Space Mono",
      "regular": "SpaceMono.woff2",
      "italic": "SpaceMono-Italic.woff2"
    }
  }
}

• family: der Name der Schriftart, verwendet, um sie zu registrieren und der Rolle zuzuweisen.
• regular: Dateiname der normalen Schriftstärke, aufgelöst relativ zu config/assets/fonts/.
• italic: Dateiname der kursiven Datei. Optional; lassen Sie das Feld weg, wenn Sie keine haben.

Speichern und aktualisieren. Fließtext und Code werden jetzt beide in ihren neuen Schriftarten dargestellt.

Die zwei Schriftrollen

fonts hat zwei unabhängige Slots:

Sie können einen Slot ohne den anderen deklarieren. Ein Projekt, das nur eine benutzerdefinierte Überschriften-/Fließtextschrift möchte und mit dem monospaced Standard-Stack für Code zufrieden ist, würde nur fonts.body hinzufügen:

{
  "fonts": {
    "body": {
      "family": "Space Grotesk",
      "regular": "SpaceGrotesk.woff2"
    }
  }
}

Jeder ausgelassene Slot fällt auf Mordocs Standard für diese Rolle zurück: Inter für body, der monospaced Standard-Systemstack für code. Nichts geht kaputt, wenn Sie nie ein fonts-Feld hinzufügen.

Nächster Schritt

• Erweiterte Anpassung.