Open sans is thin in photoshop but not in the browser. What to do?

Question

css

Are there any plugins etc to make text render thinner in the browser? Connected from google fonts and selected all font-weight. Still not thin enough. Thanks

Answer 1

1) Try adding:

-webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

for body
2) Include fonts via Google fonts (before closing tag </head>):
3) Be sure to set the correct font-family and font-weight: 300; for the places where you need to render the font:

.cite {
  font-family: "Open Sans", Helvetica, Arial, Sans-sarif;
  font-weight: 300;
}

You can do this globally (for the entire site), in the same body:

body {
  font-family: "Open Sans", Helvetica, Arial, Sans-sarif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Open the source code of any site with custom fonts (via the web inspector / developer panel), see how they did it (you can see it on the same toaster).

Answer 2

Let's take a look at the font.