Font in SVG not correctly displayed on Chrome

[michaelm71636120]

Hi,

I have an Illustrator file with some drawings and some text in a specific font (which is installed on my computer).

I save this file as SVG and embed this SVG in a website.

My problem: If I view the website the font is displayed correctly on any browser - except for Google Chrome on Windows. Curiously it is even correctly displayed on Google Chrome on Mac. However, in the Windows version the text is distorted and changed into another font.

I tried different settings when saving the file but nothing has worked so far. I don't want to transform the text into vector shapes as this would increase the file size dramatically.

Any ideas what could be wrong and what to do about it?

Thank you very much in advance for any help!

[Monika Gause]

You will need to post a link to the website that has the SVG embedded.

Also: post your setup in Chrome. Maybe it overrides the font settings from the web page with its own stylesheet.

Your question actually is about web development, HTML/CSS and about browser setup. Not about Illustrator. So you might want to consider posting in a different forum.

[postrophe]

Hi

Monika is right, but : except for Google Chrome (what exact version #) on Windows (what exact version).

Pierre

[michaelm71636120]

I think it is more an Illustrator question. I have also text directly on the webpage (in the same font, not in Illustrator SVG) and this font is displayed correctly in Chrome. So it must be something with the SVG in Illustrator.

I use Windows 10 and Chrome 56.0.2924 (64-bit).

That's my CSS:

@font-face {

font-family: 'FontName';

src: url('font-name.eot');

src: url('font-name.eot?#iefix') format('embedded-opentype'),

  url('font-name.woff2') format('woff2'),

url('font-name.woff') format('woff'),

url('font-name.ttf') format('truetype'),

url('font-name.svg#svgFontName') format('svg');

font-weight: normal;

font-style: normal;

}

Here, 'font-name' is of course replaced by the correct name of the font. "svgFontName" is replaced by the correct font Id which is found  in the font's CSS. These settings cannot be totally wrong as any other text (not in Illustrator SVG) is displayed correctly.

[Monika Gause]

Post the link to your page.

This can't be solved with just a snippet of complex interacting code.

[Martin264966803k8e]

I have the same problem!

[Test Screen Name]

Martin, if you have the same problem, please post the same info that we asked for.

[Monika Gause]

The font is installed on your computer, but not on the website?

You might want to read: https://vecta.io/blog/using-fonts-in-svg