Forum Bugs

Web fonts not being loaded

nhofsted
Hi,

When including a google web font using
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP">

we noticed the constructed otf font didn't seem to contain all glyphs, as the log mentioned
prince: loading font: https://fonts.gstatic.com/s/notosansjp/v42/-F62fjtqLzI2JPCgQBnw7HFYwQgM.otf
prince: used font: Noto Sans JP, Regular
...
prince: page 1: warning: no font for Enclosed Alphanumeric Supplement character U+1F162, fallback to U+2BD1 ⯑

noto-reproduce.html‎
noto-reproduce.pdf‎

If however we include the relevant @font-face directly in a style element, the glyph is found
noto-reproduce2.html‎
noto-reproduce2.pdf‎

It isn't caused by the way the css is included using the link element, because another font included the same way works fine
noto-reproduce3.html‎
noto-reproduce3.pdf‎

It isn't caused by only including only part of the linked css, because including the entire response verbatim also works
noto-reproduce4.html‎
noto-reproduce4.pdf‎

Not sure what the difference is and/or what is causing it, but given that my browser is handling all 4 examples as expected, it looks like something is tripping prince up in the first test-case.

Tested with prince 14.2 and prince 20220808

Kind regards,

Nick Hofstede
  1. noto-reproduce.html0.2 kB
    reproduce case
  2. noto-reproduce.pdf4.5 kB
    output of noto-reproduce.html
  3. noto-reproduce2.html0.6 kB
    working case inline font-face
  4. noto-reproduce2.pdf9.8 kB
    output of noto-reproduce2.html
  5. noto-reproduce3.html0.2 kB
    working case other font
  6. noto-reproduce3.pdf6.0 kB
    output of noto-reproduce3.html
  7. noto-reproduce4.html111.3 kB
    working case verbatim inline
  8. noto-reproduce4.pdf9.8 kB
    output of noto-reproduce4.html
wezm
Thanks for the detailed issue report Nick. I've looked into this and the problem stems from Google Fonts using user agent sniffing to send different responses to different user agents (browsers). When requesting https://fonts.googleapis.com/css?family=Noto+Sans+JP as Prince, Google Fonts sends back:

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F62fjtqLzI2JPCgQBnw7HFYwQgM.otf) format('opentype');
}


Presumably because Noto Sans JP is a large font Google Fonts have subset it to reduce its size but they have omitted the character that you're testing with (🅢).

When requesting https://fonts.googleapis.com/css?family=Noto+Sans+JP as a browser like Firefox Google Fonts sends back a lot more CSS, with the font chunked up by unicode ranges: https://gist.github.com/wezm/54cd152e6f10685a4a0906ad6dae76d6

You can test this for yourself using curl:

curl --user-agent 'Prince/14.2 (www.princexml.com)' 'https://fonts.googleapis.com/css?family=Noto+Sans+JP'

curl --user-agent 'Mozilla/5.0 (X11; Linux x86_64; rv:104.0) Gecko/20100101 Firefox/64.0' 'https://fonts.googleapis.com/css?family=Noto+Sans+JP'


Some ways you might work-around Google's browser sniffing:
  1. Save the CSS that Google returns to your browser as use that local file instead of linking to https://fonts.googleapis.com. The drawback to this is that it relies on the font files that Google links to in that CSS always being available, which might not be the case. You could also save all the individual linked font files but there's a lot of them (119). In that case it would probably better to use the next option:
  2. Download the font using the "Download family" button on the Noto Sans JP Google fonts page and use it via a @font-face rule in your CSS.
  3. Tell Prince to use a different user agent with the --user-agent command line option, akin to the curl examples above. To Google Fonts this will make it look like Prince is say, Firefox. The drawback to this is that Google Fonts might generate CSS or fonts that Firefox supports but Prince does not. This might be able to be mitigated by specifying an older version in the user agent string. For example in the Firefox example shown above I used version 64.0 since this is the last version of Firefox that does not support variable fonts (which Prince also does not support yet).
nhofsted
Aah .. didn't expect Google to serve different things to different clients. It all makes sense now.
Sensible work-arounds.

Thank you,

Nick Hofstede