# [Wordpress] @font-face funktioniert nicht



## unwohltaeter (13. Mai 2010)

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:

```
@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


----------



## Maik (13. Mai 2010)

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:
> 
> ...


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


----------



## unwohltaeter (13. Mai 2010)

Natürlich benutze ich absolute Pfadangaben.
Hab an Alles gedacht. Nur die Realität sieht anders aus - leider vermutlich doch nicht an alles gedacht.


----------



## Elroy (13. Mai 2010)

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?


----------



## Maik (13. Mai 2010)

unwohltaeter hat gesagt.:


> Natürlich benutze ich absolute Pfadangaben.


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?


@font-face erlebt sein Revival in CSS3.


The @font-face rule
Web fonts with @font-face

mfg Maik


----------



## unwohltaeter (13. Mai 2010)

Maik hat gesagt.:


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



Ja, dann funktioniert es. Aber genau das will ich nicht.


----------



## Maik (13. Mai 2010)

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.


```
<!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 (13. Mai 2010)

Aha, dann funktioniert das ganze also nicht extern... Schade, das würde mir vermutlich einiges an Traffic einsparen.
Dann muss ich 's wohl so machen.

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


----------



## Maik (13. Mai 2010)

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


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:

```
@font-face {
font-family: Delicious;
src: url('http://dein-server.de/font/delicious-roman.otf');
}
```


```
@font-face {
font-family: Delicious;
src: url('../font/delicious-roman.otf'); /* CSS-Datei befindet sich im Root-Unterverzeichnis "css" */
}
```

mfg Maik


----------

