Seltsames Phänomen bei dem ein Font nicht angenommen wird

[einsiedler]

Hallo liebe Forumer, ich beschreibe ein seltsames Phänomen (bei Chrome) und frage euch ob ihr das eventuell kennt und wie man es behebt. Und zwar wenn man auf meine Seite (mit Chrome) geht, wird mein Font korrekt angezeigt: www.testseite.de Soweit gut, aber wenn man meine Seite im Browsertab beibehält (quasi beim Neustart die zuletzt angesehene Seite wieder öffnet), den Browser dann schließt und dann wieder öffnet, dann ist plötzlich der Font weg und irgendein "Standart Font" wird angezeigt. Woran kann das liegen? Das ist auch NUR beim Chrome, beim Firefox oder Opera funktioniert es PRIMA! Kennt ihr das? Wie behebt man soetwas?

Gruß der misanthrop

[TS]

Hello,

das könnte liegen an

• relativen Pfadangaben, wo man besser absolute zur Domain benutzen sollte
• Bruch des Schemes (also nur http, obwohl die Hauptseite in https läuft)

Beispielstelle zur Adressierung:

@font-face { 
  font-family: 'Font Awesome 5 Brands'; 
  font-style: normal; 
  font-weight: normal; 
  src: url("../webfonts/fa-brands-400.eot"); 
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

Glück Auf
Tom vom Berg

[einsiedler]

Okay, ersteres ist klar, das werde ich beheben und nur absolute Pfade setzen. Aber zu zweiterem, wie muss ich da nun vorgehen?

Gruß der misanthrop

[Raketenwissenschaftler]

Ich konnte Dein Problem - allerdings mit dem Chromium unter Linux - nicht nachvollziehen. Die Entwickler-Tools haben auch behauptet, dass technisch alles "fein" ist.

• Versuch mal, ob es reicht, den Browser-Cache zu löschen. Kann sein, dass da beim Entwickeln früherer Mist kleben geblieben ist.

[einsiedler]

Danke Dir, probiere ich aus!

Gruß der misanthrop

[Rolf B]

Hallo einsiedler,

okay, ich kann es nachvollziehen.

Chrome muss dafür ein Icon in der Taskleiste sein.

Man öffnet man Seite, schließt den Browser und drückt dann auf dem Taskleisten Icon die rechte Maustaste. Da findet man eine Liste der zuletzt geöffneten Seiten. Man klickt auf Misanthropia, und die Seite öffnet sich mit falschem Font.

Das blöde ist, dass man zu diesem Zeitpunkt keine Entwicklertools offen haben kann - zumindest wüsste ich nicht, wie man sie zu dem Zeitpunkt starten können sollte.

Soweit ich das erkennen kann, ist dein CSS in Ordnung. Du forderst Variable-Bold an, das entsprechende CSS ist da und stimmt mit der funktionierenden Fassung überein. Der Variable-Font wird einfach nicht geladen.

Seitenrefresh mit F5 oder Strg+F5 (selbst bei abgeschaltetem Cache) hat keinen Effekt. Es liegt auch nicht an der Umleitung von www.tassilosturm.de nach https://tassilosturm.de/login.php. Ruft man diese Seite ohne Umleitung direkt auf, ist die Darstellung ok.

Update: Es passiert nur, wenn das Öffnen dieses Tab gleichzeitig Chrome startet. Macht man es, wenn Chrome schon läuft, passiert es nicht.

Ich beginne, an einen Bug in Chrome zu glauben.

Der FontAwesome Font wird geladen. Der Unterschied in den @font-face Definitionen ist, dass bei Dir ein local(...) Eintrag in den src Angaben ist. Nimm das mal probehalber raus, vielleicht kommt Chrome damit nicht klar. Deine local-Angabe ist ohnehin so nicht geeignet, weil Du damit auf Fonts verweist die auf dem Computer des Anwenders installiert sind. Wenn Du Variable-Bold als Schrift auf deinem PC hast, müsste da local('Variable-Bold') stehen, und kein Verweis auf eine woff oder eot Datei.

Was mir auch nicht klar ist: du hast zwei src Eigenschaften (und bist in guter Gesellschaft, FA macht das auch), aber es ist doch eigentlich so, dass bei zwei gleichnamigen Eigenschaften die später kommende gewinnt (sofern keine anderen Vorrangregeln greifen).

Rolf

[einsiedler]

Nabend Rolf, ich glaube das war es, habe mal testweise das "local" gelöscht. Macht es nun bei Dir ebenso das, wie nun bei mir am PC, prüf es bitte auch mal nach! Es ist manchmal verrückt!

DANKE!

Gruß der misanthrop

[Rolf B]

Hallo einsiedler,

so, nachdem ich den Chrome-Schalter gefunden habe der die letzten Tabs wiederherstellt... irgendwie trägt der Bursche das hier nicht ins Taskleiten-Icon ein, wo er war...

Sieht auch bei mir jetzt gut aus.

Um nun vorwärts zu gehen: Probier's nochmal mit local(), aber diesmal mit korrekter Syntax, d.h. dem Namen eines installierten Fonts (gerne ein anderer als Variable, damit Du den Unterschied auch siehst). Und dann schau nochmal, was beim Browser-Restart passiert.

Naja, oder pfeif drauf und lass local weg. Wofür gibt's den Browsercache...

Rolf

[Gunnar Bittersmann]

@@Rolf B

Um nun vorwärts zu gehen: Probier's nochmal mit local()

Ich hab mal gehört, dass man local() nicht verwenden sollte; weiß aber jetzt die genauen Gründe nicht mehr. Muss mal Jason Pamental auf der beyond tellerrand danach fragen.

Systemfont und Webfont unter verschiedenen Namen verwenden; Systemfont als erstes im Stack – wird dann der Webfont geladen, wenn der Systemfont verfügbar ist?

Naja, oder pfeif drauf und lass local weg. Wofür gibt's den Browsercache...

Welcher auf den meisten™ Geräten nicht allzu üppig ausfällt und schnell mit was anderem überschrieben ist. Dass Webentwickler nur von sich ausgehen (und dem, was sie auf oder unter dem Tisch zu stehen haben), ist bedauerlich bis ärgerlich.

„Pfeif auf performance“ ist sicher kein guter Rat.

LLAP 🖖

[einsiedler]

Das bedeutet also so:

@font-face {
    font-family: 'Variable-Bold';
    src: local('Bauhaus 93');
    src: url('../web-fonts/Variable/Variable-Bold.eot'),
        url('../web-fonts/Variable/Variable-Bold.eot?#iefix') format('embedded-opentype'),
        url('../web-fonts/Variable/Variable-Bold.woff') format('woff'),
        url('../web-fonts/Variable/Variable-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

zum Beispiel...

Richtig?

Gruß der misanthrop

[Gunnar Bittersmann]

@@einsiedler

Das bedeutet also so:

@font-face {
    font-family: 'Variable-Bold';
    src: local('Bauhaus 93');
    src: url('../web-fonts/Variable/Variable-Bold.eot'),
        url('../web-fonts/Variable/Variable-Bold.eot?#iefix') format('embedded-opentype'),
        url('../web-fonts/Variable/Variable-Bold.woff') format('woff'),
        url('../web-fonts/Variable/Variable-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

zum Beispiel...

Richtig?

Nein, in mehrerer Hinsicht nicht. Zum einen nicht eben nicht local, sondern:

@fontface
{
  font-family: Variable;
  src: url('../web-fonts/Variable/Variable-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

body
{
  font-family: Bauhaus 93, Variable, …;
}

(mal angenommen, die Schriftart heißt lokal „Bauhaus 93“).

Die Schriftfamilie sollte Variable benannt werden, nicht Variable-Bold. Die einzelnen Schriftschnitte werden durch die verschiedenen Werte für font-weight und font-style unterschieden:

@fontface
{
  font-family: Variable;
  src: url('../web-fonts/Variable/Variable-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@fontface
{
  font-family: Variable;
  src: url('../web-fonts/Variable/Variable-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@fontface
{
  font-family: Variable;
  src: url('../web-fonts/Variable/Variable-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

EOT und TTF sind Relikte aus längst vergangenen Zeiten. Weglassen! Als Format brauchst du einzig WOFF und möglichst auch WOFF2 (besser komprimiert) – letzteres zuerst, also:

@fontface
{
  font-family: Variable;
  src: url('../web-fonts/Variable/Variable-Regular.woff2') format('woff2'),
    url('../web-fonts/Variable/Variable-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

LLAP 🖖

[Rolf B]

Hallo Gunnar,

danke für die Erklärungen.

Aber muss man das Bauhaus 93 in der font-family Angabe nicht in Anführungszeichen setzen, wegen der Leerstelle darin?

Rolf

[Gunnar Bittersmann]

@@Rolf B

Aber muss man das Bauhaus 93 in der font-family Angabe nicht in Anführungszeichen setzen, wegen der Leerstelle darin?

Nö, muss man nicht.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich hab mal gehört, dass man local() nicht verwenden sollte; weiß aber jetzt die genauen Gründe nicht mehr. Muss mal Jason Pamental auf der beyond tellerrand danach fragen.

Jason war’s nicht, von dem ich das mal gehört hatte. Jason meint, local() könne man verwenden, aber gut testen!

Systemfont und Webfont unter verschiedenen Namen verwenden; Systemfont als erstes im Stack

Oder halt so.

wird dann der Webfont geladen, wenn der Systemfont verfügbar ist?

Testen!

LLAP 🖖