Enable fontStyle property even in plugins UI

Adobe XD UXP Plugin API
1

Actually, UI text elements don’t support the fontStyle property.
Almost all fonts has styles and it would be useful to format text inside UI.
Is such a feature in the roadmap?

Thanks.

2

@PaoloBiagini do you see the reply on fonts list post fonts array fully

3

Can you be more specific about what kinds of styles you’re applying, and to what elements?

Note that it does depend what fonts are being used—we don’t do faux italics, so if the font family doesn’t support italics, it won’t be rendered with italics.

<style>
    .italic { 
        font-family: Helvetica;
        font-style: italic; 
    }
</style>
<h1>Template</h1>
<hr />
<p class="italic">Hello World!</p>
<footer>
     <button uxp-variant="cta">Close</button>
</footer>

Generates the following:

image
image.png934×450 9.97 KB

4

Hi @kerrishotts,

you’re right:

textToFormat.style.fontStyle = "italic";

and

textToFormat.style.fontWeight = "bold";

work but I meant accessing font styles like ‘Black’, ‘Condensed’, ‘Light’ and suchlike. I remember you told me that at this moment this feature is not yet available. Would it be added in a future build?
I’d like being able to display all styles available in a font.

Many thanks.

5

Any news regarding how to access these font styles in the UI?
Does anyone know if and when they will be available?

6

Hi @PaoloBiagini,

These are not added to the roadmap yet. Since there are numerous requests from this forum and other places, we have to prioritize what to include in the roadmap. On this forum, we try to look at feature requests that have a high number of votes. Once we get through the feature requests with high demand, we will revisit other feature requests with a low number of votes.

Thanks for understanding!

2 Likes
7

Thank you @stevekwak, I just thought that with the latest update supporting assets character styles could also be possible to access some typographic features still missing.
Looking forward for that!

8

So just supporting fontWeight={100,200,...900} in CSS should be able to access those different weights.

9

this does not work for me

10

@alongruss

it has to work. Could you post a bit more of your code?
In my plugins it works as expected, the same for .style.fontWeight = "bold"