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.