What could be causing Chrome to display the font in "extra light" while Safari does not?

I've encountered a strange issue. When using the font "Be Vietnam Pro", I noticed that Chrome browsers are displaying it in the "Extra Light" variant, while all Safari browsers (including Safari on iOS) display it in the "normal" variant.

This discrepancy only occurs when hosting the font myself and not when using Google Fonts. Importing the Google Fonts files results in Chrome also using the "normal" font face. However, with my own CDN, Chrome defaults to the ExtraLight variant.

Is there a way to ensure that all browsers consistently use the ExtraLight variant?

The SCSS file for fonts is as follows:

/* be-vietnam-pro-100 - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  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'),
  url('https://xxxxx.cloudfront.net/fonts/vietnampro/be-vietnam-pro-v11-latin_latin-ext_vietnamese-100.ttf') format('truetype');
}
@font-face {
  font-display: swap;
  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'),
  url('https://xxxx.cloudfront.net/fonts/vietnampro/be-vietnam-pro-v11-latin_latin-ext_vietnamese-100italic.ttf') format('truetype');
}
 // more font-face declarations

In CSS, the font is applied like this:

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

Different font weights are then applied to heading elements like so:

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

Checking the Browser Console confirms that each browser loads the correct font.

Safari displays "Vietnam Pro" in "normal" weight:

https://i.sstatic.net/65IA4OVB.png

Chrome, however, shows the "Extra Light" variant:

https://i.sstatic.net/e8IGAKsv.png

Here's a visual representation of the difference:

https://i.sstatic.net/v89kCyZo.png

Update:

I discovered that I need to specify the font-weight everywhere it should not default to "normal". Unfortunately, this workaround only seems to work on Safari for MacOS, as Safari on iOS disregards the font-weight setting.

cssfonts

Answer №1

To put it simply: it's best not to rely on the default settings of browsers when looking for a suitable "weight/style-candidate."

In essence, you can make use of the concept of @font-face being style-agnostic – you have the ability to assign any weight or style to any other style or weight, regardless of how they are defined in the font file.

For example, you can map a font intended for "light/thin/ultrathin" to be used for regular/400 weight, and map 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>

This method allows you to avoid overriding specific rules for different elements.

In response to your comment:

I thought "bold" was placeholder for values like "600", "700", "800" or higher

...sort of. Browsers try to find the next most appropriate candidate, considering locally installed fonts that match the specified CSS font-family. If a bolder font definition is missing, browsers resort to using "faux-bold" (or faux-italic) synthetic font renderings – which lack standardization. It's best to steer clear of them as they can lead to significant rendering inconsistencies across different browser engines.

The key point here is to avoid these style ambiguities as they often result in unpredictable rendering outcomes.

You could also redefine default styles through selector-based rules.

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

However, this may increase the complexity of your CSS and make maintenance more challenging.

Avoid using star-selector based CSS rules (*) as they unnecessarily target every element (including child elements), potentially disrupting style inheritance. In such cases, you might end up needing numerous override rules or !important declarations to alter styles contextually.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to wrap a narrower column around a shorter column using Bootstrap 4

Incorporating Bootstrap 4 into my website design, I have created a simple two column layout. The right column houses a table of contents while the left column is filled with various markup elements such as paragraphs, lists, and images. My goal is to have ...

csstwitter-bootstrapbootstrap-4

Steps to add a backdrop to a DIV while maintaining a see-through background for the child image

I'm looking to create a header with a centered image and a background color that doesn't show through the image. Can anyone assist me with this? Here is the HTML code: <div id="header"> <a href="home.html"><img id="headerpic" s ...

cssimagehtmlbackground

Creating the necessary user interface using JSON data.Here are some steps to follow

I am struggling to create a dynamic UI based on JSON data. The issue I'm facing is with looping through the data to generate the required elements. My Goal: Achieving a Dynamic UI from Static Code .switch { position: relative; display: inline- ...

javascriptjqueryhtmlcss

What is preventing the items inside the <ul> element from displaying?

Struggling to grasp pagination, I can't figure out why the contents of "li" under the "ul" disappear while the "ul" container continues to display despite specifying in the JavaScript that only 6 should be visible on the page. The "ul" and "li" elemen ...

javascriptphpjqueryhtmlcss

Blurring isotopes within Google Chrome

While working with isotope in Google Chrome, I noticed that all items have the following CSS code: -webkit-transform: translate3d(properties); In Chrome, every even element [2,4,6,8,10,12,14...] appears blurred, whereas in Firefox everything looks normal ...

javascriptjquerycssgoogle-chromejquery-isotope

The BorderWidth property is set to 2px, however, it is not visible on the

Struggling with adding a border to a div in my app built with react and material-ui. Here is the snippet of code I've been working with: <div className={classes.search}> ... </div> search: { ... borderWidth: '2px', borde ...

cssmaterial-ui

Customize the font size in Bootstrap 5 using REM units

When it comes to setting font sizes for easier calculations in REM values, I currently use this approach: html { font-size: 62.5%; } body { font-size: 1.6rem; } /* 16px */ However, Bootstrap 5 uses the root value (which is typically set at 62.5%) to calc ...

