Some computers may experience issues with the font weight of Imported Google Fonts

Recently, I had an issue with the fonts on my website not displaying at a font weight lighter than 600. You can read about it in my previous question Open Sans font weight cannot go lighter

However, I was able to resolve the problem by importing the Google font along with the desired font-weight, and now my website showcases thinner fonts with a font-weight of 300.

The puzzling part is that when I deployed the app to a live server, the font weights that I set up don't work properly when viewed on my own computer. Some computers display the correct thinner font weights, while others have the same issue.

I'm uncertain about what's causing this inconsistency. My assumption is that the fonts installed on my local machine might be influencing this issue. However, when I test the site on localhost, the font-weights are shown correctly without any problem.

Answer ā„–1

Most modern web browsers do not fully support the numerical values for font-weight, and even Google Fonts may not have all the weight options you desire. If you are experiencing font display issues, try deleting and then reinstalling the font on your local machine.

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

Is there a way to dynamically change the height in jQuery/JavaScript?

I am encountering an issue with my embed code where the height changes randomly after a few seconds, depending on certain parameters. Here is an example of the code I am using: $( <embed></embed>) .attr("src", "http://www.bbs.com") ...

Adjustable icon dimensions in Material-UI

My current setup involves utilizing material-UI icons <ArrowRightAlt/> I have been able to manipulate the size of the icon using the fontSize attribute <ArrowRightAlt fontSize="large" /> However, I am interested in having the size ...

Damaged background in Bootstrap interface modal

https://i.stack.imgur.com/nTAnK.png Is there anyone who can assist me in identifying the issue causing the broken or irregular backdrop in the background of overlays or pop-ups? $scope.Modal = $modal.open({ animation: true, ...

How can I retrieve a large API response in Nuxt without causing the page to render slowly?

I have a dynamic page in my Nuxt project where I utilize Fetch and Axios to retrieve all the necessary data, such as photos and text. The issue I'm facing is that the API response is quite long, with more than 3800 lines of code. When loading the pa ...

What is causing the breakdown of bordered tables in Bootstrap when the border-separate property is set to collapse?

I am experiencing an issue with my bordered table that is using the Bootstrap classes table table-bordered. When I add border-collapse: separate, the borders are correctly separated, but the top and bottom borders seem to disappear due to zero width. I am ...

Vue.js, Vuetify, and v-data-table: The item passed from v-slot appears to be a duplicate rather than a reference for the attribute

I am in the process of creating a data table using Vuetify to display a list of records, each with a set of downloadable files. Additionally, I am implementing a button for each row in the table that should, upon clicking, trigger a modal window displaying ...

What is the correct way to handle Vue props that include a dash in their name?

I am currently working on a project using Vue. Following the guidelines of eslint, I am restricted from naming props in camel case. If I try to do so, it triggers a warning saying Attribute ':clientId' must be hyphenated. eslint vue/attribute-hyp ...

Issues with retrieving the subsequent anchor element using Jquery Slider

(Apologies for the lengthy post. I like to provide detailed explanations.) Just starting out with Jquery, trying my hand at creating a custom image slider from scratch. Got the slider working with fade effects using this code: Javascript: $(document).re ...

Tips for keeping a consistently viewable and editable iteration of your HTML form

How can I efficiently maintain both viewable and editable versions of the same HTML form? I am working on an application that has numerous custom data-entry screens with a high number of fields, and managing separate layouts for viewable and editable form ...

The dropdown menu vanishes from sight as soon as the cursor moves away from a link

Recently, I encountered an issue while trying to create a dropdown menu using Jquery. The problem arose when attempting to select the second link, as the entire menu would disappear. Additionally, is there a way to ensure that only one dropdown menu is vis ...

Trouble Aligning HTML in OUTLOOK's Center Position

Today, I've invested hours into solving an issue with my HTML email layout. It seems to display perfectly on most email clients except Outlook ā€“ the centering of the layout in the preview just won't cooperate. I've attempted using the < ...

jQuery document.ready not working when an HTML is loaded within a div of another document

When I load an html page containing jquery and ajax calls in a div within another document, the $document.ready function of the loaded html page does not execute. Here is the code snippet I am using to load the html page into the div: $('#LeaveReq&a ...

Exploring the Play Framework: Building basic HTML hyperlinks

I've been working on a website consisting of multiple HTML files and a CSS file, but now I'm looking to transition to the Play! Scala Framework. However, Iā€™m facing difficulties in understanding how to connect one HTML page to another. Current ...

Overflow-x does not function properly when used with absolutely positioned divs

I am currently working on a slideshow project and have encountered an issue. The divs in my project are positioned absolutely with left: 100%. While this works perfectly on full screen, the absolute positioning breaks when I resize the screen due to the ov ...

Integrate HTML parsing both inside and outside of an iframe using BeautifulSoup

My current project involves web scraping a real estate listing platform using Selenium, BS4, and Python. The script works by fetching the links to each listing page before proceeding to parse the HTML content of those pages. One key component is a Chrome E ...

Is there a reason why using margin:auto doesn't work for vertically centering items?

I'm having trouble understanding how margin auto functions. In the scenario I'm dealing with, I have a parent div and a child div nested within it, both with specified widths and heights. I attempted to use margin auto in order to center the inne ...

Combining two computed properties to create a new one

Apologies for the novice question, but I'm looking to merge these two computed properties without repeating the code. Thank you in advance! computed: { mergeProperties() { const { end_of_availability } = this.fullData; ...

Toggle Checkbox Group for Both Multiple and Single Selection Options

Need help with a function to enable only one checkbox for single selection or multiple checkboxes for multiple selection. Use MultipleCheckbox(0) for single selection or MultipleCheckbox(1) for multiple selection. function MultipleCheckbox(elem){ i ...

What is the best way to ensure that the size and maximum length of a text input box are properly aligned?

Is there a way to ensure that the size and maxlength attributes of a text input box align correctly? It can be frustrating when these attributes don't match up due to font differences. Example Input: <input type="text" size="4" maxlength="4" /> ...

Error encountered while validating jQuery word cloud

Can anyone please assist me with validating a jQuery word cloud in HTML5? I'm encountering issues with all of the rel values showing this error message: "Bad value 1 for attribute rel on element a: Not an absolute IRI. The string 1 is not a registere ...