update font-family variables

[Rosepetal2022]

Fixes issue# 3863

Choose one of the following:

This is an improvement.

Proposed solution

This PR improves the consistency of font-family usage across the project by replacing hardcoded font-family values with CSS variables. This change ensures that font styles are managed more centrally, making future updates easier and promoting better maintainability.

Tradeoffs

The main tradeoff is that using CSS variables requires browser support. However, most modern browsers support CSS variables, so this is not a significant issue. This approach also increases the reliance on variables for styling, which might add a slight overhead to the CSS parsing process. Alternatives include keeping hardcoded values or using a preprocessor for variable management.

Testing Done

I tested the CSS changes using a minimal HTML file that includes the updated font-family variables. The changes were verified by comparing the visual output with the previous styles. I also tested the changes in different browsers to ensure consistency.

Changelog updated?

No. The Changelog has not been updated. If you think this change should be reflected in the Changelog, please let me know.

How have you confirmed this feature works?

I confirmed the feature works by creating a minimal HTML test file that applies the updated font-family variables. The visual output was checked to ensure the correct fonts were applied. Additionally, I tested the changes in multiple browsers to verify compatibility.

[jgthms]

Thanks for this PR.

Instead of changing the CSS file, could you update the Sass file? The file to change is typography.scss. And you can use the cv.getVar("family-primary") function.