src: url() stripped from @font-face during parsing

[Ryan Fox]

I have a CSS file with a @font-face rule. The stylesheet specifies a url for the source of the font, via google web fonts.

@font-face{ font-family: "myFont"; src: url("https://themes.googleusercontent.com/static/fonts/montserrat/v3/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff"); }

After parsing, the url, parentheses, and quotes are stripped out. I get

@font-face{ font-family: "myFont"; src: https://themes.googleusercontent.com/static/fonts/montserrat/v3/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff; }

which is ignored by the browser. I see that src: url() works in other contexts, e.g.

@import url("some_other_stylesheet.css");

so it is only inside a @font-face that the parentheses and quotes get stripped out. I have confirmed that the output CSS works correctly in a browser if I add the ()'s and ""'s back in.

I don't see any tickets for this issue. Is this a known bug, and if so, are there any plans for a release with a fix? I have a workaround since @import works, but it isn't the most elegant.

Thanks for any help!

[Alan Krueger]

Can you attach a test case that demonstrates this?

[Ryan Fox]

Well, the example I posted above, for one. Or do you mean the java code?

[Alan Krueger]

Yes, I meant a simple Java test case that exhibits the problem you described. This makes it much easier to reproduce, and consequently much easier to triage and fix if necessary. Also, that test, or something derived from it, can be added to the test suite to watch for regressions.

[Ryan Fox]

Sure, here's what I'm getting bad results from:

example.css:

@font-face{
    font-family: "myFont";
    src: url(https://themes.googleusercontent.com/static/fonts/montserrat/v3/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff);
}

In my java class:

File cssFile = new File("example.css");
InputStream stream = new FileInputStream(cssFile);
InputSource source = new InputSource(new InputStreamReader(stream));

CSSOMParser parser = new CSSOMParser();
CSSStyleSheet styleSheet = parser.parseStyleSheet(source, null, null);
CSSRuleList ruleList = styleSheet.getCssRules();
System.out.println(ruleList.item(0));

Stdout:

@font-face{
   font-family: myFont;
   src: https://themes.googleusercontent.com/static/fonts/montserrat/v3/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff;
}

[Alan Krueger]

Which CSS spec were you expecting to parse against? @font-face was apparently added in the initial CSS2 spec, removed in the CSS2.1 update, and added back in for CSS3.

The default when you don't specify which CSS parser to use is the SACParserCSS21 parser. If you use the SACParserCSS2 or SACParserCSS3 parsers, it will work.

System.setProperty("org.w3c.css.sac.parser", SACParserCSS3.class.getName());

Outputs:

@font-face {font-family: "myFont"; src: url(https://themes.googleusercontent.com/static/fonts/montserrat/v3/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff)}

[Ryan Fox]

Using SACParserCSS2 did the trick, thanks! I don't see SACParserCSS3 anywhere, am I looking in the wrong places, or is it not included in 0.9.7? If so, are there plans for a release with SACParserCSS3?

Thanks for the help.

[Alan Krueger]

CSS3 support has been added recently. I don't recall off the top of my head whether 0.9.8 contained support for it, but it's currently on the trunk and should be in the next release.