Custom fonts on dialog stopped working

Adobe XD UXP Plugin API
, , ,
1

Greetings everyone,

Noticed that applying fonts to elements on the dialog no longer works on 21.0 as it did a couple months ago. Happened on our Icons plugin, in which the preview of the icons no longer gets affected by FontAwesome’s font-family css, and I also noticed the same seems to be happening on @PaoloBiagini 's Ikono. Was this limitation intended, or are we doing something wrong? :thinking:
I understand how this may be a way to maintain a certain graphical coherence between plugins and XD’s UI, but for this sort of plugins it would be very important to allow custom fonts to be applied.
Thanks in advance. :grin:

Best regards

2

Can you share the CSS you’re using to apply the fonts?

XD 21 (with UXP 3.1) did change the font rendering engine, so it’s possible that the CSS you neeed to apply will be different. We’ve not intentionally restricted any font families, though, so it should more be a matter of finding the right name to use.

3

For example, this simple rule was working before:

.font-family-fa-brands  {font-family:Font Awesome 5 Brands;}
4

We’re much closer to CSS standards; try using quotes around that font family name and see if it works.

1 Like
5

Well that solved the problem!
Glad it’s getting closer to CSS standards, thanks a lot Kerri

6

Greetings Kerri, that solved the problem in XD21 Prerelease, but after submitting the new update, we were testing it on the public XD20 and the problem persists, font-family is not being recognized with quotes on XD20, even though it works on the prerelease. I checked the changes trying to find a reason but to no avail. Any clues?

7

@psa Sorry for being so late!

I didn’t noticed that issue: my icons are ok, both in public 20 and in 21 prerelease.

I assign font family using: iconGlyph.style.fontFamily = settingsO["fontFamily"];
where iconGlyph is a div and settingsO["fontFamily"] is a string.

What do you see instead of the right glyphs?