Last modified: 2012-10-01 22:37:07 UTC
We encourage skin authors to use syntax like: 'styles' => array( 'skinname/screen.css' => array( 'media' => 'screen' ), ), Presumably because it encourages strict media typing (which is kinda nice). The problem is that @font-face constructions in screen.css are not extracted, resulting in them being wrapped in @media along with all the other rules. Unfortunately, having @font-face inside @media doesn't work. AFAICT no warning is given and it took me several minutes to deduce the error, extract the tag into a separate file, and ask for the new file not to be @media wrapped. Not sure what the best resolution here is but the status quo seems to be improvable on.
Rephrasing bug, this doesn't appear to be skin related. Haven't been able to confirm this yet. Can you see if this is also the case on 1.18 or 1.19? Or only in 1.20?
Bumping to future release.
As far as I know font-face is allowed in @media, it is likely a browser bug. Either way, I'll mark this as invalid because this is to be expected with the given snippet. If a stylesheet is marked as 'media' =>'screen' it will be wrapped in @media. If that is a problem (whatever the reason may be), don't do that. There is various alternatives: * Put the font-face declaration in a separate css file and reference that file (without 'media') in the 'styles' array, that way it'll be put before the rest without @media * Or if you want it all in one file (there is no reason for that as they are combined together anway), you could manually wrap it in @media (only 2 lines of code), remove 'media' in 'styles', and put the font-face before it.
In addition to the alternative methods, I did find a bug report in the bug tracker for Firefox: * https://bugzilla.mozilla.org/show_bug.cgi?id=567573 * https://bugzilla.mozilla.org/show_bug.cgi?id=511909 Which claims to have been fixed in recent versions of Firefox.
