What is the new syntax for SVG fonts?

Question

I was browsing SVG fonts in MDN, where it is mentioned that <font-face>, <missing-glyph>, <hkern> and <vkern> are depreciated. Only <glyph> is not depreciated. It does not mention anything about a recommended way of specifying the font face properties.

The W3C SVG recommendation also does not say anything about an alternative way of specifying SVG fonts, apart from noting that everything in the <font-face> can be done equivalently in CSS. It does not provide any alternative for <hkern> or <vkern>. I intend to create a standalone SVG file, not to be modified by the site CSS, so I would like to keep the whole font definition in the SVG.

So, what is this obscure new way of specifying SVG fonts?

Answer 1

"SVG fonts" as a data file that uses SVG markup to define a font resource has been deprecated; it turned out to be a bad idea, and ended up not addressing the issues that typography on the web needed addressing. It was added in SVG 1.1 but removed again in SVG 2.0, and almost all browsers that did end up adding support for it removed that support again since.

Instead, all browsers now support "webfonts": regular OpenType fonts packed for the web using the "Web Open Font Format", aka WOFF/WOFF2, based on the OpenType format, which supports several different outline types:

• TrueType (quadratic curves and compound glyphs, often with ttf extension, but the extension is literally irrelevant)
• Type2 in CFF/CFF2 (cubic curves and arbitrary subroutines, often with otf extension, but again: the extension is wholly irrelevant)
• Embedded bitmaps (yes, OpenType fonts can indeed be true bitmap fonts, with as many different bitmaps as necessary to cover as many pixel sizes as necessary)
• SVG (that might be surprising, but SVG is the exact same kind of vector graphics language as TT and CFF/CFF2 are, so it made sense to allow glyph outline data to be specified using SVG as well, particularly for fonts that need explicit colour palettes, like emoji fonts)

So if you absolutely need to keep your SVG data around, then make yourself an OpenType-with-SVG-outlines font, and then pack that for the web as a modern WOFF2 (or older WOFF) and you're good to go. There are plenty of online tools to do that for you, but you can also just use something like the open source FontForge application if you want a font that only includes what you need, instead of what online tools foist into them.