font weight too bold on mobile

Question

The condensed font I'm using (mango grotesque, variable) appears fine on desktop and the responsive viewer but when I visit the site on mobile it appears that the font-weight is too bold (not responsive?).

I want it to behave the way it does when I view it through the inspect element. I've tested this on Chrome ios and Safari ios and the issue persists on both. My font CSS is attached below.

@font-face {
  font-family: "Hubot Sans";
  src: url("../fonts/HubotSans[slnt\,wdth\,wght].woff2") format("woff2");
}



@font-face {
  font-family: "Mango-Grotesque";
  src: url('../fonts/Mango Grotesque-VF.woff2') format('woff2');

}

body {
  font-family: "Hubot Sans", Arial, Helvetica, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin-top: 0;
}

p,
ul,
code,
ol {
  max-width: 40rem;
  line-height: 1.5;
  margin-bottom: var(--sp-3xl);
}

.large-title {
  font-size: 6.25rem;
}

.title-1 {
  font-size: 4.9375rem;
  font-weight: 600;
}

.title-2 {
  font-size: 3.8125rem;
  margin-bottom: var(--sp-lg);
  font-weight: 600;
}

.title-3 {
  font-size: 2.875rem;
  font-weight: 600;
}

.title-4 {
  font-size: 2.125rem;
  font-weight: 600;
}

.headline {
  font-size: 1.175rem;
  margin-bottom: var(--sp-sm);
  font-weight: 500;
}

p {
  line-height: 140%;
  max-width: 32rem;
}

p:not(p:last-of-type) {
  margin-bottom: var(--sp-sm);
}

p.label.orange {
  color: var(--primary-500);
}

small {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  line-height: 1.0625rem;
  margin-bottom: var(--sp-base);
}

.hubot-sans {
  font-family: "Hubot Sans", Arial, Helvetica, sans-serif;
}

.hubot-sans-condensed {
  font-family: "Hubot Sans", Arial, Helvetica, sans-serif;
  font-stretch: condensed;
}

.mango-grotesque {
  font-family: "Mango-Grotesque", Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  text-rendering: optimizeLegibility;
}

em {
  font-style: italic;
  font-weight: bold;
}

.text-lg {
  font-size: 1.125rem;
}

.text-base {
  font-size: 1rem;
}

.text-sm {
  font-size: 0.9rem;
}

code {
  display: block;
  padding: var(--sp-sm);
  background-color: var(--zinc-900);
  border: 1px solid var(--zinc-700);
  margin-bottom: var(--sp-xl);
}

.large-title,
.title-1,
.title-2,
.title-3,
.title-4 {
  font-family: "Mango-Grotesque", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  margin-bottom: var(--sp-xs);
  line-height: 90%;
  text-rendering: optimizeLegibility;
}

.headline,
label,
.subtitle,
.caption-text {
  font-family: "Hubot Sans", Arial, Helvetica, sans-serif;
}

.subtitle {
  font-size: 1.125rem;
  margin-bottom: var(--sp-xs);
  font-weight: 600;
}

.callout {
  font-family: "Hubot Sans", Arial, Helvetica, sans-serif;
  font-stretch: condensed;
  font-size: 1.125rem;
  line-height: 0.9375rem;
  margin-bottom: var(--sp-sm);
  font-weight: 600;
  letter-spacing: 0.0125rem;
  text-transform: uppercase;
}

strong {
  font-weight: 600;
}

.strikethrough {
  text-decoration: line-through;
}

.caption-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.text-orange {
  color: var(--primary-500);
}

I've tried using media queries to change the font weight at mobile levels but this does not seem like an ideal solution. I'm also not convinced on that solution as viewing the font through the desktop inspect element responsive viewer the font seems to respond properly.

Answer 1

Variable font weight ranges may not be auto-detected

Some browsers can actually automatically recognise a font file as a variable font and also read the default weight axis values - but others can't.

iOS safari tends to be less "forgiving" with regards to less specific @font-face rules.
BTW. every browser on iOS takes the safari/webkit engine – so you'll encounter the exact same rendering issues. However there are some "efforts" (... running lawsuits) trying to change this (state 2024).

1. Add a font-weight property value specifying a range

Ideally you should check the font documentation to find the correct min and max values – these are not standardized. Some VF fonts may use a range between 100–1000 others 300–800.

@font-face {
  font-family: "Mango Grotesque";
  font-weight: 100 900;
  src: url('../fonts/Mango Grotesque-VF.woff2') format('woff2');
}

Example: variable font weights

inputWeight.addEventListener('input', e => {
  let val = +e.currentTarget.value
  prev.style.fontWeight = val

})

@font-face {
  font-family: "Mango Grotesque";
  font-weight: 100 900;
  src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
  font-style: normal;
  font-display: swap;
}

.p {
  font-family: "Mango Grotesque";
  font-size: 5em;
  font-weight: 400;
  margin: 0;
}

.wgh100 {
  font-weight: 100;
}

.wgh200 {
  font-weight: 200;
}

.wgh300 {
  font-weight: 300;
}

.wgh400 {
  font-weight: 400;
}

.wgh500 {
  font-weight: 500;
}

.wgh600 {
  font-weight: 600;
}

.wgh700 {
  font-weight: 700;
}

.wgh800 {
  font-weight: 800;
}

.wgh900 {
  font-weight: 900;
}

<p><label>Dynamic font weight</label><input id="inputWeight" type="range" min="100" max="900" value="400"></p>
<p id="prev" class="p">DAYSIDE</p>

<p class="p wgh100">DAYSIDE</p>
<p class="p wgh200">DAYSIDE</p>
<p class="p wgh300">DAYSIDE</p>
<p class="p wgh400">DAYSIDE</p>
<p class="p wgh500">DAYSIDE</p>
<p class="p wgh600">DAYSIDE</p>
<p class="p wgh700">DAYSIDE</p>
<p class="p wgh800">DAYSIDE</p>
<p class="p wgh900">DAYSIDE</p>

Missing font-weight property values may also introduce "faux bolds" rendering.

"faux bolds" means the browser tries to bolden a font synthetically – the result is ... yikes!

You can also control variable font-weights via font-variation-settings property like so:

font-variation-settings: 'wght' 400;

2. Make sure variable design axes are not stripped during conversion

Unfortunately a lot of great converters still (2024) don't support variable fonts perfectly. So when converting a variable font ttf/truetype file to woff2 you might get a "static"/one-weight font missing the axes data for seamless weight interpolation.

For the above example I used the cloudconvert ttf-to-woff2 converter