2022/07/13

lovelace 테마 폰트변경과 구글 폰트 리소스 추가


** Gamja Flower 폰트

구글 다크 테마의 색상일부와 noctis 테마의 폰트설정 항목을 따와서 만든 테마

google dark:
  primary-font-family: 'Gamja Flower,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)"
  ha-card-header-font-family: "var(--primary-font-family)"

  app-header-background-color: rgb(23, 23, 23)
  primary-background-color: rgb(23, 23, 23)
  card-background-color: rgb(32, 33, 36)

  primary-text-color: rgb(242, 242, 242)
  secondary-text-color: rgb(166, 166, 166)
  disabled-text-color: rgba(184, 190, 199, 0.4)

  sidebar-icon-color: rgb(169, 177, 188)
  sidebar-text-color: rgb(198, 203, 210)

  mdc-checkbox-unchecked-color: rgb(172, 176, 185)
  mdc-radio-unchecked-color: rgb(172, 176, 185)
  switch-unchecked-button-color: rgb(172, 176, 185)
  switch-unchecked-track-color: rgb(154, 160, 166)

  ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
  ha-card-border-radius: 12px
  modes:
    dark: {}
    light: {}


구글 폰트 등록은 lovelace 우상단 점세개를 클릭하면 나오는 메뉴에서 대시보드 편집하기를 선택하고 다시 같은 곳 점세개를 클릭해서 리소스 관리하기 클릭 후 우하단 새로운 리소스 추가하기에 아래항목 추가하고 스타일시트 체크

https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@200&display=swap

** IBM Plex Sans KR 두께 200


모바일에선 영문 폰트중 폭이 좁은 폰트를 테마로 만들어 설정하면 숫자나 단위등을 표현할 때 좁은폭으로 인해 많은 정보가 잘리지 않고 표시될 수 있습니다.

** Khand 두께 400



** 다른 구글 폰트는 https://fonts.google.com/?subset=korean에 접속해 폰트를 확인하고 css주소를 따와 리소스에 추가하면 됩니다. 여러 폰트를 선택해 두고 카피하면 한 라인으로 한번에 등록할 수 있습니다.

** 영문폰트를 선택해 테마를 만들면 한글은 Noto Sans KR 두께 400으로 연결돼 적용됩니다.