How to embed fonts in SVG Affinity Designer

[All Media Lab]

Hi,

How do I embed fonts in a SVG? In Affinity Designer?

Regards & Thanks,

David

[walt.farrell]

I think you would need to do that manually, @All Media Lab, by:

1. Finding or creating a web font version of the font.
2. Hosting that font on a server.
3. Generating a URL/URI for the server-hosted font.
4. Editing the text of the SVG to refer to that URL/URI.

[All Media Lab]

Hi @walt.farrell Walt,

I need to use the SVG for a animation application and normally you can convert text "Write text as paths" in for example Keyshape (an other SVG animation editor). Is this possible in Designer? This means that the font are sort of "embed" then!

David

[Guest]

7 minutes ago, All Media Lab said:

I need to use the SVG for a animation application and normally you can convert text "Write text as paths" in for example Keyshape (an other SVG animation editor). Is this possible in Designer? This means that the font are sort of "embed" then!

You can convert the text to curves which will preserve their appearance. Check the 'Export text as curves for font independence' check box in the export dialog.

Unfortunately actual SVG font embedding isn't supported.

[All Media Lab]

Wauw!! Never noticed that text there! Thanks very much! Exactly what I need!

David

[Old Bruce]

You can also do it in the Designer Document. Layer > Convert to Curves

I would think long and hard about doing this though, If it is a lot of text you'll have to retype everything if there is a simple one letter typo. 

@Bryan Rieger has the better idea, just do it on export.

[tboettiger]

Although it's a pity AD does not support font subsetting for SVG, there is still a solution: Sometimes (e.g. when translating screens) screen text should not be outlined but exported as text in the SVG. AD transfers all settings (size, position, colour) into the SVG, but misses the font-family and font weight. Since SVGs are simply XML, i.e. text files, you can open them with a text editor and edit them. With an editor such as BBEdit, you can even do some grep on a batch of SVGs and fix typos en passant.

[David in Яuislip]

4 hours ago, tboettiger said:

Although it's a pity AD does not support font subsetting for SVG,

Usually, fonts aren't embedded into an svg so I don't understand the concept of subsetting

A web page can contain a <style> statement like
body{font-family: Arial, Helvetica, sans-serif;}

or you can add your own font like
@font-face{font-family:'mine'; src:url('mine.woff2') format('woff2');}
In this case you can generate the font so that it only contains the subset, obviously mindful of copyright

Svg's can contain <style> definitions

If you really must embed fonts into an svg then
https://observablehq.com/@mootari/embedding-fonts-into-an-svg
is worth a look
The snag with this approach is that the font is only available to the svg and the file size goes ballistic, better to use the @font-face approach

None of this is doable with Affinity programs

[tboettiger]

Thanks for the post. I use SVG for graphical user interfaces that need translation and will be printed. So replacing the text in the interface with the target language works fine in a PDF. I found out that AD in fact keeps the font information in the SVG. SO Even that works. Nice!

[PaoloT]

I second any request for adding font embedding in SVG files. Without this, exporting images to PDF remains the safest choice. This would also mean that they will be likely converted to PNG when preparing a project for the web, instead of remaining vector images in the SVG format.

Paolo

 

[v_kyr]

On 9/14/2022 at 11:25 PM, David in Яuislip said:

The snag with this approach is that the font is only available to the svg and the file size goes ballistic, better to use the @font-face approach

Embedding a font entirely into a SVG file (via base64 encoding inclusion) is also a @font-face definition & usage approach! - See related ...

 

 

[David in Яuislip]

1 hour ago, v_kyr said:

Embedding a font entirely into a SVG file (via base64 encoding inclusion) is also a @font-face definition & usage approach!

Quite right, probably lack of alcohol