[JS+Editor Module] Change Font

[will-fezz]

Change Font

Version: v1.2
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, font style and font size. Important that you add your font via the resources page first:

font_change:
  font_type:
    font: Quicksand
  fine_control:
    lspacing: 6
    fstyle: oblique
    name_font_size: 25
    state_font_size: 15

---

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

    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, font style and font size. 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");
      let fontName = card.querySelector(".bubble-name");
      let fontState = card.querySelector(".bubble-state");

      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;
      }
        }
      if(fontName && this.config.font_change.fine_control) { 
        if(!!this.config.font_change.fine_control.name_font_size) {
          fontName.style.fontSize = this.config.font_change.fine_control.name_font_size  + 'px';
      }
        }
      if(fontState && this.config.font_change.fine_control) { 
        if(!!this.config.font_change.fine_control.state_font_size) {
          fontState.style.fontSize = this.config.font_change.fine_control.state_font_size  + 'px';
      }
        }


      })()}
     
    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
            - name: "name_font_size"
              label: "Name Font Size"
              selector:
                number:
                  min: 1
                  max: 25
                  step: 1
                  mode: slider
            - name: "state_font_size"
              label: "State Font Size"
              selector:
                number:
                  min: 1
                  max: 15
                  step: 1
                  mode: slider

---

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.

[will-fezz]

Added font size to name and state.

[Jorggs]

Is there anyway we can use a local font?

[will-fezz]

Yes, you can do that.

First, download the font.

Then create a new folder in your config directory called fonts and place the downloaded font inside it.

Next, add a new stylesheet to the resources page, using the URL /fonts/{your_font}.

[Woollybutt]

Is it possible to change the format of sub-buttons with this module?

[will-fezz]

I will look into this.