Hallo Matthias, guten Morgen (jetzt ist schon Tag) zurück!

Guten Morgen!

Ich lese seit mittlerweile einem Monat mit und staune, mit welchem Eifer du die Seite baust! Weiter so!

Danke, Ermutigung kann ich immer brauchen. 😉 Aber auch vielen Dank zurück, vor allem an Gunnar, der sich ja hier wirklich reinhängt! Und Rolf, - wenn ich mich recht entsinne, ist ein Großteil des CSS-Codes von ihm? 🤗

Und schon wieder eine (Folge-)Frage bezüglich dem Anlegen des "@font-face" ...

lokal

Hast du denn die Arvo lokal auf deinem System installiert? Wenn nicht, kein Wunder, dass du keine Änderung siehst. Wenn der Browser den Font nicht findet, kann er den Text nicht in dieser Schrift darstellen und nimmt sich halt die nächste Schrift aus dem font stack. Ne, ich habe weder die "Arvo", noch eine der inzwischen favorisierten Schriftarten (also "IBM Plux Sans", oder die "Fira Sans") auf meinem System (openSUSE Tumbleweed) installiert. Daher sehe ich sie nicht! 🙄

Hier hat Gunnar erklärt, was lokal ist: Dein Rechner!

Ja, das ist mir klar (schon lange 😉). Es ist vielleicht noch zu beachten, dass ich nicht unter Windows, sondern unter Linux (openSUSE Tumbleweed) arbeite; das bringt manches von zu Hause aus mit, was unter Windows erst nachinstalliert werden muss. Was aber nicht heißt, dass ich der "Coder" oder völlige Duchblicker bin. Ich nutze Linux "nur".

