[JS+Editor Module] Change Font

[will-fezz]

Change Font

Version: v1.0
Creator: will_fezz (https://github.com/will-fezz)

Important

Unsupported cards:

• Horizontal buttons stack

A very simple module to change the font on the bubble cards. Important that you add your font via the resources page first:

font_change:
  font_type:
    font: Quicksand

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

font_change:
    name: "Change Font"
    version: "v1.0"
    creator: "Will_Fezz"
    link: "https://github.com/will-fezz"    

    unsupported:
        - horizontal-buttons-stack    

    description: |
        A very simple module to change the font on the bubble cards. Important that you add your font via the resources page first:
        <a href="https://my.home-assistant.io/redirect/lovelace_resources/" target="_blank" rel="noreferrer noopener"><img src="https://my.home-assistant.io/badges/lovelace_resources.svg" alt="Open your Home Assistant instance and show your dashboard resources." /></a>        

    code: |
        .bubble-button-card-container, .bubble-select-card-container, .bubble-climate-container, .bubble-media-player-container, mwc-list-item, .bubble-separator {
          font-family: ${this.config.font_change.font_type.font} !important;
          }

    editor:
      - name: font_type
        type: expandable
        title: "Font"
        icon: "mdi:format-font"
        schema:
            - label: "Font"
              name: "font"
              selector:
                text: {}

---

Screenshot: