Bug 253967 – Incorrect font scaling when using system weight synthesis

• Component: Text
• Status: RESOLVED DUPLICATE

[Ridvanovskyy V.]

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.

[Ridvanovskyy V.]

Created attachment 465448 [details]
Alfa Slab One metadata

Alfa Slab One metadata

[Radar WebKit Bug Importer]

<rdar://problem/107057807>

[Ridvanovskyy V.]

The issue is still present. Are there any updates, information about the issue?

[Myles C. Maxfield]

Hrm. At a glance, this looks like synthetic bold. But let me check deeper today.

[Myles C. Maxfield]

Oh, you already said "font-synthesis: none; - fixed this issue"

So, yes, this is due to synthetic bold.

[Myles C. Maxfield]

*** This bug has been marked as a duplicate of bug 215559 ***

[Ridvanovskyy V.]

Yes, I agree that this is a duplicate, but I would suggest using the description from this task as a basis or even making it the main task.

Why? It has a broader description here, with examples of fonts, link to font source, css, a;; font data description, playgrounds and screenshots. Otherwise, all of that will be lost.

[Ridvanovskyy V.]

(In reply to Myles C. Maxfield from comment #6)
> 
> *** This bug has been marked as a duplicate of bug 215559 ***

Sorry for message duplication, i don't do reply in previous.

Yes, I agree that this is a duplicate, but I would suggest using the description from this task as a basis or even making it the main task.

Why? It has a broader description here, with examples of fonts, link to font source, css, font data description, playgrounds and screenshots. Otherwise, all of that will be lost.