cssgoogle-chromefontsmicrosoft-edge

Different behaviour Edge and Chrome with font-weight

After a new update of Edge today I notice that a custom font that is already bold, in combination with font-weight:bold becomes even bolder in Edge, which was not the case before and is not happening in Chrome now. So my question is: which browser has the correct interpretation?

@font-face {
    font-family: 'caros_eb';
    src: url('https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLCz7V15vFP-KUEg.woff2');
}

.title_normal {
    font-family:caros_eb;
    font-size:18px;
}

.title_bold {
    font-family:caros_eb;
    font-size:18px;
    font-weight:bold;
}
<p class="title_normal">This is normal text</p>
<p class="title_bold">This is bold text</p>

And the result I get:

enter image description here

Solution

  • Correct rendering is relative ...

    The Edge screenshot shows the more expected "correct" result – the Chrome rendering is in fact more of a surprise:

    Since your @font-face rule loads a bold font but lacks a font-weight property browsers will map this font to font-weight "normal" 400.

    When you apply font-weight:bold to a text the browser will render a synthesized boldened weight - commonly referred to a "faux bold".

    The problem with "faux" styles

    The commonly used terms "faux bold" (a regular/normal font is artificially made bold – sometimes achieved by kind of applying a stroke) or "faux italic" (an "upright" font is artificially slanted to mimic a true italic) cause highly unpredictable renderings in different browsers.

    faux chromium
    faux rendering Chromium (Opera, Brave)

    faux firefox faux rendering Firefox

    As you can see Firefox uses a different emboldening effect/filter. If you test it on a webkit/safari browser you get other results as well.

    @font-face {
  font-family: 'OP Sans';
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format('woff2');
}

@font-face {
  font-family: 'OpG';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format('woff2');
}

@font-face {
  font-family: 'OpG';
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkWVAewA.woff2) format('woff2');
}

@font-face {
  font-family: 'OpG';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVI.woff2) format('woff2');
}

@font-face {
  font-family: 'OpG';
  font-style: italic;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkyFjWVAewA.woff2) format('woff2');
}


body{
  font-size:4em;
  font-family: 'OP Sans'
}

h3{
  font-family:serif;
  margin:0;
  font-size:16px;
}

p{
  margin:0
}

.genuine{
  font-family: 'OPG'
}
    <h3>Faux</h3>
<p class="faux">
  <strong>bold</strong>
  <em>italic</em>
  <strong><em>bold italic</em></strong>
</p>

<h3>True</h3>
<p class="genuine">
  <strong>bold</strong>
  <em>italic</em>
  <strong><em>bold italic</em></strong>
</p>

    This is unfortunately still the standard browser behavior – but different rendering engines will produce significantly different - some result in thicker or thinner "fake bold" renderings (Firefox, Webkit/Safari will also increase boldness).

    BTW Edge is also based on Chromium/blink engine (just like Google Chrome) so rendering differences should usually be negligible – albeit Edge is highly optimized for the Windows eco system.

    Apparently, many Chromium/blink browsers will skip synthesis if the loaded font has an intrinsic weight >=700. I could also reproduce this behavior in Opera and Brave. While it makes sense from a design perspective (to avoid too thick text) it is a rather unusual behavior as @font-face rules are mostly style agnostic. For instance the Browser won't auto-detect weights or styles from the loaded font file.

    bold on bold chroeium

    enter image description here

    enter image description here

    To ensure a consistent rendering

    Make sure all font-families have explicit bold and regular (and other required weights respectively) fonts loaded

    @font-face {
  font-family: 'caros_eb';
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format('woff2');
}

@font-face {
  font-family: 'caros_eb';
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVI.woff2) format('woff2');
}

.title_normal {
  font-family: caros_eb;
  font-size: 18px;
}

.title_bold {
  font-family: caros_eb;
  font-size: 18px;
  font-weight: bold;
}
    <p class="title_normal">This is normal text</p>
<p class="title_bold">This is bold text</p>

    Otherwise, you may also disable synthesized boldening via font-synthesis:none

    @font-face {
  font-family: 'caros_eb';
  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format('woff2');
}


body{
font-size:10vw;
}

.title_normal {
  font-family: caros_eb;
  font-weight:400;
}

.title_bold {
  font-family: caros_eb;
  font-weight: bold;

}

.no-synthesize{
  /* prevent fake bolds*/
  font-synthesis:none
}
    <p class="title_normal">This is normal text</p>
<p class="title_bold">This is bold text (faux bold)</p>
<p class="title_bold no-synthesize ">This is bold text (overridden)</p>

    Recommendations

    Unfortunately, the concept of synthesized styles is around for decades and most likely not going anywhere.

    Always avoid faux styles

    The main problem here is the deceptive nature of "faux" styles – maybe your font supports bold weights but you're wondering why the cross-browser renderings are significantly different.

    The idea of artificially emboldening or italicising fonts goes back long before the concept of proper web font loading was available. These days, it causes more problems than it solves.