When converting SVG icons to a font, the conversion seems to strip away everything but the SVG paths.

This makes sense, as that's what a font is, a collection of numerically (or mathematically) defined bezier-paths (or at least thats my perception of a fonts underlying nature).

Does anyone know if there is anyway to keep anything other than the paths when converting SVG icons to a WOFF font, such as:

  • Color
  • Stroke
  • Gradient
  • etc...

If paths are the only thing that can make it through the SVG -> WOFF conversion, then a simple NO is an acceptable answer, as it will let me know not to waste my time searching for somthing that doesn't exist.

If it can be done, a programatic solution would be the holy-grail for me, however, the name of a program/package or whatever would be just as well.

  • There's no limit to creativity if using a font. Typed text (or icons in a font) can be turned back into outlines (paths), and these can be altered: gradients, fills and strokes can be added in any vector image editor. You can output these as SVG, and use SVGs directly on a web page.
    – Billy Kerr
    Jul 7, 2022 at 9:20
  • Its a bit of a tradeoff your creativity limitation opens up creativity for others. The problem with colored and textured fonts is that it limits normal users ability to change color etc. We allready had this feature in previous generation fonts but it was removed because designers on both side of the fence (font makers and font users) failed to use it to their advantage.
    – joojaa
    Jul 8, 2022 at 9:46

1 Answer 1


Fonts usually only contain outline-data, however, thanks to the growing popularity of emojis, a few systems for including color in fonts have been developed.

One of these is 'OpenType-SVG' which lets you include full SVG inside the font, but it seems like support for it is still kinda poor at this point. On top of that, I don't know if that can then be converted to WOFF either (I mean, since .woff files are just OpenType fonts with extra metadata and compression, it's possible that it can be done, but I can't find anything that confirms that).

Anyway, you can read more about it here, here and here. Also check out these tools.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.