Alternative Font Family for text in SVG-file

Context

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

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)

Attribution
Source : Link , Question Author : Björn Larsson , Answer Author : Moini

Leave a Comment