Das Leid mit Schriftarten

[RedIndian6180]

Moin.

Ich habe folgende css-Dateien im css-Ordner: bo2014.css und format.css

In der bo2014 steht folgendes:

@font-face {
   font-family: 'onkelz_2014regular';
   src: url('../fonts/bo2014/onkelz2014BO2014.eot');
url('../fonts/bo2014/onkelz2014BO2014.woff2') format('woff2'),
        url('../fonts/bo2014/onkelz2014BO2014.woff') format('woff'),
        url('../fonts/bo2014/onkelz2014BO2014.ttf') format('truetype'),
        url('../fonts/bo2014/onkelz2014BO2014.svg#open_sanslight') format('svg');
   font-weight: normal;
   font-style: normal;    }

In der format.css soll in dem Bereich auf die Schriftart zurückgegriffen werden:

.name {display:block;
color:#fff;
font-size:2.6rem;
line-height:2.6rem;
text-align:center;
padding:.4rem;
text-transform:uppercase;
}

Mit font-family:"onkelz_2014regular", klappt es nicht. Was mache ich falsch?

Vielen Dank im Voraus!

[Rolf B]

Hallo RedIndian6180,

ich weiß nicht, ob der Unterstrich ein Problem in Fontnamen darstellt, aber ich würde es nicht annehmen.

Bitte prüfe im Netzwerk-Tab der Entwicklerwerkzeugen des Browsers, ob die Fontdateien geladen werden konnten. Die URL muss relativ zur CSS Datei angegeben sein, in der der Font definiert wird.

Du solltest auch die SVG-Variante weglassen. Die werden eh nur vom Safari unterstützt und werden als "don't use in new projects" eingestuft.

Rolf

[Der Martin]

Hallo,

@font-face {
   font-family: 'onkelz_2014regular';
   src: url('../fonts/bo2014/onkelz2014BO2014.eot');
url('../fonts/bo2014/onkelz2014BO2014.woff2') format('woff2'),
        url('../fonts/bo2014/onkelz2014BO2014.woff') format('woff'),
        url('../fonts/bo2014/onkelz2014BO2014.ttf') format('truetype'),
        url('../fonts/bo2014/onkelz2014BO2014.svg#open_sanslight') format('svg');
   font-weight: normal;
   font-style: normal;    }

das sieht für mich falsch aus. Schau dir das nochmal sehr kritisch an. Achte vor allem darauf, wo ein Komma stehen soll und wo ein Semikolon.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Rolf B]

Hallo Der,

uuups - so ein blöder Fliegenklecks auf dem Bildschirm…

Rolf

[Der Martin]

Hallo,

uuups - so ein blöder Fliegenklecks auf dem Bildschirm…

du hast das vielleicht scherzhaft gemeint - aber ich hatte vor ein paar Tagen tatsächlich ein paar echte Fliegenschisse auf dem Bildschirm. Etwa einen halben Millimeter große schwarze Punkte. Konnte man, wenn Text an der passenden Stelle dargestellt wurde, tatsächlich für einen Punkt halten.

Das hab ich dann aber doch recht schnell wieder gereinigt. 😀

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Gunnar Bittersmann]

@@Der Martin

@font-face {
   font-family: 'onkelz_2014regular';
   src: url('../fonts/bo2014/onkelz2014BO2014.eot');
url('../fonts/bo2014/onkelz2014BO2014.woff2') format('woff2'),
        url('../fonts/bo2014/onkelz2014BO2014.woff') format('woff'),
        url('../fonts/bo2014/onkelz2014BO2014.ttf') format('truetype'),
        url('../fonts/bo2014/onkelz2014BO2014.svg#open_sanslight') format('svg');
   font-weight: normal;
   font-style: normal;    }

das sieht für mich falsch aus. Schau dir das nochmal sehr kritisch an. Achte vor allem darauf, wo ein Komma stehen soll und wo ein Semikolon.

Kommas und Semikolons sind schon richtig. Es fehlt src:.

---

Na ja, es fehlt nicht, sondern die Referenz auf das EOT-File ist zuviel. Ebenso wie die Referenzen auf TTF und SVG. Weg damit!

Man muss Webfonts nur noch als WOFF2 einbinden. WOFF (1) nur, wenn man’s schonmal hat. Ansonsten kann man auch prima damit leben, an die Null-Komma-irgendwas-Nutzerschaft des IE keine Webfonts auszuliefern.

😷 LLAP

--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner

[Linuchs]

Ist das inzwischen gelöst?

Dateien (Hintergrundbilder, Schriftarten, ...), die in css-Dateien erwähnt werden, müssen eine absolute Pfadangabe haben (die der Browser aufrufen kann) oder eine relative aus der Sicht dieser css-Datei.

Du hast die relative gewählt:

../fonts/bo2014/onkelz2014BO2014.ttf

Die css-Datei ist im Ordner css?

• dann geht .. eine Ebene höher,
• fonts in den Ordner css/../fonts
• bo2014 in den Ordner css/../fonts/bo2014

Dort muss die Datei onkelz2014BO2014.ttf liegen. Ist das der Fall?

[Gunnar Bittersmann]

@@Linuchs

Dort muss die Datei onkelz2014BO2014.ttf liegen.

Nein, das muss sie nicht. Und sollte auch nicht.

😷 LLAP

[Tabellenkalk]

Hallo, :

../fonts/bo2014/onkelz2014BO2014.ttf

Die css-Datei ist im Ordner css?

• dann geht .. eine Ebene höher,
• fonts in den Ordner css/../fonts

Ich verstehe nicht, was du hier sagen möchtest.
Der Ordner fonts muss zusammen mit dem css-Ordner im gleichen übergeordneten Ordner liegen.

Gruß
Kalk

[Rolf B]

Hallo Tabellenkalk,

Linuchs ist ebenso auf den Fliegenschiss über dem Komma reingefallen wir andere auch, aber wenn man die Referenzierung von CSS Ressourcen erklären will, liegt er genau richtig.

css/../fonts/foo.wuff2 heißt doch: Geh nach css, geh wieder raus, geh dann nach fonts und nimm dir dort foo.wuff2 an die Leine 😉.

Ausgehend vom Webroot gibt es natürlich einen kürzeren Pfad. Aber wenn die Dateireferenz in einer CSS Datei im CSS Ordner gemacht wird, dann ist der Anfang des Pfades vorgegeben und man muss die richtige Fortsetzung benennen.

Man könnte höchstens diskutieren, ob man den fonts-Ordner verschieben sollte, so dass er nicht ein Geschwisterordner von css ist, sondern ein Unterordner.

Rolf

[Linuchs]

Der Ordner fonts muss zusammen mit dem css-Ordner im gleichen übergeordneten Ordner liegen.

Ja, relativ adressiert sieht das so aus: ../fonts

css/../fonts war falsch, sorry. Ziehe meine Beiträge zurück.