[BUG] Change Font Clock Widget

[CrazyWolf13]

Environment

Self-Hosted (Docker)

System

RaspberryPi OS 32Bit

Version

2.1.1

Describe the problem

I wanted to change the font from the Clock widget, so I tried a whole day and finally found some hints: https://github.com/Lissy93/dashy/blob/master/src/components/Widgets/Clock.vue
I change the Font and font family to be Podkova which is already in the folder: https://github.com/Lissy93/dashy/tree/master/public/fonts

But after a container restart nothing happened so I did a rebuild from the UI, and then I got the error: "Error: ENOENT: no such file or directory, stat '/app/dist/index.html" And after I manually sudo docker exec into the container the whole dist folder was gone. A recreate from portainer solved this.

But still how could I change the font of the clock to podkova? What am I doing wrong? Why is there this error?
Many thanks for an answer:)

Additional info

No response

Please tick the boxes

• You have explained the issue clearly, and included all relevant info
• You are using a supported version of Dashy
• You've checked that this issue hasn't already been raised
• You've checked the docs and troubleshooting guide
• You agree to the code of conduct

[liss-bot]

This issue has gone 3 months without an update. To keep the ticket open, please indicate that it is still relevant in a comment below. Otherwise it will be closed in 5 working days.

[liss-bot]

This issue was automatically closed because it has been stalled for over 6 weeks with no activity.

[CrazyWolf13]

No still a request

[Lissy93]

Hey @CrazyWolf13

I was able to get this working using the .clock .time selector + using !important

appConfig:
  customCss: '.clock .time { font-family: "Roboto", monospace !important; }'

sections:
- name: CrazyWolf13 Clock Demo
  icon: ⏰
  widgets:
  - type: clock

This should work with any font you have installed on your local PC.

If you want to use a font not yet installed, you could import it, also within the CSS.
For example:

appConfig:
  customCss: >
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
    .clock .time { font-family: "Poppins", monospace !important; }

[CrazyWolf13]

Hey @CrazyWolf13

I was able to get this working using the .clock .time selector + using !important

appConfig:
  customCss: '.clock .time { font-family: "Roboto", monospace !important; }'

sections:
- name: CrazyWolf13 Clock Demo
  icon: ⏰
  widgets:
  - type: clock

This should work with any font you have installed on your local PC.

If you want to use a font not yet installed, you could import it, also within the CSS. For example:

appConfig:
  customCss: >
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
    .clock .time { font-family: "Poppins", monospace !important; }

Thanks!

[Lissy93]

No worries, happy new year!

[CrazyWolf13]

No worries, happy new year!

Thank you, you too 💕