[Design]: Fonts not being applied to several buttons in image editor

[theTyster]

⚠️ This issue respects the following points: ⚠️

• [X] This is a bug, not a question or a configuration/webserver/proxy issue.
• [X] This issue is not already reported on Github OR Nextcloud Community Forum (I've searched it).
• [X] Nextcloud Server is up to date. See Maintenance and Release Schedule for supported versions.
• [X] I agree to follow Nextcloud's Code of Conduct.

Bug description

The "Save" button is using a seriffed font. This is inconsistent with other buttons and UI choices.

Was also able to confirm that this was the case since the latest merge on the Master branch. From my local dev environment:

Steps to reproduce

1. Open an image in the browser web app.
2. Select the "edit" pen.
3. Notice the font of the "Save" button.

Expected behavior

I was able to normalize the font in the span tag by changing the font-family attribute to the normally used var(--font-family).

[ostasevych]

Hi! In my case all fonts have gone totally. Is that possible to fix them somehow?

[ostasevych]

I was able to normalize the font in the span tag by changing the font-family attribute to the normally used var(--font-family). Please, explain, which file and what exactly have you changed? If possible, share it or even PR.

[theTyster]

@ostasevych

Please, explain, which file and what exactly have you changed? If possible, share it or even PR.

I did this with firefox browser dev tools. I don't know where this CSS rule is declared in the source files, unfortunately. When I have some time I will look into this more and maybe make a PR if I can fix it.

However to be more explicit:

<div class="sc-m9ezm7-0 eCOVER FIE_topbar-save-wrapper" style="min-width: 67px; width: fit-content;">
  <button type="button" class="sc-lxwit0-3 fNRNuZ sc-m9ezm7-1 cwXbaO FIE_topbar-save-button SfxButton-root" title="" color="primary">
    <span class="sc-lxwit0-2 mqDxJ SfxButton-Body">
      <span class="sc-lxwit0-0 dooMfD SfxButton-Label">Save</span>
    </span>
  </button>
</div>

After opening dev tools, I selected the innermost span element above (Keep in mind class names may be different depending on your build version.) and changed font-family from "Roboto" to var(--font-family).

In fact, I just tested this again and on each of the elements @ostasevych highlighted and discovered that simply removing the rule "font-family: "Roboto" for each of these had the same effect. Additionally, removing "overflow: hidden" also kept some characters like "j" from being clipped off at the bottom.

I am not sure if this is a solution. I just thought it might help in finding a solution.

Also it might be worth mentioning that the X SVG image is also not displaying correctly. Looks like a view box issue?

[ostasevych]

var(--font-family)

Tried to replace manually in js files - without any success :( Perhaps, authors of the app can help with that?