fonts do not follow as specified in typography.css

[jaeho-lee]

static/css/typography.css is supposed to control the fonts of the website. It appears that "Fira Mono" specifies the font family, and monospace specifies the font style. Somehow, modifying "Fira Mono" does not make any changes, while changing monospace does (it also changes fonts).

[joeroe]

"Fira Mono", monospace; actually lists the desired font families in order of preference. That is, if Fira Mono is not available locally, it tries monospace, which is a placeholder for the system default fixed-width font. See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family for more details.

If you could explain what you changed and what you expected to happen I can look into it further. Otherwise, the font declaration appears to be working correctly to me.

[jaeho-lee]

Thank you for the response! I actually tried changing "Fira Mono" into many other options, including Georgia, "Roboto Mono", Menlo, but none of the changes actually changed the displayed font.

I guess, in this case, this happens because my machines do not have the desired Fira Mono font (or other alternatives), and is loading only the monospace. In fact, I just realized that my macbook and iPhone does not properly load the theme's demo page with Fira Mono (and thus having discrepancies from the screenshot you provided for Hugo theme page; see the screenshot). I just installed Fira Mono font on my macbook, but somehow that does not make any change either.

I would try to find myself a solution to display the same font for every user (e.g., by importing googlefonts). Thank you again for the help!