4.2 – Basis: Farben und Schriften

Der Tab Basis ist die unterste der vier Ebenen. Hier stehen die Werte, mit denen Quartz allein arbeitet.

Der Basis-Tab: Schriftquelle, Auslieferung, die neun Farben je Schema.

Farben

Neun Farben, je einmal für hell und einmal für dunkel. Sie sind keine Dekoration: Quartz leitet daraus einen ganzen Satz weiterer Variablen ab — welche und wie, zeigt der Variablen-Tab.

Ist ein Community-Theme aktiv, sind die von ihm überschriebenen Farben abgeblendet, mit der Zahl darüber. Bearbeiten geht trotzdem — die Werte gelten wieder, sobald das Theme aus ist.

Schriften

Drei Rollen: Überschriften, Fließtext und Code. Für jede eine Schriftfamilie.

Darüber steht die Font-Quelle und damit die Frage, woher die Schrift kommt:

• Google Fonts — Quartz holt sie von dort. Wie sie dann ausgeliefert wird, entscheidet der Schalter darunter.
• Selbst mitgebracht — Quartz lädt gar nichts; die Schrift muss im Projekt vorliegen, etwa über den Import weiter unten.

Schrift-Auslieferung

Der Schalter Schriften lokal ausliefern ist der wichtigste dieser Seite, wenn die Website öffentlich wird.

• Aus: Die fertige Seite verlinkt Google Fonts. Jeder Besuch ruft bei Google an.
• An: QuartzControl holt die Schriftdateien von Google ins Projekt — beim Speichern und noch einmal vor jedem Build, falls sich die Auswahl geändert hat. Sie liegen danach unter quartz/static/fonts, ihre @font-face-Regeln in custom.scss, und die Seite ruft nichts mehr bei Dritten auf — die datenschutzfreundliche Variante.

Was der Schalter entfernt, steht danach da

Wird eine Schrift abgewählt, verschwinden ihre Dateien beim nächsten Speichern wieder aus dem Projekt. Die Seite nennt sie dann beim Namen, mitsamt der Zahl der gelöschten Dateien.

Das Plugin „Fonts“ braucht dafür eine Basis-URL

Liefert es die Schriften selbst aus, werden die Schrift-URLs auf die Basis-URL umgeschrieben; fehlt sie, bricht der Build ab. Gesetzt wird sie unter Konfiguration → Basis-URL. Für den Schalter oben gilt das nicht: Die Dateien liegen im Projekt und werden relativ zum Stylesheet adressiert.

Darunter steht in einer Zeile, was gerade tatsächlich gilt — ob der Quartz-Kern oder das Plugin „Fonts“ die Schriften ausliefert, und ob verlinkt oder lokal.

Theme-eigene Schriften

Bringt das aktive Theme eigene Schriften mit, lädt es sie von unpkg.com — auch das ist ein Aufruf bei Dritten, und lokal ausliefern lässt er sich nicht. Es bleibt eine Entscheidung:

• Theme-Schriften an: wie vorgesehen gestaltet, dafür ein Aufruf bei unpkg.
• Theme-Schriften aus: kein Aufruf, dafür greifen die Schriftarten von oben, und das Theme sieht anders aus als gedacht.

Eigene Schriftart importieren

Nimmt eine .ttf, .otf, .woff oder .woff2 aus dem Dateisystem, legt sie ins Projekt und schreibt die passende Regel ins eigene CSS. Optional lässt sie sich gleich einer der drei Rollen zuweisen.

QuartzControl liest dabei aus der Datei, welches Schriftgewicht darin steht, und sagt, was es gefunden hat — auch dann, wenn es nichts gefunden hat: „Die Datei nennt kein ‚weight‘, die Regel bleibt deshalb ohne.“ Dann steht die Schrift zwar zur Verfügung, aber ohne Angabe, ob sie fett oder mager ist.