[Wordpress] @font-face funktioniert nicht

unwohltaeter

unwohltaeter

Mitglied
Ich weiß - ist nicht CSS oder CSS 2.1 aber hab da 'n Problem mit @font-face.
Ich möchte eine Schriftart (wer 's wissen will: YanoneKaffeesatz) einbinden, die auf einem anderen Hoster liegt als mein Wordpress-Blog.

Der "Code" sieht so aus:
Code: 
@font-face {
font-family: 'YanoneKaffeesatzBold';
src: url('<?php echo $themestuff . $theme;?>fonts/yanonekaffeesatz-bold-webfont.eot');
src: local('Yanone Kaffeesatz'), local('YanoneKaffeesatz-Bold'),
url('<?php echo $themestuff . $theme;?>fonts/yanonekaffeesatz-bold-webfont.woff') format('woff'),
url('<?php echo $themestuff . $theme;?>fonts/yanonekaffeesatz-bold-webfont.ttf') format('truetype'),
url('<?php echo $themestuff . $theme;?>fonts/yanonekaffeesatz-bold-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}

<?php echo $themestuff . $theme;?> ist einfach nur eine variable Pfadangabe in der PHP-generierten CSS-Datei.

Bilder usw. funktionieren einwandfrei aber die Schriftart überhaupt nicht. Wenn ich alles lokal teste (wohlgemerkt mit exakt den gleichen Einstellungen wie auf meinem Hoster) und der Pfad auf den lokalen Server verweist funktioniert alles einwandfrei. Nur online nicht...

Gruß, unwohltaeter
 
Zuletzt bearbeitet:
Hi.
unwohltaeter hat gesagt.:
Ich möchte eine Schriftart (wer 's wissen will: YanoneKaffeesatz) einbinden, die auf einem anderen Hoster liegt als mein Wordpress-Blog.

Der "Code" sieht so aus:
PHP: 
@font-face {
font-family: 'YanoneKaffeesatzBold';
src: url('<?php echo $themestuff . $theme;?>fonts/yanonekaffeesatz-bold-webfont.eot');
src: local('Yanone Kaffeesatz'), local('YanoneKaffeesatz-Bold'),
url('<?php echo $themestuff . $theme;?>fonts/yanonekaffeesatz-bold-webfont.woff') format('woff'),
url('<?php echo $themestuff . $theme;?>fonts/yanonekaffeesatz-bold-webfont.ttf') format('truetype'), url('<?php echo $themestuff . $theme;?>fonts/yanonekaffeesatz-bold-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}



Bilder usw. funktionieren einwandfrei aber die Schriftart überhaupt nicht. Wenn ich alles lokal teste (wohlgemerkt mit exakt den gleichen Einstellungen wie auf meinem Hoster) und der Pfad auf den lokalen Server verweist funktioniert alles einwandfrei. Nur online nicht...
Zum Vergrößern anklicken....
Ist mit der variablen Pfadangabe der absolute URL zu den Dateien gegeben?

Da sie auf einem anderen Server liegen, muß hier auch der absolute (vollständige) URL referenziert werden.

mfg Maik
 
Natürlich benutze ich absolute Pfadangaben.
Hab an Alles gedacht. Nur die Realität sieht anders aus - leider vermutlich doch nicht an alles gedacht. :D
 
Zuletzt bearbeitet:
Ich dachte font-face funktioniert nicht.

"Von diesen in CSS2 eingeführten Angaben wurde nur @font-face vom Internet Explorer und Netscape 4.x unterstützt. Da sie weder in den Mozilla-Nachfolgern noch in anderen aktuellen Browsern implementiert sind, gehören sie in CSS 2.1 nicht mehr zum Standard!"

Hat sich da was geändert und es geht jetzt doch?
 
unwohltaeter hat gesagt.:
Natürlich benutze ich absolute Pfadangaben.
Zum Vergrößern anklicken....
Wollte mit meiner Frage eine mögliche Fehlerquelle ausschließen, da es in deinem gezeigten Code nicht ersichtlich ist.

Und wenn du die Dateien auf den Server lädst, wo dein Wordpress-Blog installiert ist, und sie von dort einbindest, funktioniert es?

Elroy hat gesagt.:
Ich dachte font-face funktioniert nicht.

"Von diesen in CSS2 eingeführten Angaben wurde nur @font-face vom Internet Explorer und Netscape 4.x unterstützt. Da sie weder in den Mozilla-Nachfolgern noch in anderen aktuellen Browsern implementiert sind, gehören sie in CSS 2.1 nicht mehr zum Standard!"

Hat sich da was geändert und es geht jetzt doch?
Zum Vergrößern anklicken....
@font-face erlebt sein Revival in CSS3.


mfg Maik
 
Und das ist hier wohl der Knackpunkt, wie ein kleiner Schnelltest bei mir gerade ergeben hat - unabhängig vom genutzten Wordpress.

Mit dem nachfolgenden Quellcode referenziere ich die verwendeten Schriftarten-Dateien des eben genannten Artikels "Web fonts with @font-face", und bekomme sie auf diesem Wege ebenso nicht im Browser angezeigt.

Befinden sich die beiden OTF-Dateien hingegen auf meinem Server, funktioniert das Einbinden der Schriftart.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-05-13" />

<title>tutorials.de | [Wordpress] @font-face funktioniert nicht</title>

<style type="text/css">
/* <![CDATA[ */
@font-face {
font-family: Delicious;
src: url('http://www.css3.info/wp-content/uploads/2008/06/delicious-roman.otf');
}
@font-face {
font-family: Delicious;
font-weight: bold;
src: url('http://www.css3.info/wp-content/uploads/2008/06/delicious-bold.otf');
}
p {
font-family:Delicious;
}
p em {
font-style:normal;
font-weight:bold;
}
/* ]]> */
</style>

</head>
<body>

<p>Users of Safari 3.1 will see this text rendered with the Delicious font, <em>with this part in Delicious Bold</em>.</p>

</body>
</html>


mfg Maik
 
unwohltaeter hat gesagt.:
Aber komisch, das auf W3 ein Beispiel mit externer (und absoluter) Url verwendet wird.
http://www.w3.org/TR/css3-fonts/#the-font-face-rule
Zum Vergrößern anklicken....
Du sprichst hier von den einzelnen Quellcode-Beispielen, denn unmittelbar in diesem Dokument kommt @font-face überhaupt nicht zum Einsatz.

Und der Pfad zur Schriftarten-Datei kann ja nunmal im Stylesheet absolut oder relativ angegeben werden:
CSS: 
@font-face {
font-family: Delicious;
src: url('http://dein-server.de/font/delicious-roman.otf');
}
CSS: 
@font-face {
font-family: Delicious;
src: url('../font/delicious-roman.otf'); /* CSS-Datei befindet sich im Root-Unterverzeichnis "css" */
}

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück