Font-weight issues with web fonts

The CSS “font-weight” property is used to define the weight of a font, such as regular or bold. This article describes how to best use font families that have extended weights that may range from Extra Light all the way to Extra Black.

Here is how a regular and bold weight would be defined:
   font-weight:normal
   font-weight:bold

But for all other weights a numerical range from 100 to 900 is used. One of the challenges with web fonts is that most web browsers do not properly support font weights other than normal & bold. The following chart describes the possible mappings of weights to the numeric definitions:

• 100    Extra Light or Ultra Light
• 200    Light or Thin
• 300    Book or Demi
• 400    Normal or Regular
• 500    Medium
• 600    Semibold, Demibold
• 700    Bold
• 800    Black, Extra Bold or Heavy
• 900    Extra Black, Fat, Poster or Ultra Black

How FontsLive solves the issues with font-weight

We have solved the font-weight issue with our web font service by allowing you to customize the font-family name for each web font. For example you can create a font-family definition for EndurancePro-Light, and then use the ‘font-weight:normal’ definition (versus ‘font-weight:100’ which does not work properly across all browsers).

You will find the option to customize the font-family name after you have added fonts to a CSS resource in the Web Font Manager in your account.

Here is an example using the Mayberry Pro font family:

{ font-family: "Mayberry Pro Light"; font-weight: normal; }

{ font-family: "Mayberry Pro Medium"; font-weight: normal; }

{ font-family: "Mayberry Pro"; font-weight: normal; }

{ font-family: "Mayberry Pro Semibold"; font-weight: bold; }

{ font-family: "Mayberry Pro Bold"; font-weight: bold; }

{ font-family: "Mayberry Pro Extrabold"; font-weight: bold; }

{ font-family: "Mayberry Pro Black"; font-weight: bold; }