Installation von Schriftarten

Bridgetown sieht die Installation von Schriftarten im Verzeichnis

   /frontend/fonts/

vor. Nach der Initialisierung des Projekts ist der Ordner nicht vorhanden. Er muss also angelegt werden.

In diesen Ordner kopiert man die Schrift-Dateien

$ cd frontend/fonts 
$ wget https://fonts.google.com/download?family=Volkhova -O volhkov.ttf
 > connecting to fonts.google.com (fonts.google.com)|142.250.184.206|:443... connected.
 > HTTP request sent, awaiting response... 200 OK
 > Length: unspecified [application/zip]
 > Saving to: ‘volkhov.ttf’

Die hier gewählte Schriftart wird in den Größen Regular 400, Regular 400 Italic, Bold 700' und Bold 700 Italic bereitgestellt.

Deklarierung der Schriftart

Daten werden in eine Deklarationsdatei übertragen:

@font-face {
  font-family: 'Volkhov';
  src: url("./volkhov.ttf") format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: 'Volkhov';
  src: url("./volkhov.ttf") format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: fallback;
}

Die Schriftarten müssen zum Abschluß importiert werden ( entweder in der index.js oder in index.css).

In der index.css sieht das dann so aus:

   @import "../fonts/volkhov.css";  

   root: { --logo-font: Volkhov }

Dann kann die Schriftart ganz normal zugewiesen werden:

.logo{
  font-family: var(--logo-font);
}

Die Schriftart wird über die index.css beim ersten Aufruf der Webseite geladen. Dieser Prozess verlangsamt den Startprozess. Deshalb sollten nur die Schriften eingebunden werden, die tatsächlich benutzt werden.

Variable Schriftarten

Um den Ladevorgang zu beschleunigen, können variable Schriftarten verwendet werden. In der Google-Schriftarten-Biblothek stehen inzwischen einige variable Schriftartendatein zum Download bereit.

Diese werden wie folgt eingebunden:

@font-face {
  font-family: 'Lora';
  src: url("./Lora-Italic-VariableFont_wght.ttf") format('truetype');
  font-weight: 400 900;
  font-style: italic;
	font-variation-settings: "ital" 1;
	font-synthesis: none;
  font-display: fallback;
}