Bevor wir uns versahen, hatten wir Webfonts in Glitch 🎏

Für etliche von Euch mag das ein alter Hut sein, aber das letzte Mal, daß ich ernsthaft Webseiten gebastelt hatte, ist mehr als zehn Jahre her und so muß ich nicht nur mein Wissen auffrischen, sondern auch lernen, was sich in den letzten zehn Jahren neues im Bereich HTML5 und CSS getan hat. Auch hierfür möchte ich natürlich meinen Glitch-Account als Spielwiese nutzen.

Damals™ war es noch wichtig gewesen, websichere Fonts zu nutzen, heute ist man in Zeiten von Google Fonts und anderen freien Schriften flexibler. Daher wollte ich wissen, wie man solch eine Schrift via CSS in Webseiten im Allgemeinen und in Glitch im Besonderen einbindet. Ich habe mir als Beispiel bei Google eine besonders markante Schrift, die »Henny Penny herausgesucht. Hat man die URL (z.B. von Google) ist die Sache im Prinzip ganz einfach. In der CSS-Datei gibt man an, welche Schrift man importieren möchte

@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap');

und dann kann man sie wie gewohnt verwenden:

body {
  margin: 1rem;
  font-family: "Henny Penny", sans-serif;
  line-height: 1.5;
}

In dieser Einfachheit liegt aber leider ein schwerweigender Nachteil: Die Schrift liegt bei Google auf dem Server und die Datenkrake trackt mit Sicherheit die Nutzer. Daher ist es sinnvoller, die Schrift herunterzuladen (was auch bei Google geht) und sie dann auf einen eigenen Server zu legen. Das funktioniert dann auch mit Schriften, die man nicht aus einem CDN abrufen kann, wie zum Beispiel der von mir letztens entdeckten Comic Helvetic und ist in meinen Augen die sauberere Lösung.

Nur … leider habe ich nicht herausbekommen, wie man eine .ttf- oder andere Font-Datei auf Glitch hochlädt. Daher schwebt mein Opossum leider noch mit einer Schrift über die Wüste, die bei Google auf dem Server liegt. Ich möchte das jedoch gerne ändern. Wenn also jemand von Euch da draußen eine Ahnung hat, wie man Glitch eine Schrift unterjubelt, bitte ich um Nachricht in meinen (Email-) Kommentaren (oder über andere Kanäle in den diversen sozialen Netzen). Still digging!

(Kommentieren)