UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36

Example URL:
https://store.google.com/us/product/google_pixelbook_specs?hl=en-US

Steps to reproduce the problem:
1. edit ~/.config/fontconfig/fonts.conf and enable full hinting:

<match target="font">
  <edit name="antialias" mode="assign"><bool>true</bool></edit>
  <edit name="autohint" mode="assign"><bool>false</bool></edit>
  <edit name="hinting" mode="assign"><bool>true</bool></edit>
  <edit name="hintstyle" mode="assign"><const>hintfull</const></edit>
  <edit name="lcdfilter" mode="assign"><const>lcddefault</const></edit>
  <edit name="rgba" mode="assign"><const>rgb</const></edit>
</match>

2. edit ~/.config/fontconfig/fonts.conf and override hintstyle just for Google's "Product Sans" webfont various ways (covering all my bases):

  <match target="font">
    <test name="family">
      <string>@font-face:Product Sans</string>
    </test>
    <edit name="hintstyle" mode="assign"><const>hintslight</const></edit>
  </match>
  <match target="pattern">
    <test name="family">
      <string>@font-face:Product Sans</string>
    </test>
    <edit name="hintstyle" mode="assign"><const>hintslight</const></edit>
  </match>
  <match target="font">
    <test name="family"><string>Product Sans</string></test>
    <edit name="hintstyle" mode="assign"><const>hintslight</const></edit>
  </match>
  <match target="font">
    <test name="family"><string>@font-face:Product Sans</string></test>
    <edit name="hintstyle" mode="assign"><const>hintslight</const></edit>
  </match>

3. Full-restart Chrome.

4. Visit a page that loads "Product Sans" as a webfont, like the pixelbook product page above, with a Father's Day promotional banner at the top showcasing the bug.

What is the expected behavior?
The fontconfig override should render it using hintstyle=hintslight.

You can see the expected rendering by editing ~/.config/fontconfig/fonts.conf and adjusting the catchall hintstyle to hintslight and restarting Chrome.

What went wrong?
The per-family override for hintstyle is ignored and it is rendered as hintstyle=hintfull.

If you download the Product Sans truetype fonts out of band, install them into ~/.fonts, run "fc-cache -v", and restart Chrome the fontconfig override does work as expected.  To me this implies that fontconfig may not be fully consulted for webfonts.

As my example is a time-sensitive promotion, I've extracted a reproduction snippet of html+css and attached it here. Also I've included screenshots from Chrome 67 and Firefox 60 for the various renderings.

Important reproduction detail: If the html file is served over file:// it behaves differently, so please reproduce using http:// or https://

There's a hosted snippet available here: https://richardboyer.net/fontbug.html

Does it occur on multiple sites: Yes

Is it a problem with a plugin? N/A 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 67.0.3396.62  Channel: stable
OS Version: ubuntu 16.04.4
Flash Version: 

If I repeat the test above using Firefox 60 it does the correct thing and does not treat webfonts differently for the purposes of fontconfig consultation.
 

Deleted: fontbug.html 3.8 KB

fontbug.html 3.8 KB View Download

Deleted: chrome-full-local.png 20.7 KB

	chrome-full-local.png 20.7 KB View Download

Deleted: chrome-full-web.png 17.9 KB

	chrome-full-web.png 17.9 KB View Download

Deleted: chrome-slight-web.png 21.6 KB

	chrome-slight-web.png 21.6 KB View Download

Deleted: firefox-full-web.png 22.2 KB

	firefox-full-web.png 22.2 KB View Download

Deleted: firefox-slight-web.png 23.4 KB

	firefox-slight-web.png 23.4 KB View Download