Alternative Font Family for text in SVG-file

Question

Context

• https://bjornlarsson.io/i/gone-home-vector

Environment

SVG-file in Inkscape 0.92.3 on Windows 10 Pro x64

Problem

Web browsers doesn't render the "Gone Home" text.

Description

I've made a SVG file in Inkscape that contains text using the Elephant font. Unfortunately, the web browsers^[1] that are to display the image doesn't render the text at all. I assume the browsers doesn't have the right font installed?^[2]

The same problem occurs sometimes when I'm working with CSS for websites. The solution in those cases is to use alternative fonts which the browsers may use, like below.

font-family: Elephant, Arial, Helvetica, sans-serif;

Questions

1. Is it possible to specify alternative fonts in a SVG-file for applications to use when rendering text?^[3]
2. If so, how is it done in Inkscape 0.92.3?

Used Solution

The original SVG-file used flowing text (<flowRoot>) instead of regular text (<text>).

In Inkscape, select the text and use Text > Convert to Text.

Notes

1. I've tested with Chrome, Firefox and Internet Explorer.
2. Despite the font being installed in Windows.
3. Meaning the application will use the second font if it doesn't have the first one and so on.

Answer 1

The problem is that you're using flowed text in your file. Flowed text is not in the SVG standard (it was planned, implemented in Inkscape, then dropped from the standard and kept in Inkscape because of its usefulness).

Use 'Path > Object to Path' or 'Text > Convert to text' (if you need to keep the text as text)

Answer 2

It's either not rendering because that font is not installed on other computers which the SVG is being viewed on, or perhaps there is a a problem with the font file itself, or some incompatibility with Inkscape. I don't think it has anything do with the browser as such. Browsers don't "have fonts" - they can use system fonts, and web fonts. Ultimately I can't really answer this part of your question for sure, since I don't have the font to check it, and the font isn't free. I'm not buying it to find out.

Anyway, the fix is easy enough - and indeed this is what you should probably do with every SVG created for the web, regardless of the font used, to avoid missing font problems.

1. Select all the text boxes in the Inkscape document.
2. click Path > Object to Path. This will turn all the text into outlines
3. Save* the SVG

Now all the text will display properly on every computer, regardless of which fonts are installed.

*Note: When saving the SVG for use on a web page, make sure you do not overwrite your original artwork (which you should have already saved). Choose to save it with a different file name. Once text has been converted to outlines it's irreversible, and you'd need to retype the text again if you want to edit it.