The font weight appears too heavy on mobile devices

The condensed font I'm currently using, mango grotesque (variable), displays properly on desktop and in the responsive viewer. However, when I access the site on mobile devices, it seems that the font-weight appears too bold and not responsive. The issue persists on both Chrome ios and Safari ios, even after testing. My font CSS is provided below.

https://i.sstatic.net/oBuC6.jpg

I would like the font to behave similarly to how it appears when viewed through inspect element on desktop. I have attempted to resolve this by adjusting the font weight with media queries specifically for mobile devices, but this does not seem to be an optimal solution. Furthermore, as per my observations using the responsive viewer in the desktop inspect element, the font's responsiveness seems appropriate.

@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);
}

...
htmlcssfontsvariable-fonts

Answer №1

Automatic Detection of Variable Font Weight Ranges

While some browsers have the ability to identify a font file as a variable font and access default weight axis values automatically, others may not possess this capability.

iOS Safari is known to be less forgiving when it comes to vague @font-face rules.
By the way, all browsers on iOS utilize the Safari/WebKit engine – resulting in similar rendering issues across different browsers. Efforts are being made to address this issue (as of 2024).

1. Specify a Range for the font-weight Property Value

It's recommended to refer to the font documentation to determine the appropriate minimum and maximum values for font weights, as these values are not standardized. Some variable fonts may utilize a range between 100–1000 while others may use 300–800.

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

Example: Customizing Variable Font Weights

...

Missing font-weight property values can lead to "faux bolds" rendering, where the browser artificially emboldens a font – often resulting in undesirable outcomes.

You can also manage variable font-weights using the font-variation-settings property:

font-variation-settings: 'wght' 400;

2. Preserve Design Axes When Converting Fonts

Many converters still do not fully support variable fonts. Thus, converting a variable font from TTF/TrueType to WOFF2 format might result in a static font lacking the necessary axes data for smooth weight interpolation.

In the provided example, the cloudconvert ttf-to-woff2 converter was used.

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

The placement of a material-ui component at the beginning of the render method can impact the styling of the following components in the hierarchy

After creating some styled components, I noticed that they were not rendering correctly for me. However, when I transferred the code to a codesandbox environment (which had a material-ui button in the template), the components rendered perfectly fine. It w ...

cssreactjstabsthemesmaterial-ui

Is there a way to update the button's value upon clicking it?

I've hit a roadblock in my tic tac toe game project during class, and I've been struggling for the past two days to get the X's and O's to show up. The deadline for this assignment is tomorrow! Here are the task requirements: COMPSCI20 ...

javascripthtmlcss

Ways to call a DIV element in a PHP file from a different PHP file

I am facing an issue with referring to a specific <div> element from one .php page to another. The current code is redirecting me to the home page of the first page, instead of displaying the desired content. Can anyone provide guidance on how to ach ...

javascriptphphtml

Ajax continues to operate even if an error is detected

Hello fellow programmers! I'm currently facing an issue with form submission and validation using jQuery with 2 ajax events. The problem lies in the fact that even if the first ajax event (timeconflict.php) returns an error, the second ajax event (res ...

javascriptphpjqueryhtmlajax

What are alternative ways to add an HTML snippet to an existing file without relying on jQuery?

Is it possible to inject the entire content of an HTML file, including all tags, into a specific div using only JavaScript? Alternatively, would it be necessary to append each element individually and create a function for this purpose? ...

javascripthtml

Slider that allows range selection after midday

Currently facing a dilemma using the noUiSlider plugin. I have set up a time range picker starting from 6 am to 6 am the following day. Everything works smoothly until it reaches 23:59, but I need it to display 1:00, 2:00 instead of 25:00, 26:00 for the ...

javascriptjqueryhtmlnouislider

Locate the input field corresponding to a specific label using XPath

I am currently facing a challenge in locating an input box that is positioned adjacent to a label with the text 'Organisation Id'. Since the identification properties of the input box change after every build, I was considering searching for the ...

