开发者

@Font-face dynamic loading of <link (...)>. Working everywhere(Chrome, IE8, Safari) EXCEPT FIREFOX!

I'm making a plugin for wordpress. I'm dynamically loading font to tinymce

//load font to iframe
fu开发者_JAVA百科nction loadFontFace(fontId)
{

    var iframe = jQ('#content_ifr').contents();
    var head = iframe[0].getElementsByTagName('head')[0];
    var linkElement = jQ(document.createElement('link'));
    linkElement.attr({href: 'http://fontsforweb.com/font/generatecss/?id=' + fontId, rel: 'stylesheet', type: 'text/css'});
    linkElement.prependTo(head);
}

Works everywhere except Firefox! Firebug in network tab shows that CSS and also TTF font files are loaded but I see no effect.

I'm not going to use webfont loader because it's ALMOST working.


In htaccess:

<FilesMatch "\.(eot|otf|woff|ttf)$">
 Header set Access-Control-Allow-Origin *
</FilesMatch>

Solved the problem


After HOURS of SEARCHING it looks like I'm getting there! I can see that TFF file in firebug's net tab has only 1KB. But it have 17KB. Solution will be here soon by myself I hope:)

Edit 30 mins later These are file details from net panel firebug:

my font(not working):
Content-Encoding gzip
Server Apache
Etag "225c018-4448-480e34c5df480"
Accept-Ranges bytes
Content-Type text/plain
Age 176
Date Wed, 19 Jan 2011 23:03:31 GMT
Last-Modified Wed, 03 Mar 2010 10:53:54 GMT
Expires Thu, 20 Jan 2011 23:03:31 GMT
Transfer-Encoding chunked

google font(working):
Content-Type font/ttf
Content-Encoding gzip
Expires Thu, 20 Jan 2011 16:45:42 GMT
Date Wed, 19 Jan 2011 16:45:42 GMT
Access-Control-Allow-Orig... *
Last-Modified Tue, 21 Sep 2010 17:51:21 GMT
Content-Length 20232
Content-Disposition attachment; filename="Cuprum.ttf"
X-Content-Type-Options nosniff
X-Frame-Options SAMEORIGIN
X-XSS-Protection 1; mode=block
Server GSE
Cache-Control public, max-age=86400
Age 23113
Connection keep-alive

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