advancedRenderer not making text bold

Get Help
1

Hello,

I am trying to use the advancedRenderer to make some words inside a string bold, while keeping the rest of the string regular. But, even though I am using it correctly and can italicize parts of a string, the bold is not applied.

Example:

text: {
          w: 800,
          text: 'This is some <b>text</b> that should be changed',
          ...FONT_THEME,
          wordBreak: true,
          advancedRenderer: true,
        },

Does the advanced renderer not work with fonts? If so, is there another way in Lightning that does? It would be cumbersome to split the strings apart and position them consecutively, accounting for word breaking.

Thanks.

2

My guess is you need to load the bold font face. Are you loading multiple fonts for normal, bold, italic?

3

Yes, there are several different fonts loaded. The bold is used throughout the app. Is there a specific way to load it that the advanced renderer requires?

4

After digging through the source, the advanced renderer is using the fontStyle property of the text, rather than the fontFamily or fontFace. The fontStyle being ‘bold’ is not mapped to the fontFamily bold that the app uses. Is there a way to link the fontStyle with the bold font loaded with fontFamily?

5

Also, I have noticed that the wordBreak does not split the lines well with spaces. If there is a space at the end of the line where the max width is, the space gets wrapped to the next line, causing a space indent, which looks like this:

This is an example of
 what I mean about the
space wrapping.

Is there a way to avoid this?

6

Can you provide the code you are using to install your fonts? You are right about the wordBreak behavior. That is something well have to look into more. Can you create an issue on our GitHub repo?

7

I am just using the static getFonts() method in the App.js file that I’ve seen done in some lightning repo:

static getFonts() {
    return [
      { family: 'Regular', url: Utils.asset('fonts/Regular.ttf') },
      { family: 'Medium', url: Utils.asset('fonts/Medium.ttf') },
      { family: 'SemiBold', url: Utils.asset('fonts/SemiBold.ttf') },
      { family: 'Bold', url: Utils.asset('fonts/Bold.ttf') },
    ];
  }

From digging through the source, this method also accepts a descriptors param, but I’ve been unsuccessful using that.

8

Thanks for that! I did some searching and came to realize our documentation seems to be lacking any details on how to use getFonts(). We do have this but it turns out it’s not actually published on our doc pages!

What you want to do though is use a single family name with different weight descriptors on them. Something like this:

static getFonts() {
  return [
    {
      family: 'Arial',
      url: Utils.asset('fonts/Arial.otf'),
      descriptors: {
        weight: 'normal',
      },
    },
    {
      family: 'Arial',
      url: Utils.asset('fonts/Arial.otf'),
      descriptors: {
        weight: 'bold',
      },
    },
  ];
}

I tested this out on my end and it worked. We’ll try to get the documentation updated soon.

9

Using the method in the link you sent, I cannot set a ‘medium’, ‘regular’, ‘semibold’, etc. as descriptors for the differing font .ttf weights. I just get the error DOMException: Failed to set 'medium' as a property value.

This is how I am doing it:

static getFonts() {
    return [
      {
        family: 'MyFont',
        url: Utils.asset('fonts/MyFont-Regular.ttf'),
        descriptors: {
          weight: 'normal',
        },
      },
      {
        family: 'MyFont',
        url: Utils.asset('fonts/MyFont-Medium.ttf'),
        descriptors: {
          weight: 'medium',
        },
      },
      {
        family: 'MyFont',
        url: Utils.asset('fonts/MyFont-SemiBold.ttf'),
        descriptors: {
          weight: 'semibold',
        },
      },
      {
        family: 'MyFont',
        url: Utils.asset('fonts/MyFont-Bold.ttf'),
        descriptors: { weight: 'bold' },
      },
    ];
  }

Then, how would I differentiate the different font weights I am loading if they are all named the same?

For example, is this how I would then use this method of loading fonts:

const FONT_THEME = {
   heading_1: {
      // fontFace: 'FontTheme', <- No longer needed since the family is supposed to be the same across weights?
      fontStyle: 'bold' // this is the descriptor weight set in getFonts()?
      fontSize: 58,
      lineHeight: 66,
      verticalAlign: 'middle',
      ...
  },
}

If so, then how am I to use the loaded medium and semibold fonts, for example, since I can’t actually set their weight descriptor?

10

The valid values that can be used for the weight descriptor are described here:

For any number weights you likely need to wrap them in strings. And yes that value should match the fontStyle you specify.

11

hi @chiefcll , @myusername ,
{ family: ‘RobotoBold’,
url: Utils.asset(‘fonts/roboto_regular_new.ttf’),
descriptors: {
weight: ‘700’,
style: ‘normal’
},
},
i have tried to add weight to the fonts as mentioned above,
and i m using
fontFace: 'bold' fontSize: 58, lineHeight: 66, verticalAlign: 'middle',
when using this the font face weight is not changing.

but instead of fontFace when i use fontStyle the fontweight is changed and the font size is also getting shrinked,
i have tried mutliple things but i m not sure where and what i m missing.
can you help here,
thank you in advance.