• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Font in SVG not correctly displayed on Chrome

Explorer ,
Feb 17, 2017 Feb 17, 2017

Copy link to clipboard

Copied

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!

Views

5.7K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 17, 2017 Feb 17, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Feb 17, 2017 Feb 17, 2017

Copy link to clipboard

Copied

Hi

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

Pierre

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 18, 2017 Feb 18, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 18, 2017 Feb 18, 2017

Copy link to clipboard

Copied

Post the link to your page.

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 08, 2022 Oct 08, 2022

Copy link to clipboard

Copied

I have the same problem!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 08, 2022 Oct 08, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 08, 2022 Oct 08, 2022

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines