Bug 253967

Created attachment 465447 [details]
Here is screenshot with issue

Issue description: when synthesized works, we can see not correct result(text duplicates in 3 layers), this result create issue with for example text-shadows. 100% reproduce.

Here is case description:
Font "Alfa Slab One — Regular 400" - https://fonts.google.com/share?selection.family=Alfa+Slab+One

Font metadata:
family name    - Alfa Slab One
weight class   - Regular 400
width class    - Normal Monospaced
slope class    - Plain
style name     - Regular
full name      - "Alfa Slab One Regular"
postScript     - AlfaSlabOne-Regular
style group    - "Alfa Slab One" Regular
master name    - Regular

Font converted from ttf to woff, woff2 with fontLab8.


// css file with @font-face
@font-face {
  font-family: 'Alfa Slab One';
  src:
    url("path/alfa-slab-one.woff2") format("woff2"),
    url("path/alfa-slab-one.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}


// css file with font usage without defect
.component {
   font-family: 'Alfa Slab One';
   font-weight: 400;
}

// css file with font usage with defect
.component {
   font-family: 'Alfa Slab One';
   font-weight: 900; // here is working synthesized by Safari browser, because it can't find font-weight in @font-face
}

Additional info:
I tested more that 20 fonts from different services, i try to convert with different tools (fontLab8, TransType4, fontsquirrel.com) and try to use different formats(ttf, woff, woff2) - issue always reproduced. 

font-synthesis: none; - fixed this issue, but it's not normal that browser synthesis create such ui issues.

https://codepen.io/Ridi/pen/QWVrMQy - codepen, where you can check code and fork.
https://codepen.io/Ridi/full/QWVrMQy - this codepen in fullscreen mode, you can open from real device, browserstack or xcode emulator.