Webdesign: Welche Font-Family?

[McMoneysack91]

Liebe Freunde,

ich möchte gewährleisten, dass jeder, der meine Webseite(n) besucht, auch alles fehlerfrei angezeigt bekommt. Dabei plagt mich die Wahl der Font-Family für Textinhalte.

Bislang habe ich in meinem HTML/CSS Code gar keine spezifischen Angaben zum Font gemacht. Daher sieht der Text in etwa nach einer Art Times New Roman aus. Angenommen ich möchte einen etwas minimalistischeren, moderneren, cleaneren Font verwenden.

Meine Sorge ist, dass gewisse Besucher/Leser diesen Text dann nicht bzw nicht korrekt angezeigt bekommen. Kann das sein? Manche Fonts sind doch ausdrücklich Microsoft-Fonts. Ich kenns aus frischen Linux-Installationen. Da installiert man sich ebenfalls Microsoft Fonts hinzu, um diese gegebenenfalls wenn der Moment kommt auch korrekt dargestellt zu bekommen.

Frage: was bestimmt, ob der User meinen gewählten und deklarierten Font auch so angezeigt bekommt? Kommt es auf das Betriebssystem an, das der User verwendet? Auf den Browser? Ist alles egal und der Browser "kompiliert" sich den Font quasi on the fly beim browsen?

Oder gibt es irgendwelche "freien/offenen" Fonts, wo garantiert ist, dass jedes OS auf jedem Gerät mit jedem Browser sie darstellen kann?

 

[thealex]

Dafür gibt es z.B. Google Fonts - aber ich würde sie lokal einbetten, und nicht vom Google Server einbinden. Zum einen weinen die EU-Datenschützler dann nicht so rum, zum anderen bist du auch unabhängig von den Google Servern.

 

[S.Kara]

Manche Fonts sind OS-Abhängig. Browser-Abhängigkeiten möchte ich mal nicht ausschließen.
Andere Fonts gehen überall, Arial dürfte so ein Kandidat sein.

Du kannst eine Font aber auch direkt mit deiner Webseite ausliefern.

 

[McMoneysack91]

Manche Fonts sind OS-Abhängig. Browser-Abhängigkeiten möchte ich mal nicht ausschließen.
Andere Fonts gehen überall, Arial dürfte so ein Kandidat sein.

Du kannst eine Font aber auch direkt mit deiner Webseite ausliefern.

Dafür gibt es z.B. Google Fonts - aber ich würde sie lokal einbetten, und nicht vom Google Server einbinden. Zum einen weinen die EU-Datenschützler dann nicht so rum, zum anderen bist du auch unabhängig von den Google Servern.

Das klingt ja beides ziemlich ähnlich. Darf ich mir das so vorstellen, dass ich ganz klassisch die Textdatei mit dieser Font Family nehme und irgendwo in ein Verzeichnis meiner Website packe und anschließend in der CSS-Datei z.B. einfach den Pfad zu dieser Datei angebe? Ist das so in etwa korrekt?

Das wäre dann ja wirklich genial, denn dann könnte man sich austoben ohne zu überlegen, welches OS, welches Gerät, welcher Browser aus den zigtausenden etc. der User benutzen könnte.

 

[Helge01]

in ein Verzeichnis meiner Website packe und anschließend in der CSS-Datei z.B. einfach den Pfad zu dieser Datei angebe?

Ja. Die Fonts herunterladen und in ein Verzeichniss packen. Danach in der css Datei diese angeben:

/* roboto-100 - latin_latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('fonts/roboto-v18-latin-100.eot'); /* IE9 Compat Modes */
  src: local('Roboto Thin'), local('Roboto-Thin'),
       url('fonts/roboto-v18-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v18-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v18-latin-100.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v18-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v18-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}

 

[Mercator]

Ein schönes Tutorial wie das Einbetten von google Fonts funktioniert:
https://www.webdesign-journal.de/google-webfonts-einbindung/

 

[NameHere]

Hier kannst du alle Google Fonts downloaden und die passenden CSS dazu erstellen.
https://google-webfonts-helper.herokuapp.com/fonts

Würde direkt für "Modern Browsers" die CSS erstellen.

 

[DerGoblin2k]

Das wäre dann ja wirklich genial, denn dann könnte man sich austoben ohne zu überlegen, welches OS, welches Gerät, welcher Browser aus den zigtausenden etc. der User benutzen könnte.

Ja, aber bitte nicht auf die Idee kommen, einen lizenzpflichtigen Font einzubinden. Das kann ziemlich teuer werden.

 

[kim88]

Wenn es dir egal ist, welche Schriftart du auf deiner Webseite verwendest kannst du auch das machen:

body {
    font-family: system-ui, -apple-system, sans-serif;
}

Dann wird beim Besucher einfach die Standard serifenlose Schrift vom Betriebssystem als Schriftart genommen.

Bei Mac OS, iPhone, iPad etc wäre das: Helvetica Neue
Bei Android: Roboto
Bei Windows 10 und 11: Segoe UI

etc.

 

[netzgestaltung]

https://google-webfonts-helper.herokuapp.com/fonts

Das benutze ich auch immer fürs Google-Fonts-Einbinden (wobei Google die Fonts auch nicht selbst erstellt sondern lediglich gesammelt hat). Zum Download weiterer freier Schriften oder zum Erstellen von Webfont-Kits (aus freien Schriften) nutze ich auch oft https://www.fontsquirrel.com/ da es dort gute Filter und den Generator gibt.

Für Iconfonts nutze ich entweder: https://forkaweso.me oder Material-Icons selfhosted: https://jossef.github.io/material-design-icons-iconfont/ oder es lässt sich aus SVG Icons hier eine eigene Schrift erstellen: https://fontello.com/