External CSS font face only showing in Chrome (no IE and Firefox) -
i have font-face css:
<style> @font-face { font-family: 'museo_slab500'; src: url('/css/fonts/museo_slab_500-webfont.eot'); src: url('/css/fonts/museo_slab_500-webfont.eot?#iefix') format('embedded-opentype'), url('/css/fonts/museo_slab_500-webfont.woff') format('woff'), url('/css/fonts/museo_slab_500-webfont.ttf') format('truetype'), url('/css/fonts/museo_slab_500-webfont.svg#museo_slab500') format('svg'); font-weight: normal; font-style: normal; } </style> quite straightforward. problem is:
- if keep font-face definition alone in .css file (and font-family applied various headings, body in .css file) don't see font applied in browser. checked firebug, read, font downloaded not applied.
- if move font-face definition external .css file , put inline in html shows correctly.
if remove above code inline inside page , put in external .css , put instead of style tags:
<link type="text/css" rel="stylesheet" href="/adminskin/default/css/font-families.css" /> . hint on why happens? i'm going crazy.
ok ..... found answer madness.
it seems while google chrome has no problems @ all, both ie , firefox (didn't try safari or opera) can't cope absolute url pointing external .css font face definition. while works in browser (inside .css font-face definition)
<link rel="stylesheet" type="text/css" href="/skinadmin/default/css/font-families.min.css?v=2.0.0.0" /> this works in google chrome.
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/skinadmin/default/css/font-families.min.css?v=2.0.0.0" /> isn't madness? think is.
Comments
Post a Comment