Home Assistant Community

Lovelace Fonts


I want to use “Product Sans” as a font in my flooplan/picture-elements. The problem is that the font is not part of the standard webfonts. Is there a way to imort them?

I found the css format but i dont know how to import that into the yaml

@font-face {
  font-family: 'Product Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');

P.S. i also have the font as a ttf



I’d like to use Product Sans, too. Did you ever find a solution? Thanks.



Have a look at this thread - it will give you all the answers: Clear Theme

You will have to find a website that hosts Product Sans - there are a few (I experimented with Product Sans on my Lovelace but ended up going for an open-source font) and use that site as your source in styles.css

I would post links but Product Sans does not have any open source licensing unfortunately



Thanks. I’ll check it out.