Cross-Browser Embedded Font in Svg Image

SVG embedded font gets overwritten in Internet Edge

It seems to be a known issue of Edge Legacy. I found a similar thread and others have reported the issue. You could also provide your feedback in Edge Legacy.

As a workaround for now, if you don't want to use <object> tag, I think you can only save the picture as a png file and use png pic in Edge Legacy.

Is there any way to build svg with cross-origin fonts in browser?

So I've come up with creating proxy on my server for fetching cors-fonts and css.

I check styles font imported styles and font-face rules and create new ones for svg with embedded fonts and styles.

Is there a cross browser way to include fonts in web applications in 2019?

If usage of webfonts is disabled in the security settings, there's no real way around them. If there would be, it'd probably be a nasty hack as you'd deliberately circumvent Windows security settings.

Time for Plan B, then. I wrote about this specific issue, and in short you'd have to use nice looking system fonts as fallbacks for text, and an image-based system for icons. E.g. use PNG or SVG images. But if you're going that route you might as well replace the icon font with proper icons for all browsers.

Good luck, and kudos for the nicely written question by the way.

---

Related Topics