Search code examples
cssfontswebfontsfallback

How can I change the thickness of a fallback font without changing the preferred font?

My website uses a web font called "Days One".

font-family: "Days One", Calibri, sans;

When Days One is not available, the webpage defaults to Calibri, if it's available.

The problem is that Days One is a lot thicker than Calibri, so when it defaults to Calibri, the font on the page looks a lot thinner. I want to set the font-weight to bold whenever the page is using Calibri, but not bold when it's using Days One.

Solution

  • You cannot. The font family and the font weight are independent in terms of CSS.

    Days One is apparently bold, but not declared that way, and it does not have any regular typeface. They’re cheating, more or less, so you can counter-cheat by declaring the font to be bold. But this requires that you download and install the font to be used on your server.