CODEWITHSUNDEEP
cssfontsfont-face
Laurence
Laurence

Reputation: 60068

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?

Upvotes: 4

Views: 6184

Answers (3)

Zuul
Zuul

Reputation: 16269

Font-weight may be defined as:

  • normal

Normal font weight. Same as 400.

  • bold

Bold font weight. Same as 700.

  • lighter

One font weight lighter than the parent element (among the available weights of the font).

  • bolder

One font weight darker than the parent element (among the available weights of the font).

Or it can be defined with a numeric representation:

  • 100, 200, 300, 400, 500, 600, 700, 800, 900

Numeric font weights for fonts that provide more than just normal and bold.

If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight).

This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

To that particular case, the font is being set a bit lighter then the normal boldness.

Upvotes: 2

Ryan Gibbons
Ryan Gibbons

Reputation: 3601

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

Upvotes: 5

beth
beth

Reputation: 1996

It's a font weight. 300 is normal weight.

It's in CSS2: http://www.devguru.com/technologies/css/quickref/css_fontweight.html

Upvotes: 0

Related Questions