Google Web Fonts font-weight not rendering correctly

StackOverflow https://stackoverflow.com/questions/22583233

  •  19-06-2023
  •  | 
  •  

Question

I am trying to use Open Sans web font in an html page with two different weights (300 and 800). But the differences between these weights are very little (tested with IE11, Chrome). You can see the images below what I got and what would look like (from the Google Fonts site).

My result:

My result

Google's result:

Google result

My html code is:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>font test</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
    <link href="styles/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
    Font Family: Open Sans <br />
    font-weight 300: <span id="test">GGG</span><br />
    font-weight 800: <span id="test2">GGG</span><br />
</body>
</html>

and the css:

#test
{
    font-family: 'Open Sans' !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: 32px;
}

#test2
{
    font-family: 'Open Sans' !important;
    font-style: normal !important;
    font-weight: 800 !important;
    font-size: 32px;
}
Was it helpful?

Solution

I don't see the weights in your 

<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,vietnamese' rel='stylesheet' type='text/css'>

Replace it with: 

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>

And it will work.

http://codepen.io/anon/pen/KGhbt/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top