Hi. I've got a strange issue where my SVG seems to have "dropped" the text information that's supposed to be in the SVG. When making the SVG, I had chosen the font Roboto for my website logo and that's how it appears in Inkscape and how it was appearing at first on my website. But when I visited my website the other day, the SVG is just rendering as Times New Roman. When I open the SVG standalone in a browser page, it does the same, i.e., it just renders as Times New Roman when before it would render as Roboto.

Please see the attached image. As you can see where I've pointed out the logo open in my browser, it's in Times New Roman. But as you can see in my Inkscape window, it's Roboto as it should be. Also see to the right in the image, when I open developer tools on the SVG in the browser, the browser is showing that the font for the logo is saved within the SVG as Roboto but yet look below and developer tools shows it renders as Times New Roman. I've pointed that out with arrows there bottom right. The SVG also appears to not have the spacing correct between the logotype and the logo image. There should be a space between the logotype text and the blue logo as you can see in the Inkscape window. But when in the browser, that space is gone.

What could be going on here? Thanks.

Websites may not have access to local fonts. 

I think Roboto is a web safe font for google software / android phones because it is also a google web font. 

For SVG ( unless you want to embed the font as base64 woff2 ) 

Adding the below to the SVG should fix cross platform.

<style xmlns="http://www.w3.org/2000/svg">
@import url('https://fonts.googleapis.com/css2?family=Roboto');        
    </style>

It's always good to have a couple of completely stock virtual machines ( you can download images free from microsoft etc )

So you can test outside your own system. 

Hi @inklinea. Thanks a lot for that. I think you're definitely right. Can I just check how to properly add that import style into the SVG though? So far not getting it to work. I tried to edit the SVG in a Notepad and pasted the above style in, but that just throws an error. Thanks again.

I've uploaded an example which should be working:

https://www.raincloud.co.uk/junk/roboto.svg

I think there are some online systems which let you log into various mobile platforms / browsers on remote systems etc to check all this if you are a developer.

I use the virtual machines because they are free :)

@inklinea you're a legend. Thanks. It's sorted now.

@inklinea or rather, it's close to sorted. For some bizarre reason, it's still giving that issue in WordPress even though the entire website is Roboto and all other text except the logo renders as Roboto on every device and browser. So, Roboto should be cached for the visit to the site. But yet even with the import style now embedded in the SVG, it's still just showing as Times New Roman on the site. It really wasn't doing this before. The SVG logo used to show as Roboto when visiting the site on any device. Something's suddenly changed with WordPress or something. The standalone SVG is working fine when opened in any browser. Would you have any idea as to why it's giving issues when uploaded to WordPress?

I'm not a webdesigner.

However I would suspect it's something to do with the location of the css code / style hierarchic  if the svg is in an html file ? 

The google page font pages let you generate <link> or @import code samples if you click on 'select' to the right of the font sample

I think an inline svg should be able to access elements in the style element of the webpage. 

If you search for 'wordpress custom css' there are various guides. 

@inklinea Okay, thanks. That was helpful. I actually found a plugin that will allow me to style inline SVGs and that's pretty much done the trick. There's still some little glitches I've got to iron out. I think WordPress has updated something and fixed something that wasn't broke which has caused this issue. But anyway, getting there. Thanks for the help.

Hi guys, I might be missing something here, but is it not the usual method to cope with this type of issue by doing a Object to Path,

downside is to lose ability to use text tool to do further edit of text and produces larger svg file, upside it ensures maximum browser compatibility.

Yeah, I suppose that could also work. I haven't gone that route because I might want to change some things around. For now, tweaking WordPress to allow SVG data to print to the html file has sorted out the issue. This seems to be a WordPress-specific issue that comes from some recent update.