Page MenuHomePhabricator

Using @font-face should work from a file module stylesheet with custom 'media' attribute
Closed, InvalidPublic

Description

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.


Version: 1.19
Severity: normal

Details

Reference
bz34459

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 12:19 AM
bzimport set Reference to bz34459.
bzimport added a subscriber: Unknown Object (MLST).

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?

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:

Which claims to have been fixed in recent versions of Firefox.