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:
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 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 rendering Chromium (Opera, Brave)
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.
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>
Unfortunately, the concept of synthesized styles is around for decades and most likely not going anywhere.
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.
@font-face
rules for syntax errors or wrong file paths in the src
property (the dev tools' network tab provides more insights)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.