Das Leid mit Schriftarten
RedIndian6180
- font
- typografie
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!
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
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
Hallo Der,
uuups - so ein blöder Fliegenklecks auf dem Bildschirm…
Rolf
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
@@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
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?
Dort muss die Datei onkelz2014BO2014.ttf liegen. Ist das der Fall?
@@Linuchs
Dort muss die Datei onkelz2014BO2014.ttf liegen.
Nein, das muss sie nicht. Und sollte auch nicht.
😷 LLAP
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
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
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.