[BUG] Not falling back to next font in font-family

[lsgalante]

Expected Behavior

Widgets should display icons properly

Current Behavior

Widgets only recognize first font defined in styles.css defined in font-family

Steps to Reproduce

I can reproduce this issue simply by running yasb with all default configurations.

Context (Environment)

I am not very experience with this kind of thing and hope I am not missing something foolish. yasb.log

[hexfactor]

I'm having this issue too on the default configuration. Has anyone been able to solve it?

[Chat-mots]

Same issue here. Could not find where the problem is.

[tmstorm]

Same issue, I have started looking through the code to find the issue. My initial thought is it has something to do with cssutils. So I upgraded to cssutils version 2.7.1 and changed the requirements.txt file but the issue still remains.

[tmstorm]

After looking into this a little more it seams like an issue with Font Awesome and the way it is being called. Bars is being used as a fall back font for the CPU monitor and will show the correct glyphs. However I did find that the default config.yaml is using the incorrect Unicode for the Bars font.

If you update your config.yaml to this it should render the correct glyphs for the CPU bars.

 cpu:
    type: "yasb.cpu.CpuWidget"
    options:
      label: "\uf200 {info[histograms][cpu_percent]}"
      label_alt: "\uf200 CPU: {info[percent][total]}% | freq: {info[freq][current]:.2f} Mhz"
      update_interval: 500
      histogram_icons:
        - '\u3000' # 0%
        - '\u3001' # 10%
        - '\u3002' # 20%
        - '\u3003' # 30%
        - '\u3004' # 40%
        - '\u3005' # 50%
        - '\u3006' # 60%
        - '\u3007' # 70%
        - '\u3008' # 80%+
      histogram_num_columns: 10

[Chat-mots]

@tmstorm can confirm, It is correctly falling back to the font Bars. And it is probably not a problem of dependencies : I am using all requirements from requirements.txt at their latest version, thinking it could correct the issue, but nothing changed. So is the problem coming from the font itself ? I've tried with Font Awesome v5 and v6 and same issue, icons are not displayed.

[tmstorm]

@Chat-mots I think you are on to something here. If you move 'Font Awesome 5 Free' to the front of the list you will notice that the text font changes but still will not apply the glyphs.

font-family:  'Font Awesome 5 Free', 'Courier New', 'Bars'; /* Nothing will work */

However if I change it to 'Font Awesome 5 Free Solid' it will show the glyphs but not fall back to Courier New or Bars fonts. This is expected since the order matters and Font Awesome has a text font so there will be no fallback used.

font-family:  'Font Awesome 5 Free Solid', 'Courier New', 'Bars'; /* This will show glyphs but not use fallbacks */

The use is that if you place it back at the end and add 'Solid' it still will not work.

font-family:  'Courier New', 'Bars', 'Font Awesome 5 Free Solid'; /* This will not work */

[tmstorm]

I fixed the issue for myself but it required changing the core code. I use waybar on Arch also and waybar separates icons and labels. So I modified the code to add an icon field and class for css then added it to the json validation. Once I did that I update my styles.css with the below code and all fonts and glyphs now show correctly.

.cpu-widget .icon { 
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* This is required since the glyphs are in the Solid variant of Font Awesome */
    font-size: 14px;
}

My change is a work around but I do think the content of each widget should be changed to be more modular to give the user the option to call icons as an independent option.

I haven't posted all the code I added to the core since I had to change every widget. Including the custom widget and their corresponding validation files.

[Chat-mots]

Understood, any chance your fix will end up in the repo ? Or it is just a workaround as of right now ? Could you share it in the github @tmstorm ? The idea of being able to change the icon for each widget is clever !

Still, I'm confused about how it used to work then it stopped...

[tmstorm]

Right now mine is just a workaround however I'm still working on it and will try and get a PR in. Its only the second time I have written in Python so it takes me a bit longer to work through it.

[n3rdly]

Right now mine is just a workaround however I'm still working on it and will try and get a PR in. Its only the second time I have written in Python so it takes me a bit longer to work through it.

Any chance you could share your workaround. Would love to get this fixed.

** Update; I was able to also put in a workaround that only required me to change the style.css file

[tmstorm]

Did you call the fonts directly in the CSS for each class? I think that was what I had done initially. I'm looking through the QT6 docs right now I think you might have to use SetFamilies from QFont so that all the families get loaded.

https://doc.qt.io/qt-6/qfont.html#setFamilies

[n3rdly]

Yup exactly. Just defined them in each class where it wasn't working. Once I finish up another project I am working on I was going to circle back to this as well. Let me know if you find anything of interest or a fix. Cheers!

[Chat-mots]

Update : The issue is still here, and I don't have the time to fix it. But I found an easy workaround.

Workaround : Because the font is not falling back, you need to use a font having the icons and the style you want. Simply use the nerdFont of your choice. There are many to choose from, and all have the icons. The style.css file change :

* {
    /* Bar measurement icons: https://github.com/and3rson/graph-bars-font */
    /* Icon set: https://fontawesome.com/v5.15/how-to-use/on-the-desktop/setup/getting-started */
    font-family: 'Cousine Nerd Font'; /* with only one font, no problems ! Use the nerd font you like the most. */
    font-size: 14px;
    color: #f2e5bc;
}```

[donkee]

@tmstorm or @n3rdly any chance you could post your solutions?

[tmstorm]

Sorry @donkee I have since switched back to full Arch Linux and don't have the code anymore.