Using W0FF2 or OTF Custom Fonts and themes at org level?

  • Goal: To import and use our own fonts that come in WOFF2 or OTF?

  • Steps: I have added our fonts to theme and mapped them to the storage location

  • Details: In the themes I have created a new custom font and typography but the text does not show

  • Screenshots:

  • Loaded fonts into retool storage so I can link to them via url

  • Mapped to a new font and use the custom font url
    image

  • Mapped the font to a typography

image
Added to button to see font but always show default?
image

However I do not see the changes render on my theme?
image

Hi @R2rhoney, for the import URL we expect a link to a CSS file containing @font-face rules which reference your font files. Using the URL of the font file directly won't work. For an example of the expected format you can refer to the Google Fonts CSS files like https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap.

I have been informed I can import our own fonts .I got instructions from retool that we can via css (see below)?

Richard is this a publicly accessible font? There is no way to upload local fonts to Retool. So far it is only Internet hosted fonts.
If not publicly accessible, you could try to host your desired fonts on an external server - here is an example of this. The font files will need to be in the correct format ie .woff, .ttf, etc. If you want to do this, in your Retool app navigate to settings to add custom CSS. Use the @font-face CSS rule and reference the URLs where your fonts are hosted. For example:

@font-face { font-family: 'YourFont'; src: url('https//YourServer.com/fonts/YourFont.woof') format('woof'); }

It's important to mention that the performance of your app can depend on the reliability of the server hosting your font files. Therefore this is not a solution we recommend. Our recommendation here would be to use publicly accessible fonts through a URL. In the meantime, I will put your account against this feature request

So is this possible
If I create the fonts via advanced settings. How do I reference them in the applications?

We have a public facing endpoint for our fonst woff2 etc
https://www.elsevier.com/fonts/ElsevierSansWeb-Bold.woff2
why does this not work?

Are you putting the URL of a CSS file in the "Import URL" field?

No I am trying to use the css
@font-face {
font-display: swap;
font-family: "ElsevierSansWeb-Bold";
font-style: normal;
font-weight: 900;
src: url("https://www.elsevier.com/fonts/ElsevierSansWeb-Bold.woff2") format("woff2");
}

So when you say public facing fonts ? This link allows me to download the WOFF2 file ? So can I use the font face command in advanced settings css and reference this inside my apps?

No, that's not correct. You need to upload a CSS file containing that content as a publicly accessible URL, and then supply that URL in the "Import URL" field. This workflow doesn't involve the Custom CSS option.

Thanks Jacob,
So please confirm. I can't use any predefined CSS stylesheet or upload any icons or fonts into retool cloud.

Retool will only accept a url api endpoint with a CSS stylesheet. So I have to use @import from a css public endpoint. No ability to upload a woff2 or any other type directly into retool? Unfortunately we don't have a public CSS equivalent of google ? Is that the end of the road for us using our fonts. :frowning:

I also can not use the custom font . Seems to have a bug?

I have tried using this to see of it reads the google fonts but also does not work?

https://fonts.googleapis.com/css2?family=IBM+Plex+Sans

I tried this one and I don't see it show in app , even though I select the theme?

image

Then I select the font family for the typography and it does not render new font.

image

I have struggling to actually see any fonts come through . I can only see the predefined google fonts . No custom fonts can be rendered in retool.

They all seem to default to non found default font...
Has anyone actually used this custom font option in org themes?

Can you please share the organization theme you are having trouble with as a JSON export?