Replaced Roboto with variable for primary font family

[JuliaSoriaSmith]

Proposed change

Some cards in home assistant lovelace do not respect the font, e.g. the recently added badges. I replaced certain instances of the default Roboto being harded coded with the --primary-font-family variable.

Type of change

• [ ] Dependency upgrade
• [ ] Bugfix (non-breaking change which fixes an issue)
• [ ] New feature (thank you!)
• [ ] Breaking change (fix/feature causing existing functionality to break)
• [X] Code quality improvements to existing code or addition of tests

Example configuration

Example theme.yaml that changes the font

test:

  font-variant-numeric: "Kode Mono"

Additional information

• This PR fixes or closes issue: fixes #21691 fixes #21569
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• [X] The code change is tested and works locally.
• [X] There is no commented out code in this PR.
• [X] Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• [ ] Documentation added/updated for www.home-assistant.io

Summary by CodeRabbit

• New Features

  • Updated font management across multiple components by utilizing a dynamic CSS variable for font-family, enhancing flexibility and consistency in styling.

• Bug Fixes

  • No bug fixes were included in this release.

• Documentation

  • No documentation changes were made.

• Refactor

  • Streamlined font styling in various components to improve maintainability and theming capabilities.

• Chores

  • No additional chores were performed in this release.