Support font-face name grouping

[MarcelloDiSimone]

CSS offers a way to group different font-faces of a certain font-family under a global name (like google fonts does it) and then determines the font-face by using font-weight or font-style:

@font-face {
    font-family: 'Roboto'; // group name
    font-style: normal;
    font-weight: 900;
    src: local('Roboto Black'), local('Roboto-Black'), url(https://domain.tld/assets/Roboto-Black.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto'; // group name
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(https://https://domain.tld/assets/Roboto-Regular.woff2) format('woff2');
}
// uses Roboto-Regular
body {
     font-family: 'Roboto';
}
// uses Roboto-Black
h1 {
     font-weight: 900;
}

A possible syntax could look like following:

const Fonts = {
    Roboto: new FontFamily(
        'Roboto', 
        [
            {
                font: Font.fromFile('assets/fonts/Roboto/Roboto-Regular.woff2', 'Roboto-Regular'),
                weight: 400, 
                style: FontStyle.normal
            },
            {
                font: Font.fromFile('assets/fonts/Roboto/Roboto-Black.woff2', 'Roboto-Black'),
                weight: 900, 
                style: FontStyle.normal
            }
        ]
    )
}

The background of my request is that currently you have to pick one font-face ie. 'Roboto-Regular' as a default global font for your website, but than tags like strong/b or i/em are displayed with Regular font-face and not with their default bold or respectively italic weight/style...

[MarcelloDiSimone]

In addition to that, this would open up the possibility to extract variables and mixins that would be much more flexible in styling font related things:

h1 {
     @include typography-font-weight-black();
}

.headline {
    font-weight: $typograph-font-weight-black;
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.