Adding custom fonts on CSS

Saola Animate Support Questions
1

Problem: I need to add a custom font using CSS, since it’s not a Google Font or a System Font. Also I can’t embed fonts because are not supported files (I can only use .html, .css, .js, and image file extensions).
Even if it works on browser preview, I’m not able to see it in the Saola scene, making it hard to adjust font size every time because I’m forced to refresh the preview page.
This is the problem: I need to see real time the custom font on the scene.

This is what i did:

  1. I’ve edited my HTML adding in the tag this code:
    @font-face {
    font-family: 'FontName;
    src: url(https://myfonturl/FontName.ttf) format(‘truetype’);
    font-weight: normal;
    font-style: normal
    }
  2. On the Properties panel, I manually wrote the font name because of course it’s not avaiable on the font list

Is there any work around to see the custom font in Saola?

Saola Animate version: 2.7.1

OS: Windows 10 Pro

Notes:

2

Hi Axoren,

Please make sure that you enable cross-origin resource sharing for your font (at https://myfonturl/FontName.ttf) so that it can be accessed by file:// protocol.

For example, if the server where you host your font use Apache, you can add a .htaccess file with the following content to the font folder so that those fonts can be accessed by any domain/protocol:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Regards