Search code examples
cssfontsfont-face

What does the :300 mean for this google font?

I have a font loading in my HTML from a web template:

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

What does the ":300" mean and do?

Solution

  • It primarly sets the font-weight for the CSS that is generated. But it also changes the source font-family also.

    Ex.

    • 300 - Open Sans Light
    • 600 - Open Sans Semibold
    • 800 - Open Sans Extrabold

    Compare your link vs http://fonts.googleapis.com/css?family=Open+Sans:800