Praktisch gehe ich so vor: Da ich vor einer Veröffentlichung (fast ausschließlich) alle Daten erst mal nur in einem lokalen Verzeichnis habe, kann ich es zu Testzwecken (zum Beispiel einen HTML- und CSS-Validator (Link zu verschiedenen Validatoren (HTML- und CSS-Format) drüberlaufen lassen, verschiedene Bildschirmgrößen ausprobieren, Links testen, etc.) so aufrufen:

Eingabe in der Adresszeile des Browsers (bei mir der neueste "Firefox" oder dessen Fork "Libre Wolf") folgendermassen:

file:///Pfad/wo/die/Homepage-Dateien/liegen/

So sehe ich eins zu eins, an was ich arbeite und wie sich Änderungen auswirken. Natürlich muss man nach einer Änderung immer erst (mit F5) die Seite aktualisieren; manchmal braucht es auch ein Strg+R. Einmal spielte mir wohl auch der Cache irgendwie einen Streich ... Wenn dann alles (hoffentlich) korrekt ist, wird die Datei mittels SFTP-Client (oder per Drag&Drop) vom lokalen Speicherort auf meinen Webserver kopiert. Bei kniffeligen Änderungen mache ich vom vorherigen Zustand der jeweiligen Datei auch noch eine Kopie für eventuell erforderliche Rückschritte.

In einer „normalen“ Testumgebung lädst Du Deine Webseite von der Platte und sie sucht sich Skripte aus dem /js/-Ordner, Bilder aus dem /img/-Ordner und der Browser baut da alles zusammen!

Auch das ist eigentlich klar.

• In diesem Abschnitt wird erklärt, warum man irgendwann nicht mehr lokal testen kann: Fallstrick Same-Origin-Policy
  • Sollte dieser Abschnitt weiter oben stehen, als Warnung in einer Box erscheinen?

Hm, "erklärt" ist für mich jetzt etwas zu viel gesagt. Es ist ein Hinweis, mit einigen Erläuterungen (die ich im Groben auch nachvollziehen kann), ohne mir jetzt aber für die Praxis den Schubser zu geben, wie ich weiter vorzugehen habe.

Wenn du den Text in Arvo gesetzt sehen willst, installiere die Schriftart auf deinem System.

Wsl. auf dem Mac so, der einen integrierten Testserver hat, auf normalen Systemen greift da die Same-Origin-policy.

Wenn alle (naja, fast alle) Besucher deiner Seite den Text in Arvo gesetzt sehen sollen, packe die Fontdateien auf deinen Webserver und binde Arvo als Webfont ein (@font-face-Regeln).

Und da musst du ansetzen: Du brauchst die Schrift als Datei, vorzugsweise im woff2-Format! Die lieferst Du mit deinem HTML, deinen Bildern und Skripten an die Leser Deiner Webseite aus. Jetzt hat jeder die Schrift, die du dann im CSS für bestimmte Elemente (Überschriften?) angibst.

Da manche Nutzer auf Ihrem Computer einstellen, dass sie eine bestimmte Schrift als Standardschrift haben, ist eine Schriftangabe Deinerseits eben ein Angebot.

Also werde ich mich bezüglich "@font-face" weiterbilden. Diese Seite hier, nicht? https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face

Ja.

Bei

src: local('meine-schrift')

bin ich mir unsicher, denn es gibt ja das Problem der Versionsunterschiede. Warum also überhaupt lokal installieren?

Da muss ich mich schlau machen, Das MDN sagt zu src: local():

Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.

Übersetzung (über deepl.com): "Für Web-Schriftarten gilt dieselbe Beschränkung (Schriftdateien müssen sich in derselben Domäne befinden wie die Seite, die sie verwendet), es sei denn, diese Beschränkung wird durch HTTP-Zugriffskontrollen aufgehoben."

Kann ich also "src:" weglassen; und damit natürlich auch die url? Und falls ich die das "local" (und evtl. die CSS-"url" weglassen kann, so doch wohl nicht das "format" ('woff2')?

Nein, weil du ohne url eben voraussetzt, dass Nutzer die Schrift-Datei lokal installiert haben. Und das geht - wie oben erklärt - eben nicht!

Fazit: lokal + font = geht nicht!

Google-Fonts

Übrigens: meine beiden Schriftarten-Favoriten sind doch hoffentlich keine Google-Fonts? Denn ich habe irgendwo im Wiki gelesen, dass die Daten abgreifen, was ich keinem Besucher der Website zumuten möchte.

Das war 2010 eine große Verbesserung: anstatt damals Schriften in mehreren Formaten mit jeder Seite mitzuliefern, konntest Du sie mit einem Link zu Google einbinden, die dann automatisch die Browserdaten auslasen und dann die gewünschte Schrift im passenden Format ausgaben.

Die Schriften selbst sind aber keine Google-Fonts - wenn man genau hinschaut, merkt man, dass Google freie Fonts einfach als seine „verkauft“.

Na hoffentlich ist das so. Die "IBM Plex Sans" auf jeden Fall. Das habe ich schon recherchiert.

Problematisch war eben das Abgreifen der Daten der Nutzer. Das geht heute immer noch, benötigt heute aber ein Einverständnis der Nutzer, das du vor dem Benutzen der Seite abfragst.

Ja, aber wer schaut sich die Klauseln schon an (sind ja auch extra lang verfasst oder kontrolliert die Firmen, die meinen "essentielle" Daten abgreifen zu müssen?! Meist nur so Leute wie ich; wobei ich es meide, wo möglich, solche Seiten überhaupt zu besuchen.

Schöner geht es, wenn Du die Schriftdateien selbst im woff2-Format hostest und auslieferst. Dann werden keine Daten erhoben.

Ja, genau das möchte ich nun noch umsetzen. 😁

HTML/Tutorials/Google-Fonts_selbst_hosten

Gleich mal schauen, ob ich das kapiere ...

Herzliche Grüße

Matthias Scharwies

Vielen Dank für Dein hilfreiches Feedback, Matthias!

P.s. Was für Validatoren nutzt Ihr denn? Auf obigem Link (vom selfhtml-Wiki) finde ich folgende:

A) HTML-Validatoren:

1. validator.w3.org, DTD-basiert https://validator.w3.org/
2. https://validator.w3.org/nu/, nicht DTD-basiert, beruht auf dem "validator.nu" https://validator.w3.org/nu/
3. validator.nu https://validator.w3.org/nu/

B) CSS-Validatoren:

1. W3C Developer Tools http://w3c.github.io/developers/tools/ → Bei dem kapiere ich was nicht (öffnet sich nur in Github oder der (Linux-)Konsole / Terminal?)
2. CSS Validator (W3C): Der maßgebliche, vom W3-Konsortium zur Verfügung gestellte Syntax-Check für eigene Stylesheets. Überprüft wird, ob der CSS-Quelltext korrekt ist. http://jigsaw.w3.org/css-validator/

Gibt es dort Unterschiede (vielleicht Einschränkungen oder Optionierungen, je nach Arbeitsweise oder Bedürfniss?

Vielen Dank für Eure Hilfe!

Holger