htmlxpath

Text "movement/vibration" in screen when adjusting dimensions in Firefox for Mac

I am currently involved in a project centered around showcasing a variety of fonts to users for them to experiment with, allowing them to adjust size and spacing using sliders. While the functionality works seamlessly on Chrome and Safari, a peculiar issu ...

cssfirefoxfont-face

CSS - enhancing web design with accessible selectors

Hey everyone, I'm really struggling to figure out what's going on with this code. It's a simple CSS issue but for some reason the browser (FF) is completely ignoring the last CSS selection code. Here's the HTML snippet: <div id="c ...

csscss-selectors

Adjusting picture dimensions with percentages in canvas and jquery

I'm currently working on a one-page project that involves a canvas where users can click to add or place images randomly. I have made progress with most of the functionality, but as a beginner in jquery and canvas, I am struggling to set a maximum siz ...

javascriptjqueryhtmlcsscanvas

The "Location..." header always points me back to the same destination

Hope you're all doing well. I've been having some trouble with using header("Location...") to redirect from one page to another on my website. For some reason, it keeps redirecting me back to the same page. I've gone through my code multiple ...

phphtml

Is there a way to align both a list icon and its contents in the center?

Can someone please assist me? I am attempting to replicate a website, but I am unsure how to center align an icon list and content. Currently, it appears like this; https://i.stack.imgur.com/6FZCr.png I would like it to look like this; https://i.stack.im ...

htmlcss

What are the best ways to expand image mapping?

It can be a bit challenging, but I'll do my best to explain. I have an image that is sized at 1920 by 1080 pixels and it adjusts based on the window size. The issue arises when the image mapping doesn't adjust accordingly. The coordinates remain ...

htmlcssimagemap

Removing a function when changing screen size, specifically for responsive menus

$(document).ready(function () { // retrieve the width of the screen var screenWidth = 0; $(window).resize(function () { screenWidth = $(document).width(); // if the document's width is less than 768 pixels ...

javascriptjquerycss

Implementing jQuery UI toggleClass method to seamlessly alternate between two distinct CSS classes

My goal is to toggle between two CSS classes on a selector click using Jquery UI .toggleClass(), but unfortunately, it's not producing the desired toggle effect. $(".toggle").click(function () { $(".archivePosts .columns").removeClass( "l ...

javascriptjqueryhtmlcssjquery-ui

Having Trouble with Font Awesome Icon Loading in Search Box

Currently, I am working on a website located at . However, I am facing an issue where the font awesome icon is not loading properly and is only displaying a square. I have thoroughly reviewed the CSS and cannot identify any conflicting elements. Any assis ...

htmlcsswordpressfontsicons

Unusual problem arises with the positioning of widgets in Blogspot due to the use of CSS `position

Recently, I implemented a new widget on my blog called , which functions as a menu using the "Add HTML/Script" feature. Below is the HTML/CSS code for the widget: .menukadn { line-height: 1; } a.limeka, a.limeka:visited, a.limeka:active { font-family: ...

cssgoogle-chromewidgetbloggercss-position

Concealing the URL Once Links are Accessed

I have a Movie / TV Shows Streaming website and recently I've noticed visitors from other similar sites are coming to my site and copying my links. Is there a way to hide the links in the address bar to make it more difficult for them to access my con ...

phpjavascripthtml

javascript issue with setting the id attribute on a select option

I can't seem to set the id attribute in my select element using JavaScript. When I inspect it, the id attribute isn't showing up... Here's the first method using JS: var selectorElem = document.getElementById('selector') var ...

javascripthtmlreactjsselect

Ensure that data is not cached after the page is refreshed at regular intervals of x seconds

In the process of developing a news app, I have implemented a feature where a div with the class .new_feed is refreshed every 10 seconds to fetch new updates. However, I encountered an issue where if a new feed appears in the .new_feed div and is not cli ...

javascriptjqueryhtmlajax