2

I have just added an SVG image to my personal website for the logo but when I view the image on my mobile device it's displaying, but in a different font. That's my problem. How do I fix this?

The way I am adding the SVG is as I would a normal image. 

<img src="images/logo.svg">

I have a feeling this is not the correct way to add SVG images, I also have no fallback for browsers that do not support SVG so if anyone could offer advice on how to do that, that would be great.

Thanks

J Knight
  • 27
  • 1
  • 5
  • You could always take a screen shot of the SVG and edit it in a paint editor to make it PNG – Dylan Wheeler Jul 08 '16 at 14:04
  • Yes, but I would prefer to keep it SVG for retina displays and create fallbacks for browsers/devices that do not support SVG images. I just don't know how to do this. – J Knight Jul 08 '16 at 14:07
  • See [this post](http://stackoverflow.com/questions/9689310/which-svg-support-detection-method-is-best) it goes over SVG capability checks. You can probably tweak the JavaScript to change the image it's trying to display if it can't support SVG – Dylan Wheeler Jul 08 '16 at 14:12

2 Answers2

2

If you create .svg from Ilustrator (e.g), first, be sure to create outlines from your text object, then, export object to .svg file, wich will be read from any (modern) browser.

Cinder Biscuits
  • 4,880
  • 31
  • 51
JORGE REDONDO
  • 21
  • 2
1

Displaying SVG images using <img> has quite good browser support nowadays: http://caniuse.com/#feat=svg-img so I personally would recommend it.

If you need to support very old browsers like IE8 or Android 2.3, I would use

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")

to check for feature detection (source: https://css-tricks.com/test-support-svg-img/) and use a PNG file then (by replacing the src attribute of the <img>).

To include a custom font in a SVG, one can include it in the SVG's <def>:

<defs>
  <style type="text/css">
    @font-face {
      font-family: 'Gunny Rewritten';
      src: url('GunnyRewritten.woff');
    }
  </style>
</defs>
JSchirrmacher
  • 3,243
  • 2
  • 19
  • 27
  • Do you still have a question regarding this issue? If not, don't hesitate to accept it. :-) – JSchirrmacher Jul 12 '16 at 06:15
  • Sorry I have been away at the weekend. I'm still trying to solve this problem, yes. I'm wondering if the problem is that i'm using a font that isn't supported by the browser; which is "Gunny Rewritten". It's also not on google fonts so I can't embed it in the SVG code. As I said, the SVG displays correctly using any desktop browser, it's just when I use google on my iPhone 6 or Safari. – J Knight Jul 12 '16 at 10:14
  • If the font is non-standard nor embedded, the browser cannot display it. It may be displayed if your local system has the font installed, but nowhere else. If you have a valid license for the font, you should embed it. – JSchirrmacher Jul 12 '16 at 11:18
  • How would I go about embedding the font? I'd rather not change the font you see. – J Knight Jul 12 '16 at 14:04
  • With css. Define the font resource in a ` ` – JSchirrmacher Jul 12 '16 at 14:49
  • It still isn't happening for me, it displays fine on desktop browsers.. it's hosted on a server so I don't see why it works there and not on the iPhone browsers. I have added that line you suggested ^ ...should that work, or do I need to change the SRC url? – J Knight Jul 12 '16 at 15:33
  • Yes, you need to change it, it's only an example. It should contain the correct path to your web font file on your server. – JSchirrmacher Jul 12 '16 at 15:42
  • It's working now, thanks for the extended help! Appreciated. – J Knight Jul 12 '16 at 15:57