csssassbootstrap-5

Adding a block between two other blocks on a mobile device using Bootstrap 4

I am trying to achieve a specific layout on both desktop and mobile devices. On desktop, I want the layout to be structured as follows: [1][2] [3][2] The requirement is for column 2 to be the same height as columns 1 and 3 on desktop screens. For the mo ...

htmlcssbootstrap-4flexbox

How can I achieve transparency for an element while it is nested within multiple parent

Is there a clever method to achieve transparency for an element that allows the background of its parent element to shine through and display the body background, for example? Consider this scenario: <body style="background: url(space.jpg)"> <di ...

csshtmlbackgroundtransparentmask

Utilizing :focus-visible pseudo-class on a custom control

A custom control, made of <div tabIndex="0">....</div>, raises the question: how can we ensure that it works with :focus-visible? Sometimes, creating a complex custom control using <div> and <span>, styled to resemble a na ...

htmlcssonfocus

What is the correct way to effectively target nested elements using CSS?

For a while now, I've been creating websites using HTML and CSS, carefully matching specific tags to my classes or IDs. However, I recently noticed a trend where people use selectors like #test > #blah to indicate that #blah is nested inside of #te ...

htmlcssnested

Converting HTML to PDF with CSS using Android Itext is only functional when applied directly to SVG elements

Hey there! I'm currently using the itext library (html2pdf) to convert my HTML into a PDF. Everything seems to be working fine, except for the SVG styles. Specifically, this is the part of my HTML code that's causing issues: <style> .my ...

androidcssitexthtml2pdf

Formula for full width skew in three adjacent divs using SkewX() function

.container { height: 500px; width: 500px; position: relative; background: black; } .box { transform: skewX(20deg); width: 33%; height: 100%; position: absolute; } .first-box { background: purple; left: 0; } .second-box { background ...

htmlcsscss-transformsskew

Styling forms with HTML and CSS: tips for proper positioning

My webpage contains two forms that are functioning correctly, but due to the order of the HTML code, the second form appears beneath the first. I am looking to display them side by side or in specific positions on the page. Is there a way for me to contr ...

htmlcss

Using Bootstrap 4 to create a header with an image and background on a card

Exploring the world of Bootstrap cards and trying to create a unique design with colored background and circular image in the header, something like this: https://i.sstatic.net/BZn3k.png However, after using some code examples: <!-- Background c ...

htmlcssbootstrap-4

Adding an image to an HTML <span> element using the class attribute "

I need help adding an image to my HTML code. For example, how can I specify which image should be displayed in place of the placeholders? Thank you for your assistance! ...

htmlcssimage

What is the best way to link to this list of options?

#episode-list { padding: 1em; margin: 1em auto; border-top: 5px solid #69c773; box-shadow: 0 2px 10px rgba(0,0,0,.8) } input { width: 100%; padding: .5em; font-size: 1.2em; border-radius: 3px; border: 1px solid #d9d9d9 } <div id="epis ...

javascripthtmlcss

Adjust the dimensions of a specific image in a lineup

I'm currently in the process of developing a website and I've encountered an issue with lists. Specifically, I'm trying to make one particular image within the list slightly larger as it appears smaller compared to the others. For visual re ...

htmlcss

The alignment of elements on the right and left sides is not functioning as intended

I've been facing an issue with the alignment of my floats on my brand new website www.unicmedia.nl/case/oranje. Surprisingly, they seem to work fine in IE this time, but Firefox and Chrome are completely out of sync. Despite trying numerous solutions ...

htmlcss

Consistent height constraints within table cells

Trying to create an HTML Email with fixed height blocks? Let's align those blocks! The attached demo shows disproportionate heights and misalignment issues. How can we resolve this problem? DEMO: http://jsfiddle.net/smu0gyx7/ ...

htmlcsshtml-email