How to change font family across Lovelace UI?

Configuration Frontend
1

I would like to change the font family across the board. I have been able to change them in some place via themes and their variables but not across the board. Is there a way to change it across the board?

1 Like
2

This is still a great question! For example, it would make Home Assistant look “more native” for Macs and iOS if the font could be changed to San Francisco, for example.

3

I do this by adding the 2 resources below to my configuration.yaml file (I use yaml mode for frontend):

lovelace:
  mode: yaml
  resources: 
    - url: /local/style.css?v=1.0.0
      type: css
    - url: /local/fontstyle.css
      type: css

then in my www folder, I have this for the style.css file:

body {
    font-family: "Julius Sans One", sans-serif;
} 

html {
    font-family: "Julius Sans One", sans-serif;
	--paper-font-common-base_-_font-family: 'Julius Sans One', sans-serif;
}

and this for the fontstyle.css file:

@import url('https://fonts.googleapis.com/css?family=Julius+Sans+One');

html, {
	font-family: "Julius Sans One", sans-serif !important;
	paper-font-common-base_-_font-family: "Julius Sans One", sans-serif !important;
	
}

Obviously I’m using Julius Sans One across my dashboards but have used others with same setup. No expert here, but this works for me.

3 Likes
4

solution above works!
clean the cache though :wink:

5

Hey guys - i successfully deployed the above but has anyone got an idea on how to change the font in a mobile app/webview instance???

The above works great on a desktop. Not great on a phone.