@font-face lädt nicht
mrgreen
- css
Ich möchte per CSS eine Schrift einbinden, was leider nicht funktioniert, weder in Firefox, noch Safari oder Dolphin Mobile.
Stylesheet:
@font-face {
font-family: 'eveleth_regularbold';
src: url('http://leegreen.ch/fonts/evelethbold-webfont.eot');
src: url('http://leegreen.ch/fonts/evelethbold-webfont.eot?#iefix') format('embedded-opentype'),
url('http://leegreen.ch/fonts/evelethbold-webfont.woff') format('woff'),
url('http://leegreen.ch/fonts/evelethbold-webfont.ttf') format('truetype'),
url('http://leegreen.ch/fonts/evelethbold-webfont.svg#eveleth_regularbold') format('svg');
font-weight: normal;
font-style: normal;
}
.titel{
color: #f1e176;
background: url(http://pascalgruenenfelder.ch/wp-content/uploads/bg/bg70_70bl.png);
font-family: 'eveleth_regularbold';
font-size: 62px;
font-weight:bold;
}
Danke für eure Hilfe!
Om nah hoo pez nyeetz, mrgreen!
Ich möchte per CSS eine Schrift einbinden, was leider nicht funktioniert, weder in Firefox, noch Safari oder Dolphin Mobile.
Siehe http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face, v.a. die ersten beiden „Achtung“.
Matthias
Danke Matthias,
heisst Firefox würde die Schrift sowieso anzeigen (Achtung 1); auch wenn sie per Flag zur Einbindung verboten wurde? Ist eine offiziell gekaufte Web-Schrift, das müsste also gehen,
Server-Berechtigungen sind auch alle auf 777.
zu 2: alle meine Files sind auf dem selben Server, sollte also auch kein Problem darstellen.
Wie weiter??
Om nah hoo pez nyeetz, mrgreen!
Ich möchte per CSS eine Schrift einbinden, was leider nicht funktioniert, weder in Firefox, noch Safari oder Dolphin Mobile.
Siehe http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face, v.a. die ersten beiden „Achtung“.
Matthias
Nachtrag:
Firebug gibt die Meldung aus:
Cross-Origin-Anfrage blockiert: Die Same-Origin-Regel verbietet, die externe Ressource auf http://leegreen.ch/fonts/evelethbold-webfont.eot zu lesen. Dies kann gelöst werden, indem die Ressource auf die gleiche Domain geschoben wird oder CORS aktiviert wird.
Die Files sind aber alle hier:
http://leegreen.ch/fonts/evelethbold-webfont.woff
http://leegreen.ch/test.html
http://leegreen.ch/css/test.css
???
Hallo
Firebug gibt die Meldung aus:
Cross-Origin-Anfrage blockiert: Die Same-Origin-Regel verbietet, die externe Ressource auf http://leegreen.ch/fonts/evelethbold-webfont.eot zu lesen. Dies kann gelöst werden, indem die Ressource auf die gleiche Domain geschoben wird oder CORS aktiviert wird.
Die Files sind aber alle hier:
http://leegreen.ch/fonts/evelethbold-webfont.woff
http://leegreen.ch/test.html
http://leegreen.ch/css/test.css
Du referenzierst sie mit vollständiger URL aber, als würden sie von einem anderen Server geladen. Benutze relative Pfade (relativ zur CSS-Ressource ../fonts/evelethbold-webfont...) statt der absoluten Angabe.
Tschö, Auge
Danke Auge, det wars! Alles funktioniert.
Hallo
Firebug gibt die Meldung aus:
Cross-Origin-Anfrage blockiert: Die Same-Origin-Regel verbietet, die externe Ressource auf http://leegreen.ch/fonts/evelethbold-webfont.eot zu lesen. Dies kann gelöst werden, indem die Ressource auf die gleiche Domain geschoben wird oder CORS aktiviert wird.
Die Files sind aber alle hier:
http://leegreen.ch/fonts/evelethbold-webfont.woff
http://leegreen.ch/test.html
http://leegreen.ch/css/test.cssDu referenzierst sie mit vollständiger URL aber, als würden sie von einem anderen Server geladen. Benutze relative Pfade (relativ zur CSS-Ressource ../fonts/evelethbold-webfont...) statt der absoluten Angabe.
Tschö, Auge
Hab die Lösung deines Problems gleich mal ins Wiki übernommen…
Aber das nur zur Info.
Gruß
MathiasB
@@mrgreen:
nuqneH
@font-face {
font-family: 'eveleth_regularbold';
src: url('http://leegreen.ch/fonts/evelethbold-webfont.eot');
src: url('http://leegreen.ch/fonts/evelethbold-webfont.eot?#iefix') format('embedded-opentype'),
url('http://leegreen.ch/fonts/evelethbold-webfont.woff') format('woff'),
url('http://leegreen.ch/fonts/evelethbold-webfont.ttf') format('truetype'),
url('http://leegreen.ch/fonts/evelethbold-webfont.svg#eveleth_regularbold') format('svg');
font-weight: normal;
font-style: normal;
}
Das sollte wohl 'font-weight: bold;' heißen, zumal du es für `.titel`{:.language-css} auch so verwendest.
SVG-Schriften kannst du in die Tonne treten, braucht kein Mensch. WOFF für aktuelle Browser, WOFF2 für zukünftige, TTF für alte Androids, EOT für alte IE, s. [Can I Use @font-face Web fonts](http://caniuse.com/#feat=fontface), Reiter Sub-features.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
@@Gunnar Bittersmann:
nuqneH
SVG-Schriften kannst du in die Tonne treten, braucht kein Mensch.
siehe Removal of support for SVG web fonts
Qapla'