[BUG] Rendering regression with Phosphor font

[kStor2poche]

Checklist before submitting an issue

• [X] I have searched through the existing closed and open issues for eww and made sure this is not a duplicate
• [X] I have specifically verified that this bug is not a common user error
• [X] I am providing as much relevant information as I am able to in this bug report (Minimal config to reproduce the issue for example, if applicable)

Description of the bug

Icons provided by the Phosphor font don't display as they should

Reproducing the issue

• Use the font-family: "Phosphor" css rule on one of your labels
• Put text that matches the hex that should display one of the icons as indicated in the Phosphor website/github repo on this label
• Show widget : icon is rendered as the … character instead

Expected behaviour

The same rendering of icons that Libreoffice provides :

Additional context

This happened to me while transitionning from aur package eww-tray-wayland-git (r46.5b507c8-1) to eww-git (version 0.5.0.r13.g1e37f53-1 to be specific). Icons were rendering neatly before this.

The font selection seems to indeed work since putting an incorrect font name in the font-family field renders ascii chars in a different way. Furthermore, putting my terminal font in the font-family field renders the icons the same way they are rendered in my terminal (as expected and can be seen in the last screenshot).

I tried reloading the daemon then rebooting but nothing has changed.

configuration of current widget for context : eww.yuck :

;; powermenu
(include './powermenu.yuck')

;; statusbar
(include './statusbar.yuck')

powermenu.yuck

(defwindow powermenu
    :monitor 0
    :stacking "overlay"
    :namespace "eww-powermenu"
    :geometry (geometry :anchor "bottom center" 
                        :y "5%"
              )
    (powermenu_layout)
)

(defwidget powermenu_layout []
    (box :class "pwer-main"
         :spacing 15
         :space-evenly false
         :valign "center" :halign "center"
        (_buttons :shutdown "shutdown now" 
                  :reboot "reboot"
                  :logout "loginctl kill-session self"
                  :sleep "playerctl -a pause; eww close powermenu; systemctl suspend"
                  :lock "eww close powermenu; swaylock -f -e --screenshots --indicator --clock --timestr '%H:%M' --datestr '' --font 'SpaceMono Nerd Font Mono' --font-size 30 --effect-blur 7x5 --effect-vignette 0.3:0.9 --fade-in 0.2 --indicator-radius 140 --indicator-thickness 7 --{inside,inside-clear,inside-wrong,inside-ver,inside-caps-lock,line,line-clear,line-caps-lock,line-ver,line-wrong,separator}-color=ffffff00 --{ring,ring-clear,ring-caps-lock}-color=07080870 --ring-ver-color=84b5e070 --ring-wrong-color=fb493470 --{caps-lock-key,key}-hl-color=84ef89 --{caps-lock-bs-hl,bs-hl}-color=fabd2f --{text,text-clear,text-caps-lock,text-ver,text-wrong}-color=ebdbb2 &"
                  :shutdown_icon "" :reboot_icon "" :logout_icon ""
                  :sleep_icon "" :lock_icon ""
        )
        (label :class "pwer-separator" :text "")
        (button :class "pwer-close-button" :onclick "eww close powermenu" "")
    )
)

(defwidget _buttons [shutdown shutdown_icon reboot
                     reboot_icon sleep sleep_icon 
                     logout logout_icon lock lock_icon]
    (box :class "pwer-btns-box" :spacing 5
         :vexpand true :hexpand true
         :valign "center" :halign "center"
         :space-evenly false
        (button :class "pwer-shutdown" :onclick shutdown shutdown_icon)
        (button :class "pwer-reboot" :onclick reboot reboot_icon)
        (button :class "pwer-sleep" :onclick sleep sleep_icon)
        (button :class "pwer-logout" :onclick logout logout_icon)
        (button :class "pwer-lock" :onclick lock lock_icon)
    )
)

eww.scss :

*:not(menu):not(menuitem):not(tooltip) {
    all: unset;
}

@import './colors.scss';
@import './powermenu.scss';
@import './statusbar.scss';

tooltip {
    background: $color-bg;
    color: $color-fg;
    font-family: "SpaceMono Nerd Font Mono";
    border-radius: 0;
}

powermenu.scss :

$opacity: 0.6;

.pwer-main {
    background-color: rgba($color-bg, $opacity);
    padding: 1em;
    //border-radius: 0.5em;
}
.pwer-main button { font-family: "Phosphor"; }
.pwer-btns-box button {
    background-color: $color-bg;
    padding: 1em;
    color: $color-fg;
    border: solid 1px $color-fg;
    transition: 200ms ease-in-out background-color, color;
    &:hover {
        background-color: $color-bg-tertiary;
    }
}

.pwer-shutdown:hover { color: $color-red; }
.pwer-reboot:hover { color: $color-orange; }
.pwer-sleep:hover { color: $color-blue; }
.pwer-logout:hover { color: $color-yellow; }
.pwer-lock:hover { color: $color-purple; }

.pwer-separator {
    border-left: solid 1px $color-fg;
    color: $color-fg;
}
.pwer-close-button {
    color: $color-fg;
    transition: 200ms ease-in-out color;
    padding-right: 0.5em;
    padding-left: 0.25em;
    font-size: 1.25em;
    &:hover {
        color: $color-red;
    }
}

[gh0stzk]

i have same problem with my powermenu and calendar widgets but with font jetbrainsmono nerd font and with font awesome

3 dots instead the hour and minutes.

[gh0stzk]

I fixed labels adding :show-truncated "false"

But when is an event box and a button, this didnt work

[kStor2poche]

I fixed labels adding :show-truncated "false"

But when is an event box and a button, this didnt work

Ok, this did work for my labels, thanks a bunch ! Since this was just a small skill issue, I'll be closing the issue, though labels should be changed and it doesn't seem that I can do it.

I also think that show-truncated being false by default would be better ux but that would be its own issue.