cssfonts

Why is Chrome rendering the Font in "extra light" and Safari not?

I have a weird issue. Using the Font "Be Vietnam Pro" I see that Chrome-browsers are rendering it in the "Extra Light" variant, while all Safari-Browsers (including the Safari on iOS) are rendering it in the "normal" variant.

This hehaviour happens only when I host the font by myself and not using Google Fonts. When just importing the google fonts files, even Chrome is using the "normal" font face. When using my own CDN, it instead uses the ExtraLight variant.

How can I harmonize it so that all browsers use the ExtraLight-variant?

My SCSS-File for fonts is:

/* be-vietnam-pro-100 - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 100;
  src: url('https://xxxx.cloudfront.net/fonts/vietnampro/be-vietnam-pro-v11-latin_latin-ext_vietnamese-100.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  url('https://xxxxx.cloudfront.net/fonts/vietnampro/be-vietnam-pro-v11-latin_latin-ext_vietnamese-100.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* be-vietnam-pro-100italic - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Be Vietnam Pro';
  font-style: italic;
  font-weight: 100;
  src: url('https://xxxx.cloudfront.net/fonts/vietnampro/be-vietnam-pro-v11-latin_latin-ext_vietnamese-100italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  url('https://xxxx.cloudfront.net/fonts/vietnampro/be-vietnam-pro-v11-latin_latin-ext_vietnamese-100italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
 // and so on

In CSS, i apply the font as follows:

body,
html,
* {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 17px;
}

And then I apply multiple weights on h-elements like so:

h1 {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.7rem;
  margin-top: 0.3rem;
  margin-bottom: 0.6rem;
}

According to the Browser-Console, all browsers do load the right Font.

Safari shows that it uses "Vietnam Pro" in "normal" weight:

enter image description here

Chrome shows the "Extra Light"-Variant:

enter image description here

And this is how the difference looks like:

enter image description here

Update:

I found out that I have to apply the font-weight everywhere where it should not be rendered as "normal". Sadly, this works only on Safari for MacOS. Safari on iOS is ignoring the font-weight setting.

Solution

  • In short: don't rely on browser defaults searching for a suitable "weight/style-candidate".

    In other words, you can take advantage of @font-face style-agnostic concept – you can map any weight or style to any style or weight, regardless of the intrinsic properties defined in the actual font file.

    Here's an example mapping the font-file supposed for "light/thin/ultrathin" to the regular/400 weight usage and mapping the ultra-bold/900 weight to default bold.

    /* latin light/100 mapped to regular/400*/
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/bevietnampro/v11/QdVNSTAyLFyeg_IDWvOJmVES_HRUNXgSYA.woff2) format('woff2');
}

/* latin  bold/700 mapped to intrinsic weight 900 */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/bevietnampro/v11/QdVMSTAyLFyeg_IDWvOJmVES_HS0Im81Rb0.woff2) format('woff2');
}


body {
  font-size: 5vmin;
  font-family: "Be Vietnam Pro";
}
    <h1>The Metamorphosis</h1>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a <strong>horrible vermin.</strong></p>

    As you can see, this approach circumvents a lot of element specific overriding rules.

    Referring to your comment:

    i thought "bold" is a placeholder for a value like "600", "700", "800" or above

    ... kind of. Browsers have some measures to find the next most suitable candidate – not to forget rendering locally installed fonts matching the defined CSS font-family names. In case there is no bolder font definition available you'll end up in so called "faux-bold" (or faux-italic) synthetic font-renderings – which are not standardized. Avoid them as they introduce significant rendering differences across browser engines.

    The bottom line: avoid these style ambiguities as they most certainly introduce unpredictable rendering results.

    In fact you could as well remap default styles via selector based rules.

    h1,
h2,
h3,
h4,
strong{
    font-weight: 100;
}

    But it also bloats your CSS and can make it harder to maintain.

    You should also avoid * star-selector based CSS rules as they introduce unnecessary specificity as you specify certain font properties to each and every element (including all child elements) – so you bomb any style inheritance (kind of a paradigm war - but frankly I think CSS cascade concept as a lot of advantages) . Quite likely you may need way too many overriding rules or !important keywords to change styles contextually.