Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Webfonts do not work in SVG background images
See original GitHub issueI want render a font-awesome character in a SVG text element:
<text x="0" y="20" style="font-family: FontAwesome" fill="blue">FA</text>
A “user” icon is supposed to appear, followed by “FA”. The user icon does not appear:
The SVG is rendered dynamically by the means of a background-image function.
See the fiddle: https://jsfiddle.net/jri_/b23Lg89f/
Issue Analytics
- State:
- Created 6 years ago
- Comments:12 (3 by maintainers)
Top Results From Across the Web
Svg won't use the installed webfont - Stack Overflow
But the SVG is being loaded as an <img> (actually a background-image ), so all it knows about is what is in the...
Read more >Web fonts in SVG images do not work - css - Talk TiddlyWiki
Hi! I want to embed SVG images in a wiki that contain custom web fonts. The image is displayed correctly, but the text...
Read more >5 Most Common Problems Faced by SVG Users - Vecta.io
1. Missing fonts · A. Wrongly declared font name · B. You're using <img> or background image to embed your SVG · C....
Read more >Using Custom Fonts With SVG in an Image Tag | CSS-Tricks
When we produce a PNG image, we use an <img> tag or a CSS background, and that's about it. It is dead simple...
Read more >Scaling of SVG backgrounds - CSS: Cascading Style Sheets
When using an image with no intrinsic dimensions but an intrinsic ratio, things work similarly. contain case. background: url(no-dimensions-1x1- ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This is a browser security feature at play
See: https://stackoverflow.com/a/42405731
@ocanty Thank you very much for the link! That is very relevant information.