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:

Chrome shows the “Extra Light”-Variant:

And this is how the difference looks like: