Google fonts font-weight of 100 is not working

Question

I have an android game that uses the Raleway font from google fonts, and in the game it looks nice. I want to use that font on the website as well, but the font doesn't display the same. In the game I use Raleway-Thin, and that is the same one I want to use on the website. The issue that I am having is that the thin font isn't as thin as in the game.

@import url(http://fonts.googleapis.com/css?family=Raleway:500,600,700,100,800,900,400,200,300);

body{
    font-family: 'Raleway', sans-serif;
}

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

When setting the font-weight as 100, 200, 300, 400 or 500 the weight is always the same. What is causing this?

Monroe

When I put your code into a JSFiddle, it works. I'm using Firefox 39 on Windows 7. Can you edit your question so that it contains a snippet with some HTML and see if your issue is duplicated here? – Appetence

It looks like a chrome issue then... It is working in FF for me but not in Chrome. – Monroe

It works for me in Chrome too. (Version 43.0.2357.130 m) I double checked by changing the number; it's changing the weight/boldness of the text. – Appetence

Is it possible your Chrome browser is blocking some of the files? – Appetence

I have no idea now, I just had someone else try and it worked fine for them too. I have also noticed that google pages all the text is bold, such as their help/support, play store, etc. like this whole page for example: developers.google.com/fonts/docs/troubleshooting – Monroe

I think that's just a style and/or accessibility decision on their part. I'm assuming you're seeing the same thing I'm seeing, which is that the font there is heavier than it is here or on web sites in general but the headings are still heavier than the regular text. – Appetence

I have added a screenshot on the left is a google page that shows all bold text. on the right is the working font in firefox – Monroe

Answer 1

I figured it out!

I had the font Roboto installed on my computer so it was using that font instead. I removed/deleted this font and this fixed the google boldness as google uses that font all over the place.

I then removed/deleted Raleway which was also installed on my computer and that fixed the initial issue with my website.

Monroe