Fonts are not loading properly

Forge Forge UI Kit and Custom UI
, ,
3

Way too late to help with the original post or the follow up… but for anyone else coming across this I’ve found a solution that works for my use case…

TL:DR; - convert the base64 encoded font into a font file and add it to your React project.

In my case I want to use the ReactViewer package (GitHub - infeng/react-viewer: react image viewer, supports rotation, scale, zoom and so on) to show an image carousel with various options. The buttons for zoom in, zoom out, rotate, etc use a font defined in the package as data:font/ttf;base64,<encoded font data>.

Here’s what I did:
Step 1:
Copy the whole string to your clipboard. This includes the data:font/ttf;base64 and all of the encoded text

Step 2:
Paste it into a Chrome browsers address bar. This will automatically download a file called download. Rename the file to the correct extension for the font (in my case this became icomoon.ttf because that is the name and type of the font).

Step 3
Create a fonts folder to hold the local fonts - for me I put this in my static folder because I want all my macros to be able to share it.

Step 4
Copy the font into that folder.

Step 5
Add CSS to define the font family - for me I already had a CSS file which was imported into my .jsx file so I added it there… but you can add it anywhere.

Step 6
Define the font in your CSS. Note that the URL will depend on where your CSS file is. Mine was in the root of the static folder and the url reflects that.

@font-face {
    font-family: "icomoon";
    src: local("icomoon"),
      url("./fonts/icomoon.ttf") format("truetype");
    font-weight: normal;
}

For me this then ‘just worked’. The package used the local icomoon font rather than the base64 encoded one.

NB: You will still get a console error saying that the original encoded font couldn’t be loaded however this didn’t affect any functionality in any way.

Hope this helps someone. I’m not an expert in this area but managed to fumble my way through a few pages on Google and thought this might be helpful.

2 Likes