Facebook Social Plugins, CSS und @font-face

[Slashwalker]

Hallo ATler,
ich bastel gerade an einer Website, die die Facebook "LikeBox" nutzt.

Die LikeBox wird über JS eingebunden:
<script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
document.getElementById('fblikebox').innerHTML = '<fb:fan profile_id="xxxxxxxx" height="500" width="1000" connections="25" stream="true" header="true" css="http://www.example.de/.temp/assets/css/facebook.css?#randrange(1,100)#"></fb:fan>';
FB.init({xfbml : true});
/* ]]> */
</script>
Das randrange(1,100) fügt eine Zufallszahl ein, damit das CSS nicht von FB gecached wird.

Nun bin ich mit dem Styling fast durch und es funktioniert soweit alles. Nur meine Schriftart wird nicht übernommen.

Ich nutze die Schriftart auch an anderen Stellen innerhablb der Website. Die Font-Datei und das CSS sind also generell okay.
In meinem facebook.css habe ich die Schriftart natürlich mit absoluter URL eingebunden. Geht trotzdem nicht.

Jemand Erfahrung mit dem Styling von FB Social Plugins?

Edit: Is nich wahr... Ausgerechnet im IE 9 funktioniert es. Firefox und Safari weigern sich, die Schrift anzuzeigen.

 

[_linx_]

Was meint der W3C-CSS-Parser zu deinem CSS? Evt hast du da einen Bock drin, würde auch erklären, wieso das es im IE geht xD

 

[Slashwalker]

Wenn ich ihn auf Standard durchlaufen lasse, meckert er. Wenn ich aber Type auf css3 setze ist alles grün.
Allerdings meckert er bei css21 das es font-family, font-weight und font-style nicht geben würde?

Die @font-face Definitionen habe ich über FontSquirrel.com generieren lassen, also Font hochgeladen und webfont-kit heruntergeladen.
Und wie gesagt, im Rest der Seit (Headlines etc) funktioniert es, nur in der LikeBox nicht.

Hier mal das facebook.css:
@charset "UTF-8";

@font-face {
font-family: 'DeftoneStylusRegular';
src: url('http://example.de/.temp/assets/fonts/deftone-stylus-webfont.eot');
src: url('http://example.de/.temp/assets/fonts/deftone-stylus-webfont.eot?#iefix') format('embedded-opentype'),
url('http://example.de/.temp/assets/fonts/deftone-stylus-webfont.woff') format('woff'),
url('http://example.de/.temp/assets/fonts/deftone-stylus-webfont.otf') format('opentype'),
url('http://example.de/.temp/assets/fonts/deftone-stylus-webfont.ttf') format('truetype'),
url('http://example.de/.temp/assets/fonts/deftone-stylus-webfont.svg#DeftoneStylusRegular') format('svg');
font-weight: normal;
font-style: normal;

}


.fan_box .full_widget {
background: transparent;
border: none;
}
.UIIntentionalStory_Names a, a.UIIntentionalStory_Names{
font-family:'DeftoneStylusRegular',Georgia, "Times New Roman", Times, serif;
color:#FFF;
font-size:24px;
font-weight:normal;
font-style:normal;
font-variant:normal;
}

Klassennamen stimmen, Schriftfarbe und Größe werden übernommen.

 

[Slashwalker]

Okay, ich habe jetzt mal die URL aus dem Facebook IFrame im Browser aufgerufen und mir den Link zum CSS geschnappt (FB cached das CSS File). Und siehe da, die ***** entfernen die @font-face Deklarationen. Weiß der Geier wieso der IE die Schrift trotzdem anzeigt. Vielleicht sch** der auf XSS Policies und übernimmt die Schrift aus meinem Haupt CSS.

Finde es ehrlich gesagt schon dreist, das FB "meinen Quellcode" modifiziert. Dann sollen sie die Option ganz streichen, wenn es ihnen nicht passt, das man die Plugins optisch anpasst.