Thursday, March 4, 2021

note to self: bold tags can be used to select different font files

I implemented support for customizing font-family's with the assumption I could use the font-family name as a unique key, but that was a misthink; I'm not sure it's frequently advisable, but there's a use case of having different font-families where like you pick one file or another based on, say, a <b> tag:

I made up a simple test page

@font-face {
    font-family: 'Foo';
    src: url('AkayaTelivigala-Regular.woff2') format('woff2'),
        url('AkayaTelivigala-Regular.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Foo';
    src: url('Stick-Regular.woff2') format('woff2'),
        url('Stick-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Later on then, this HTML uses two different fonts files:

<div class="foo">Same Font Family <b>
But A Different File For Bold</b></div>

Of course, the browser can do a pretty good job faking up a "bold" even if it's coming from the same file.

No comments:

Post a Comment