Guten Morgen!

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

aber Du meintest den hier: https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung? Dennoch, bitte entschuldige, bin ich erschlagen von den Informationen des Links.

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!

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!

• 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?

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.

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“.

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.

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

HTML/Tutorials/Google-Fonts_selbst_hosten

Herzliche Grüße

Matthias Scharwies