Unverständnis von CSS-Eigenschaften; Hintergrund der aktiven Navigationsauswahl ändern

[HTML_go]

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

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! 🙄

Wenn du den Text in Arvo gesetzt sehen willst, installiere die Schriftart auf deinem System. 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).

Na ja, natürlich will nicht nur ich den Text in der bevorzugten Schriftart (ist inzwischen wohl die "IBM Plex Sans", bzw. die "Fira Sans" - beides serifenlose) sehen. Vor allem die Besucher der Homepage sollen die Schrift nutzen.

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

Ja und nun frage ich mich, wie genau das für mich umgesetzt werden kann. Wäre das so richtig? Ich habe mich für die beiden serifenlosen Schriften "IBM Plex Sans" und "Fira Sans" entschieden, da sie immerhin fünf Darstellungen bieten (von light bis bold) und weil die erste zu einer internationalen Schriftenfamilie gehört. Beide scheinen gut lesbar. Hier nun der CSS-Code:

html {
  font-family: "IBM Plex Sans", "Fira Sans", sans-serif;
  line-height: 1.5;
}

@font-face {
  font-family: "IBM Plex Sans";
}

Im Link oben (https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face) heißt es ja,

font-familiy: 'meine-schrift';

Da habe ich die von mir gewählte (und bevorzugte) Schriftart eingetragen. Und zwar ohne die hochgestellten Semikolon ('...') und dafür mit den einschließenden Gänsefüßchen, da der Name ja Leerzeichen beinhaltet.

Bei

src: local('meine-schrift')

bin ich mir unsicher, denn es gibt ja das Problem der Versionsunterschiede. Warum also überhaupt lokal installieren? 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')?

Wie also muss dass in meiner CSS aussehen? Finde ansonsten keine Beispiele auf selfhtml ...

Oder doch? Gleich die nächste Überschrift ("Einbindung und Verwendung") in obigem Link!

Demnach müsste mein Code so aussehen

html {
  font-family: "IBM Plex Sans", "Fira Sans", sans-serif;
  line-height: 1.5;
}

@font-face {
  font-family: 'meine-schrift;
  src: url('pfad/zu/meinerschrift.woff2') format('woff2'),
       url('pfad/zu/meinerschrift.woff') format('woff');/*konnte ich für openSUSE Tumbleweed hier runterladen: https://software.opensuse.org//download.html?project=M17N%3Afonts&package=ibm-plex - muss aber erst noch herausfinden, wo die Dateien nach der Installation mit 1-Click-Inistallation jetzt liegen - 😐*/  
}
p {
font-family: meine-schrift, "IBM Plex Sans", sans-serif;
}

?

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