lokale Fonts in quarto revealjs einbinden

Mit quarto können über revealjs schöne HTML-Folien erstellt werden, die alle notwendigen Daten (z.B. Bilder) enthalten. Können auch lokale Fonts eingebunden werden? Ja, klar!
quarto
revealjs
ubuntuusers
Autor:in

Joe Slam

Veröffentlichungsdatum

3. Januar 2024

Mit quarto können über revealjs schöne HTML-Folien erstellt werden.

Über die YAML-Parameter

format: 
  revealjs: 
    embed-resources: true

wird eine HTML-Datei erzeugt, die alle benötigten Daten (z.B Medien- oder Scriptdateien) enthält. Der Vorteil liegt auf der Hand: eine solche HTML-Datei läuft auch offline, und ich muss mich nicht um weitere Ressourcen kümmern. Auf Konferenzen beispielsweise läuft eine solche HTML-Datei direkt auf (fast) jedem Gerät.

Möchte man in den Folien lokale Schriftdateien (Fonts) verwenden, so können auch diese in 3 Schritten in die HTML-Datei integriert werden.

Schritt 1: Font-Dateien in resources-Liste

In diesem Beispiel möchte ich die Schrift Vollkorn als Hauptschrift und Roboto Mono als Monotype verwenden. Von der Webseite habe ich die woff2-Dateien heruntergeladen, und innerhalb meines Quartoprojektes in den Unterordner “fonts” gespeichert. Um sicherzustellen, dass diese Dateien auch exportiert werden, gebe ich sie im YAML-Header expliziet unter resources an:

format: 
  revealjs: 
    embed-resources: true
    resources:
      - fonts/Roboto-Mono-regular.woff2
      - fonts/Vollkorn-Bold.woff2
      - fonts/Vollkorn-BoldItalic.woff2
      - fonts/Vollkorn-Italic.woff2
      - fonts/Vollkorn-Regular.woff2

Schritt 2: SCSS-Datei

Damit die Datei später erkannt wird, müssen wir sie mittels einer SCSS-Datei quarto bekannt machen. Es bietet sich dabei an, für jede lokale Schrift, die verwendet werden soll, eine eigene SCSS-Datei anzulegen.

Monospace

Für Roboto Mono ist dies schnell erledigt. Ich nenne die Datei fontrobotomono.scss und gebe ihr folgenden Inhalt:

/*-- scss:defaults --*/
$font-family-monospace: "Roboto Mono" !default;

@font-face {
  font-family: 'Roboto Mono';
  src: url('../../../../../fonts/Roboto-Mono-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Beachten Sie den relativen Pfad zu der woff2-Datei. Quarto benötigt 5x ../, um sich später im richtigen Verzeichnis mit den Schriften wiederzufinden.

Sans Serif

Für die Vollkorn-Fonts erzeuge ich die Datei fontvollkorn.scss mit folgendem Inhalt:

/*-- scss:defaults --*/
$font-family-sans-serif: "Vollkorn" !default;

@font-face {
  font-family: 'Vollkorn';
  src: url('../../../../../fonts/Vollkorn-Regular.woff2') format('woff2');
  font-weight: normal; // Black
  font-style: normal;
}

@font-face {
  font-family: 'Vollkorn';
  src: url('../../../../../fonts/Vollkorn-Italic.woff2') format('woff2');
  font-weight: normal; // Black
  font-style: italic;
}

@font-face {
  font-family: 'Vollkorn';
  src: url('../../../../../fonts/Vollkorn-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Vollkorn';
  src: url('../../../../../fonts/Vollkorn-BoldItalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
}

Beachten Sie auch hier den relativen Pfad zu den woff2-Dateien. Quarto benötigt 5x ../, um sich später im richtigen Verzeichnis mit den Schriften wiederzufinden.

Schritt 3: SCSS-Datei einbinden

Nun können wir im YAML-Header die SCSS-Dateien über den theme-Parameter einbinden, und somit die Hauptschrift auf Vollkorn, und Monospace auf Roboto Mono umzustellen.

format: 
  revealjs: 
    embed-resources: true
    resources:
      - fonts/Roboto-Mono-regular.woff2
      - fonts/Vollkorn-Bold.woff2
      - fonts/Vollkorn-BoldItalic.woff2
      - fonts/Vollkorn-Italic.woff2
      - fonts/Vollkorn-Regular.woff2
    theme: [default, fontvollkorn.scss, fontrobotomono.scss]

Und schon ist die Hauptschrift in Vollkorn, und Monospace ist Roboto Mono, und die Fontdateien sind in der HTML-Datei enthalten.