# [scheiß Google] Webseiten mit eigenen Fonts teilweise kaputt

## sprittwicht

Da einige Webseiten leider mittlerweile richtig scheiße aussehen, wenn man ihnen ihre "tollen" eigenen Fonts verbietet, habe ich nun eigene Fonts in Firefox erlaubt.

Auf manchen Seiten fehlt nun allerdings der Text komplett!

Beispiel: http://www.waz.de/

Hier kann ich nur noch die Anreißer lesen. Überschriften, Layout, die kompletten Navigationsmenüs sind einfach weg.

Dagegen können die mitgelieferten Fonts von z.B. heise.de problemlos dargestellt werden.

Was ist hier hinüber?!

Google Chrome kann die Fonts auch nicht darstellen, opera-12.16_p1860-r1 (lag hier noch rum, keine Ahnung wie alt, wird nicht mehr benutzt) friert beim Laden komplett ein.Last edited by sprittwicht on Sun Jan 08, 2017 9:16 am; edited 1 time in total

----------

## misterjack

 *sprittwicht wrote:*   

> Beispiel: http://www.waz.de/

 

Das liegt nicht an deinem System, das liegt an der schrottigen Website  :Wink: 

----------

## sprittwicht

Theoretisch ja. Praktisch geht's halt unter Windows.  :Wink: 

----------

## misterjack

 *sprittwicht wrote:*   

> Praktisch geht's halt unter Windows. 

 

Typisch für zusammengefrickelte Websites, sie funktionieren nur partiell. Einen bestimmten Font zu benutzen ist das eine, den aber dann nicht mitzuliefern das andere. Das CSS ist ebenfalls ziemlich kaputt, da der font-family fallback nicht funktioniert. Da hat eindeutig der Webdesigner geschlampt. Meine Vermutung: keine Ahnung von der Materie und per Trial-and-Error die Website zusammengefrickelt  :Wink: 

----------

## sprittwicht

Unter Windows hab ich die entsprechenden Fonts auch nicht installiert, also scheint das da mit dem Runterladen zu klappen.

Davon ab wär's ja ziemlich beknackt von Firefox (und Chrome), wenn sie wissen dass ein bestimmter Font - aus welchen Gründen auch immer - nicht verfügbar ist, und sie trotzdem die Seite damit rendern wollen.

Aber schonmal gut zu wissen dass der Fehler nicht nur bei mir auftritt. :-/

----------

## misterjack

Nochmals: die Browser trifft keine Schuld, dass nur bei bestimmten Konstellationen die @font-face rule ausgeliefert wird. Es liegt an dem zusammengefrickelten unsauberen Quellcode der Website. Bei sauberen CSS klappt der Fallback auch ohne Probleme, daher ist es eben nicht beknackt, dass $Browser bei Müll nicht immer etwas schönes hervorzaubern können ...

----------

## sprittwicht

Die Seite ist furchtbar und ich kann den Quelltext nicht nachvollziehen. ABER:

Das Web-Developer-Plugin zeigt für eine betroffene Stelle folgenden CSS-Code an:

```

.teaser .teaser__kicker {

    color: #333;

    float: none;

    font-family: "FiraSansRegular","Open Sans",sans-serif;

}

```

Da ist zumindest der Fallback sauber drin (und selbst wenn er es nicht wäre: nicht vorhandene Fonts werden nicht gerendert, Fallback ist immer ein Systemfont).

Die Definition kommt laut Web Developer aus einer "_teaser.scss". Keine Ahnung wo er die her nimmt, wird wohl über 500 "magische" Ecken eingebunden, ist mir peng.

Entscheidend ist, dass der Font tatsächlich geladen wird. Web Developer zeigt als verwendeten Font:

```

http://www.waz.de/resources/fonts/fira-sans/fira-sans-regular/fira-sans-regular.woff2

Used as: "FiraSansRegular"

@font-face {

  font-family: "FiraSansRegular";

  font-style: normal;

  font-weight: normal;

  src: url("../../fonts/fira-sans/fira-sans-regular/fira-sans-regular.eot?#iefix") format("embedded-opentype"), url("../../fonts/fira-sans/fira-sans-regular/fira-sans-regular.woff2") format("woff2"), url("../../fonts/fira-sans/fira-sans-regular/fira-sans-regular.ttf") format("truetype");

}

```

Und mit genau dieser Font-Datei kann man auch stupide auf anderen Seiten testen:

http://codepen.io/anon/pen/mRJgqK

Der Lobster-Font geht, FiraSansRegular wird gefunden kann aber nicht dargestellt werden, bei ungültigen Angaben (ungültige src-URL bzw. ungültige font-family) wird ein System-Default verwendet.

Womit wir wieder beim ursprünglichen Problem wären: Warum funktioniert der Font unter Windows, nicht aber unter Gentoo (will vielleicht mal jemand mit einem anderen Linux testen?)?

Es scheint ja auch kein generelles woff2-Problem zu sein, der komische Lobster-Font tut es ja.

----------

## sprittwicht

OK, dank Google sind wohl leider kaputte Versionen des Fonts im Umlauf: https://github.com/google/fonts/issues/10

Auf betroffenen Seiten kriege ich eine Font-Datei, die nur 11,5 kB groß ist, die von github/Mozilla ist bei mir 130 kB groß.

Warum das unter Windows geht kapier ich nicht, aber zumindest ist hier wohl weder Firefox noch Linux der Böse...

----------

## artbody

Also bei mir geht die Seite 

OHNE Scripte   :Very Happy: 

```
<!DOCTYPE html>

<html class="no-js" lang="de-DE"> .... 
```

----------

## strangerthandreams

 *sprittwicht wrote:*   

> OK, dank Google sind wohl leider kaputte Versionen des Fonts im Umlauf: https://github.com/google/fonts/issues/10
> 
> Auf betroffenen Seiten kriege ich eine Font-Datei, die nur 11,5 kB groß ist, die von github/Mozilla ist bei mir 130 kB groß.
> 
> Warum das unter Windows geht kapier ich nicht, aber zumindest ist hier wohl weder Firefox noch Linux der Böse...

 

Fonts können auch verlustbehaftet komprimiert werden. Zum Beispiel würde ein Font dann nur noch die Zeichen enthalten, die auch wirklich gebraucht werden. Das senkt natürlich die Zeit bis die Seite angezeigt wird. Könnte das ein Grund sein? Vielleicht eine OS-Weiche im Code der Seite? Ist aber nur eine Vermutung. Ich bin (Gott sei Dank) kein Webentwickler.

----------

