I looked around for an answer to this question, but had no luck. When I search for 'type' and '.svg' I get a lot of answers to questions about using .svg files to display typefaces. But I ran into an issue displaying type inside .svgs.
The other day I was baking out a few .svgs from illustrator for a project. Everything worked fine, I had scalable graphics on my site and they looked awesome. I then viewed my project on a third party computer and noticed all the typefaces in my .svgs had changed. I quickly realised that this was because the browser was registering type as type and not outlines within the .svg. This third party machine didn't support the typeface and was replacing it with a system font.
So I just went back through and expanded my text, then baked the text out as outlines and problem solved. Sorta. From a scalability standpoint—as well as maintenance—this solution doesn't work for me. I need to be able to edit the text in future. So it must remain as type inside the .svg.
So I then tried styling up my img tags with the correct font-family and calling in the typeface with @font-face. So that the default font family on images was correct thanks to css. This hasn't worked.
I still have the issue where if someone doesn't have a font stored locally, that lives within an .svg then a system font is used instead. Styling font-family of the img tag hasn't worked with the help of @font-face.
Does anyone know how to style type within an .svg with the help of .css? Is this possible?
Thank you in advance.
EDIT: Here is my code if it helps someone visualise what I am trying to do:
<style>
@font-face {
font-family: OpenSans;
src: url('../fonts/OpenSans-Bold.ttf');
}
img {
font-family: 'OpenSans';
}
</style>
<img src="img/test.svg" alt="a big test">
The .svg itself is a string of text in OpenSans Bold. I then disable the typeface on my machine and the string inside the .svg shows up as a serif font in the browser. This code above does not revert the string to OpenSans Bold :(
