Can somebody help me change Lovelace font?

style.css located in /local/

body {
    font-family: "Lato", sans-serif !important;
    font-weight: 400 !important;
}

html {
    font-family: "Lato", sans-serif !important;
    font-weight: 400 !important;
    --paper-font-common-base_-_font-family: "Lato", sans-serif !important;
    --mdc-typography-font-family: "Lato", sans-serif !important;
    --ha-card-header-font-family: "Lato", sans-serif !important;    
}

lato.css located in /www/font/lato/

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

configuration.yaml

lovelace:
  mode: yaml
  resources:
    - url: /local/style.css
      type: css
    - url: /local/font/lato/lato.css?v=2 #I also have font files saved in the local folder, didn't work
      type: css
    - url: 'https://fonts.googleapis.com/css?family=Lato' #which is why I added https link, no luck
      type: css
    - url: /hacsfiles/bar-card/bar-card.js
      type: module

frontend:
  themes: !include_dir_merge_named themes

ios-theme.yaml file in /local/themes/ios-themes/

ios-dark-mode-blue-red
  # Font
  primary-font-family: 'Lato,sans-serif'
  paper-font-common-base_-_font-family: var(--primary-font-family)
  paper-font-common-code_-_font-family: var(--primary-font-family)
  paper-font-body1_-_font-family: var(--primary-font-family)
  paper-font-subhead_-_font-family: var(--primary-font-family)
  paper-font-headline_-_font-family: var(--primary-font-family)
  paper-font-caption_-_font-family: var(--primary-font-family)
  paper-font-title_-_font-family: var(--primary-font-family)

I can’t think of anything else that I needed to correct. Need your guys help!

1 post - 1 participant

Read full topic