Fonts im Web

[maginon]

Hallo Zusammen,
kann mir bitte mal jemand erklären, was der Unterschied zwischen websicheren Fonts und Google-Web-Fonts ist?
Ich bin hier jetzt schon 2 h am Suchen im Netz und es wird immer widersprüchlicher.

Ich weiß, dass es websichere Fonts gibt. Da die i.d.R. sehr eingeschränkt sind, habe ich gesehen, dass es auch noch Google-Web-Fonts gibt. Ich habe gelesen, dass bei denen der Font von Google geladen wird und nicht direkt in der Website eingebunden sein muss usw. usf.
ABER: Sind diese Google-Fonts automatisch auch websicher, also auf allen Endgeräten problemlos darstellbar?? Dazu habe ich nichts gefunden und wollte das nicht gleichsetzen ohne es wirklich zu wissen. Oder versteht sich das von selbst?
Da Font-Profis immer davon reden, dass es an wirklich websicheren Fonts vielleicht 7 - 9 Schriften gibt, Google wohl aber über 800 selbst entwickelt hat, kann doch da was nicht stimmen.
Und um die Verwirrung komplett zu machen: Ähnliches gilt natürlich für Microsoft. Da gibt es doch auch deren eigene Schriften, oder? Wie verhalten die sich?

Weiß jemand Rat und kann dazu kurz was sagen?
Das wäre super und würde mir sehr helfen!! Ganz lieben Dank im Voraus!!
maginon

 

[Myhar]

Was verstehst du unter "Websicher"?
Schriften können heutzutage problemlos eingebunden werden, hast du eventuell einen Beispieltext wo von 7-9 Schriften geredet wird?

Zusammengefasst kann man sagen: Wenn die Schrift vom Server mitgeliefert wird kann sie auch auf der Website dargestellt werden.

 

[maginon]

Hallo Myhar,

hier habe ich die Stelle wieder gefunden unter "webtypobuch.de":
Zitat: "Wenn man mit „Großteil der Computer“ einen Wert von mindestens 95 % im Visier hat, schrumpft die Fülle an typografischer Vielfalt ganz schnell zu einer kleinen Gruppe von alten Bekannten zusammen: Arial, Arial black, Times New Roman, Verdana, Georgia, Trebuchet MS, Courier new und unter Umständen noch Lucida Grande/Sans, Tahoma oder Comic Sans."

Gut, es gibt natürlich auch viel Mist im Netz und oft widersprechen sich die Aussagen. Nicht ganz einfach, wenn man tiefer in so ein Thema einsteigt. Und unter "websicher" habe ich verstanden, dass es Schriften sind, die auf nahezu allen Endgeräten funktionieren ohne "zerhackt oder verschoben" zu werden und auch sehr klein noch gut lesbar sind.

Okay. Das nur, weil Du fragtest. Vielen Dank für Deine Antwort. Inzwischen habe ich noch andere Quellen gefunden, woraufhin sich das Chaos etwas lichtet und man langsam begreifen kann, wie das alles funktioniert und zusammenhängt.

Trotzdem war Dein Hinweis mit dem Server sehr wertvoll.
Danke und viele Grüße,
maginon

 

[Curanai]

Unterschied ist simpel: Verwendest Du Google Web Fonts nicht, kannst Deine Datenschutzerklärung auf diesen Eintrag verzichten und Google weiß nicht, dass der Besucher gerade bei Dir ist.

Die von Dir aufgelisteten Schriften sind die Standardschriften in fast jedem Browser. Nimmst Du eine von denen, braucht Dein CSS nix laden.

Willst Du aber mit Open Sans, Roboto o. ä. arbeiten, muss diese für den Besucher bereitgestellt werden: häufig in Form von TTF oder WOFF2 (es gäbe jetzt ein Format, was wohl alle können; man braucht nicht mehr zig Varianten einbinden)

So ... und dann kommt wieder der nächste Moment, wenn der User das gar nicht will (bspw. Google Web Font). Dann wäre beim Besuch Deiner Seite die Schriftart nicht präsent und mein Betriebssystem würde einen Font wählen, der zuletzt bei mir gefunden würde (nein, das wäre nicht Wingdings, aber die Katastrophe wäre perfekt). Also gibst Du einen sog. "Fallback" (engl.) an - das sind Fonts, die genommen werden sollen, wenn der Primärfont nicht geladen wird (warum auch immer).

Häufig trifft man sowas:
"mega-geiler-Font-für-Seite", New Helvetica, Helvetica, Arial, sans-serif

Der Browser platziert das, was er findet - von links nach rechts. Wäre "mega-geiler-Font" also nicht da, wird der nächste Font probiert und verwendet. Man wählt hier immer Fonts, die entweder in einer Familie sind oder ähnlich aussehen zum eigentlichen Vorhaben ("mega geiler ...").

