Custom font for Custom Component

App Building
,
1

Hello! I have a question about my custom component and custom font inside. I am trying to build Bryntum chart into Retool Custom component. Bryntum uses its own font 'fa-solid-900.woff2'. When I try to start this chart on local machine - everything is good, cause this font is near my css file and they are connected. When I try to push the Custom component to Retool, the font becomes broken. Is it a way to connect this custom font to my Retool Custom Component? Or can I replace their font with another one (maybe from Google Fonts)? I think, there must be a list of fonts approved by Retool. Thank you!

Broken font on Retool:
image

Beautiful font on Local Machine:
image

2

Hi @MrOlegyou - have you tried building the custom component in Retool directly with the font provided? That may be helpful to then build out your current set up.
I have just tried this and can see the bullet points - here a screenshot of the script and the custom component

CleanShot 2024-05-29 at 10.50.35
CleanShot 2024-05-29 at 10.50.351130×659 97.7 KB

Does this work for you?

Here is the html code so you can easily copy it into your app to test things out :raised_hands:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bullet Points with Sub Bullet Points</title>
  <style>
    body {
      font-family: 'fa-solid-900.woff2';
    }
    span {
      font-size: 2em;
    }
    ul {
      list-style-type: square;
    }
  </style>
</head>
<body>
  <ul>
    <li><span>Main Point 1</span>
      <ul>
        <li>Sub Point 1.1</li>
      </ul>
    </li>
    <li><span>Main Point 2</span>
      <ul>
        <li>Sub Point 2.1</li>
      </ul>
    </li>
    <li><span>Main Point 3</span>
      <ul>
        <li>Sub Point 3.1</li>
      </ul>
    </li>
  </ul>
</body>
</html>
1 Like
3

Hey @Alice, thank you for your response! Your idea is very helpful. I develop React Custom Component and it is another feature of Retool (not the iFrame code from your screen). However, I tried to connect the font not from the file, but from the CDN link. It helped. Moral of the story: right now Retool can't work with font-files, but we can connect the font using the settings of Retool or CSS of any Custom Component.

This is what I have added to my React and TypeScript files.

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src:
    url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2')
      format('woff2'),
    url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.ttf')
      format('truetype');
}
1 Like
4

Hey @Alice, for Custom Components, one has to use CDN links to support fonts.

Is there a way to use local files rather than CDN links? (Like the following)

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src:
    url('fonts/fa-solid-900.woff2')
      format('woff2'),
    url('fonts/fa-solid-900.ttf')
      format('truetype');
}

For example, in Bryntum components, the themes are available by default in the node_modules and to make them work with Retool, one has to copy from node_modules and replace the local paths with CDN links.

Note: I work for Bryntum

1 Like
5

Hi @khattakdev The new custom components you develop locally on your machine and publish them to your Retool instance. So in development you would have access to whatever CSS files you're using. For legacy custom components that use cdn links, the Retool instance cloud or self-hosted would just generally need access to wherever the CSS files are. That's probably not the case for local CSS files on your computer, so you'd need to copy/paste in whatever CSS you want to use in your component.