The @font-face src: ... format() attribute isn't quoted, resulting in a weird cross-browser bug

[johncomposed]

A friend and I spent a good portion of the day puzzling over why a font declared via @font-face was not working on chrome or firefox (but worked fine on safari) and we just figured it out so I thought I'd make a note of it here.

When using the @font-face rule in stylus you can write out src url(/path/to/font.extension) without quotes, which turns into src: url("/path/to/font.extension");. So far so good. But when you manually specify the format of a font face like src url(path.ext) format(format), it turns into src: url("path.ext") format(format); Notice how src gets quoted but format doesn't.

Here's a screenshot of this from the try stylus page:

Now here's where that inconsistency can really bite someone. format(woff) isn't valid css in firefox or chrome.... but apparently is in safari(!). And moreover, in firefox and chrome, it fails totally silently. No errors, nothing. It just doesn't try to get that font. Cue frustrated designers trying to figure out why their font only works in safari because secretly they have to write src url(path.woff) format("woff") (or quote both, or not use format() at all) to make it work. It's not the biggest bug in the world, but it definitely had us questioning our sanity, life choices, the web, the 21st century in general, etc for a bit there.

Anyway, just thought I'd bring that to the community's attention!

[badoubadou]

Damned ! I waisted my day on this ! Is it ok not to mention format ? Thanks !!!!

[robinmetral]

Also if you want to specify several formats (say woff and woff2), you can NOT omit the comma.

So so far my stylus @font-face rules look like this:

@font-face
    font-family MyFont
    font-weight bold 
    font-style normal
    src url(fonts/myfont.woff) format("woff"),
        url(fonts/myfont.woff2) format("woff2")

It would be great to be able to omit quotes in format(), and the comma between formats!