Android Companion App - Google Sans Font

Mobile Apps
1

I recently upgraded to a Pixel 10 and have found that the Home Assistant companion app is not using the system font (Google San Flex). Instead, it is using Roboto. I know I can set a custom font for the dashboard, but this is not enough.

How do I make the companion app use the system font (Google San Flex) throughout the entire app? And why does it not do so by default?

2

Since Google Sans Flex is open and on Google Fonts, load it as a web font and override HA's font app-wide with card-mod (HACS). You won't be using the phone's actual system copy, but the Google Fonts version is the same font.

# themes.yaml
Google Sans Flex:
  card-mod-theme: Google Sans Flex
  card-mod-root-yaml: |
    .: |
      @import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,[email protected],100..1000&display=swap');
      html {
        --mdc-typography-font-family: "Google Sans Flex", "Roboto", sans-serif;
        --paper-font-common-base_-_font-family: "Google Sans Flex", "Roboto", sans-serif;
        --paper-font-body1_-_font-family: "Google Sans Flex", "Roboto", sans-serif;
      }

Pick that theme in Profile → Theme. It applies in the app and any browser, since it's a frontend theme. (Grab the exact @import URL from the Google Fonts specimen page, and check card-mod's "themes" docs for the current root syntax.)

Why it's Roboto by default: the Companion app is a WebView wrapping the HA web frontend, and that frontend bundles Roboto and hardcodes it in its CSS (deliberately, so HA looks identical on every browser/OS). So it renders Roboto because the web UI asks for it, not because the app ignores your Pixel's system font. There's no "use system font" toggle, and a WebView can't reach the OS UI font directly anyway.

Honest caveat: a few parts of HA still hardcode Roboto (entity badges, logbook, history, some card titles) and don't read the theme variable yet, so expect ~95%, not pixel-perfect. For stubborn spots, a blanket * { font-family: "Google Sans Flex" !important; } in the card-mod root catches most stragglers.

1 Like
3

Thank you so much the detailed and helpful response!

1 Like