[JS+Editor Module] Change Font

[will-fezz]

Change Font

Version: v1.1
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. Now you can also change the letter spacing and font style. Important that you add your font via the resources page first:

font_change:
  font_type:
    font: Quicksand
  fine_control:
    letter_spacing: 3
    font_style: italic

---

🧩 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.1"
    creator: "Will_Fezz"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1231"    

    unsupported:
        - horizontal-buttons-stack    

    description: |
        A very simple module to change the font on the bubble cards. Now you can also change the letter spacing and font style. 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: |

      ${(() => {
      let fontCard = card.querySelector(".bubble-name, .bubble-name-container, .bubble-button-card-container, .bubble-select-card-container, .bubble-climate-container, .bubble-media-player-container, mwc-list-item, .bubble-separator, .bubble-cover-card-container");

      if(fontCard && this.config.font_change.font_type) { 
        if(!!this.config.font_change.font_type.font) {
          fontCard.style.fontFamily = this.config.font_change.font_type.font;
      }
        }
      if(fontCard && this.config.font_change.fine_control) { 
        if(!!this.config.font_change.fine_control.letter_spacing) {
          fontCard.style.letterSpacing = this.config.font_change.fine_control.letter_spacing + 'px';
      }
        }
      if(fontCard && this.config.font_change.fine_control) { 
        if(!!this.config.font_change.fine_control.font_style) {
          fontCard.style.fontStyle = this.config.font_change.fine_control.font_style;
      }
        }


      })()}
     
    editor:
      - name: font_type
        type: expandable
        title: "Font"
        icon: "mdi:format-font"
        schema:
            - label: "Font"
              name: "font"
              selector:
                text: "{}"
      - name: fine_control
        type: expandable
        title: "Fine Control"
        icon: "mdi:format-font"
        schema:
            - name: "letter_spacing"
              label: "Letter Spacing"
              selector:
                number:
                  min: -20
                  max: 50
                  step: 1
                  mode: slider
            - label: "Font Style"
              name: "font_style"
              selector:
                select:
                  options:
                    - normal
                    - italic
                    - oblique
                  mode: dropdown

---

Screenshot:

[honzis1364]

Heyo, great Module, installed it right away. Could you please expand it with letter-spacing and line-height properties?

[will-fezz]

Added letter-spacing and font-styles. Not completely tested, let me know if you find any bugs.

Hopefully, get around to some other font attributes (including line height) when I get a moment.