I’m trying to set up an action that creates versatile text-containing SVG files which can be used in various places including Wikimedia Commons. The only problem is, Wikimedia Commons only supports a narrow set of copyright-free fonts: of which the most widespread are fonts like DejaVu and Liberation which people are very unlikely to have (unless they’re on Linux).
The recommendation is, like the old days of the web, use fallback font families in your SVG. For example, for something with bog standard sans-serif text, you might use
font-family: Liberation Sans, Helvetica, Arial, sans-serif– Wikimedia can’t use Arial or Helvetica, while Liberation Sans is a font they do support with near-identical letter sizing, spacing and styling to these two, so your layout won’t break either way.
This would be perfect, but the SVG files are coming out of Illustrator, which doesn’t have any obvious facility for this: it seems to be strictly one font only.
Is there any way to force Illustrator to output SVG with font families like
font-family="Liberation Sans, Helvetica, Arial, sans-serif"instead of like
For my particular case there are hundreds of these and it’s a process I’m setting up as actions for a client to then manage themselves, by staff with limited access to non-standard software, so I’m trying to avoid non-illustrator steps like editing the SVG source code if possible.
Answers based on other programs like Inkscape or (better) online SVG editors would be very welcome, especially if they can be used with something that works like Illustrator’s action batches on a batch of files at once (but this isn’t essential).
Leaving a “last resort” method here. Not ideal since it involves mucking about with code and seems to require access to a code editor. The ideal method would involve standard design software where it’s harder to accidentally break things.
WARNING: because of a ludicrous Adobe bug in Illustrator CS6, having multiple fonts of which one or more are not installed on your machine causes Illustrator CS6 to fail to open SVGs with the error below – even if there’s an earlier font in the list that is installed.
The operation cannot complete because of an unknown error [CANT]
Professionally made (non-Adobe) software like web browsers, SVG editors etc handle it fine, it’s purely a bug in CS6 which Adobe aren’t interested in fixing.
But if anyone is in a similar position and can muck about with code and regex, here’s an example set of steps based on using Sublime Text (most code editors have similar features):
- Find > Find in Files, then make the regular expressions button is pressed
- Put this in “Find:”
font-family=".*?"(this assumes double quotes are used)
- Choose your folder in “Where:”
- Put what you want in “Replace:” (e.g.
font-family="Liberation Sans, Helvetica, Arial, sans-serif")
- Run it, then File > Save All