Search code examples
htmlcssgoogle-font-api

Google's Open Sans font weight

I am using Google Open Sans fonts in an html page via:

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

Only the font-weight: 600; makes the font bold. Other values don't seem to make a difference. How to have intermediary font weights for this particular font using the CSS rules? Or must I use some other font?

Solution

  • What you are using will only consist of 400 font weight font file. Inorder to get other font weight font files, you need to select font weights as well, like

    @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');

    Note that the more font weights you use, the more time it will take to load these files. Inorder to add more font weights, follow the steps below.

    1. Go to Open Sans font page and click on Select This Font option enter image description here
    2. Maximize the box on the footer, and click on Customize

    enter image description here

    1. Now here, select the font weights you would like to select for this font. And you are done, go back to Embed and get the new URL.

    enter image description here