Search code examples
csssvgfontsresponsiveness

SVG image falling back to Times New Roman when viewed on a mobile device?

I have an SVG image on my website (I do not have an SSL certificate yet so it may display a security error before you enter) and the font I had used when making this image was Segoe UI. On my desktop it looks fine however whenever I look at it on a mobile device it shows up as Times New Roman. I have tried this as a work around but still no good:

@media (max-width: 576px) {

 #heroimg {
    font-family: Arial, sans-serif;
 }

}

My thought process when adding this code in my css would be that incase whatever device can't load the font, load Arial.

Solution

  • You need to convert all the text to outlines before uploading the SVG.

    You can do this in Adobe Illustrator by selecting the text and going to Type > Create Outlines