Colon is not accepted as a character of FontFace family parameter

RESOLVED INVALID

Status

()

Core
CSS Parsing and Computation
RESOLVED INVALID
3 years ago
2 years ago

People

(Reporter: Steven Saviano, Unassigned)

Tracking

41 Branch
Points:
---

Firefox Tracking Flags

(platform-rel +)

Details

(Whiteboard: [platform-rel-Google][platform-rel-GoogleDocs])

(Reporter)

Description

3 years ago
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.46 Safari/537.36

Steps to reproduce:

1) Create a FontFace such as
var f = new FontFace('Crafty Girls::Menu', 'url(//fonts.gstatic.com/s/craftygirls/v5/0Sv8UWFFdhQmesHL32H8o7PxcbeTBBcd4ZnkCn4wXzA.woff)', {'weight': 400, style:'normal'});

2) Check the status property of the FontFace instance

Here is an example jsfiddle that shows with "::" and with "--"
https://jsfiddle.net/ytc1aj7g/4/

This affects Google Fonts as the menu font served generally is the family name plus "::Menu".


Actual results:

The status property is in the 'error' state.


Expected results:

The status property is in the 'unloaded' state.

Note: font-family via CSS  supports the '::Menu' as part of the family string.

Updated

3 years ago
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
The spec says:

  Parse the family argument, and the members of the descriptors argument, according to the
  grammars of the corresponding descriptors of the CSS @font-face rule.

It's not quite clear what the grammar for the latter does with "::" at toplevel.

> Note: font-family via CSS  supports the '::Menu' as part of the family string.

What does your CSS example look like?  Is it:

  font-family: Crafty Girls::Menu;

or

  font-family: 'Crafty Girls::Menu';

?
Flags: needinfo?(ssaviano)
Ugly as it is, it may be that the correct way to do this is to pass a string with quotes in it, i.e.:

var f = new FontFace('"Crafty Girls::Menu"', 'url(//fonts.gstatic.com/...

(Or maybe the spec should be different here?)

Comment 3

3 years ago
I went for the simplest route in the spec, just leaning on the property parsing directly.  So yeah, given that you *must* have either used quotes or escapes in CSS, you have to double-quote or escape it in FontFace.

I'm willing to change it to just accept the string directly, if desired.
(Reporter)

Comment 4

3 years ago
Sorry for the delay - was OOO.

Re CSS: It would look like
  font-family: 'Crafty Girls::Menu';

Interesting on the quoted string.
Flags: needinfo?(ssaviano)
platform-rel: --- → +
Whiteboard: [platform-rel-Google][platform-rel-GoogleDocs]
Do we need to change something to match the (presumably now landed) spec change Tab references in comment 3?
Flags: needinfo?(dbaron)
Looking at https://drafts.csswg.org/css-font-loading/#font-face-constructor , I don't think any such change was made.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 years ago
Flags: needinfo?(dbaron)
Resolution: --- → INVALID
Could you explain why you marked this as related to Google Docs?
Flags: needinfo?(dchinniah)
(In reply to David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) from comment #7)
> Could you explain why you marked this as related to Google Docs?

It was highlighted by their team as a ask (hence ssaviano is cc'ed on the bug). I will shortly share a document with yourself with more background.
Flags: needinfo?(dchinniah)
You need to log in before you can comment on or make changes to this bug.