Dann gäbe es noch Fonts, die nicht alle Zeichen unterstützen - mein Lieblingsbeispiel ist dann immer "Umlaute". Achte bei Deiner Auswahl also darauf, dass diese da sind, solltest Du Umlaute brauchen.

Quellen für Fonts gibt es viele - wer Google mag, kann die nehmen (Achtung, DSGVO!) ... kann diese aber auch vom eigenen System einbinden (müssen physisch im web-zugänglichen Bereich liegen).

Lizenzbedingungen nicht vergessen (div. Fonts sind nicht einfach frei nutzbar).

Und zuletzt: "weniger ist mehr" ... also nicht blind bspw. 30 Font-Varianten (regular, kursiv, bold, thin, ...) einbinden und dann nur zwei nutzen oder ekelig mit bold, strong etc. in HTML5 nachhelfen.

Das isses eigentlich.

 

[maginon]

Hi Curanai,
ja danke. Das habe ich kapiert und Du hast es sehr verständlich erklärt!
Meine Frage dazu wäre noch: Wenn ich für eine entsprechende Website einen Google-Font verwenden würde und den mit der Website exportiere - ist es dann so, dass Google automatisch NICHT auf die Daten zugreift, weil ja der Font schon vorhanden ist? Oder scheren die sich da nicht drum, weil die Info der Seite immer ist, dass dieser Font benutzt wird?

Und wenn irgendein Font mit hochgeladen wird: Wo genau muss das dann stehen?

"mega-geiler-Font-für-Seite", New Helvetica, Helvetica, Arial, sans-serif

Vor jedem Text, auf jeder Seite? Oder wo?

 

[Curanai]

Hi, und danke für die Blumen - ich versuche es weiterhin simpel zu halten in meinen Ausführungen.

Ein typischer CSS-Code, um Deine letzte Frage zu beantworten:

html, body {
  font-family: "mega-geiler-font", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

Damit vererbst Du allen Tags exakt diesen Font und variierst später nur mit font-size usw. Sprich: eine Stelle mit dieser Angabe. Solltest Du mehrere Fonts einsetzen, funktioniert es etwas anders - hier würde ich Dir Klassen empfehlen, die Du bei Bedarf dann an die jeweiligen Stellen setzt.

Wenn Du eine Internetseite "exportierst" (was soll das sein - lokal speichern?), so würde der Verweis in Richtung Google weiterhin bestehen bleiben. Du kannst Dir aber die meisten Fonts, welche Google anbietet, auch mit der Website installieren (Bezugsquellen gibt es genügend; explizit legal). Aber wenn Du eine Seite speicherst, bekommst Du so einen Font für gewöhnlich nicht (korrigiert mich, bitte, falls ich falsch liege: Du bekommst das CSS der Seite gespeichert - da steht aber weiterhin "import" bspw. drin).

Wo ein Font liegen muss, beantworte ich rudimentär so: im web-zugänglichen Teil Deiner Seite; also in einem Unterverzeichnis Deines root-Directories. Für gewöhnlich legen Web-Entwickler Fonts unterhalb eines CSS-Ordners ab, welcher in einem "assets"-Ordner liegt. Aber das ist dann der Ordnung der jeweiligen Entwickler zuzuschieben. Das sieht dann bspw. so aus:

./assets/css/fonts/mega-geiler-font.ttf

 

[maginon]

Oha, ganz schön viel Holz ...
Also die Antwort ist cool. Ja. Ich muss mich eingehender damit beschäftigen, um das alles nachvollziehen zu können. Wie gesagt, bin blutiger Anfänger - deshalb auch so komische Fragen. Nichtsdestotrotz hilft mir das sehr weiter, was Du beschreibst und Du hast es idiotensicher erklärt. Wie Du schon in Deinem Zitat unten schreibst - jeden Tag steht ein neuer Idiot auf. Sinngemäß. Mehrere sogar ;-))

Ganz lieben Dank dafür und viele Grüße!! Genieße den Rest-Sonntag!
maginon

 

[Curanai]

Wir haben alle mal irgendwann irgendwo angefangen - lass Dich davon nicht abschrecken oder abhalten. Du machst das schon. Die wichtigste Lektion haste ja unlängst gelernt: Frag nach, wenn Du nicht weiter kommst!

 

[Rata]

Also gibst Du einen sog. "Fallback" (engl.) an - das sind Fonts, die genommen werden sollen, wenn der Primärfont nicht geladen wird (warum auch immer).

Vergleichbar dem „Backstop“ beim Brexit, SCNR!
Kann das nicht mal jemand so und eben nur andersrum den Briten erklären, die meisten von denen raffen das nämlich gar immer noch nicht!?


@Curanai
Das hast Du suuuper erklärt, ich hatt' richtig Spaß daran



Lieber Gruß
Rata

 

[Curanai]

@Rata : Danke und Gruß zurück.