NO BUG: Fonts inside SVG don't show properly

Hi !

I created an SVG with Affinity Designer with Teko font. I added that SVG on my page but the text is not in Teko font.

For information, I use that font on my theme and I added it as custom font via Brick Builder settings.

Sincerly,
ClemJam


Hey @ClemJam,

that’s not a Bricks bug. It will look the same if you open just the SVG file in the browser. That’s because the browser does not know the font you’re using in your SVG and falls back to a default font.

You can fix this by checking the “export text as curves” setting when exporting your SVG:

Best,

André

Hi André !
Thanks for reply ! I know the way you suggest but if I export text as curves, the files is way bigger (12ko va 120ko) !

I thought I could use the custom font from my theme. So in your opinion it’s not possible ?

Best regards,
ClemJam

That should work. I just tested it. Can you share a link?

Best,

André

Of course, I just sent you the link ! Thanks and hace a good way !

IS the SVG code embedded inline as that exposes the SVG code to the DOM and can enable inheriting styles. Otherwise, if the SVG is imported as an image it is outside the DOM and may be the reason why the font is not working inside the SVG.

Hi !

It works with SVG element instead of image element, thanks ! :pray: And it’s not mandatory to add the code inline, the SVG file works fine.

Good day !

@ClemJam Using the SVG element actually means adding it inline (in contrast to just referencing it using a regular image element)… :slight_smile:

1 Like

You got me interested as to how the SVG block worked as I had not used it before. As I suspected, the SVG block does embed the code directly to expose the inner code to the DOM.

It is good to know though that I can use the SVG block as another quick alternative to embedding the code as I’m still new to Bricks. Cheers :+1: