Tutorials Bugs Masterclass Free stuff Test pages Proposals

Core tests

Advanced tests

This test

RichInStyle.com test pages: fonts - font weights

  1. 100.

  2. 200.

  3. 300.

  4. 400.

  5. 500.

  6. 600.

  7. 700.

  8. 800.

  9. 900.

  10. This should not be bold because values must be divisible by 100.

  11. This is bold

    This should also be bold because the declaration is invalid and therefore ignored.

  12. The following is a largely informative test that find out how many weights the browser is using. Each that appears the same is equivalent; for example, if 100200 appears as a single line of text, then 100 and 200 are the same. If they appear as overlapping, then it indicates that they are different. Thus if 500600 600700 800900 are different, this indicates that 100-500, 600, 700-800 and 900 are the available weights.

    100200
    100200
    200300
    200300
    300400
    300400
    400500
    400500
    500600
    500600
    600700
    600700
    700800
    700800
    800900
    800900

    Now that you've found out how many different weights the font has, you can see whether your browser correctly honors font-weight: bolder. For example, if there was four weights, then bolder1 should correspond with the first of these, bolder2 should be the next most bold available font weight and bolder3 the boldest available with bolder4 the same as bolder3. Similarly with lighter.

    normal
    bolder
    bolder
    bolder
    bolder
    lighter
    lighter
    lighter
    lighter
    lighter