Font-weight can be any number from 1 to 1000

The values for font-weight are often: normal or bold. For browsers that have adopted CSS Fonts Module Level 4 though, any number from 1 to 1000 is acceptable. At the time of writing, Firefox, Firefox for Android, Chrome, iOS Safari, and even Oprah Mini support this extended range of values.

Here is how that looks in an animation:

From 1 to 1000 and back

⚠ A variable font is needed to achieve this effect – or else you are stuck with the weights that are supported by the font. The demo above uses the latest Source Sans Pro at the time of right, downloaded from GitHub which is a variable font. It supports widths from 200 to 900, so the range shown in the animation has been limited to these values.

CSS:

@font-face {
    font-family: 'SourceSansVariable';
    src: url('SourceSansVariable-Roman.ttf.woff2') format('woff2'),
         url('SourceSansVariable-Roman.ttf.woff') format('woff'),
         url('SourceSansVariable-Roman.ttf') format('truetype');
    font-style: normal;
    font-stretch: normal;
    font-weight: 200 900;
}

#example-font-weight .sample-text {
    animation: 2s linear 0s infinite alternate font_weight_flux;
    font: 1rem SourceSansVariable, sans-serif;
}

@keyframes font_weight_flux {
    from { font-weight: 200; }
    to { font-weight: 900; }
}

HTML:

<div id="example-font-weight" class="example-block">
    <div class="sample-text">From 1 to 1000 and back</div>
</div>

Leave a Reply

Your email address will not be published.

Color scheme: