Skip to main content
M
michaelm71636120
Inspiring
February 18, 2017
Question

Font in SVG not correctly displayed on Chrome

  • February 18, 2017
  • 3 replies
  • 8299 views

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!

    This topic has been closed for replies.

    3 replies

    M
    Martin264966803k8e
    Participant
    October 8, 2022

    I have the same problem!

    T
    Test Screen Name
    Legend
    October 8, 2022

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

    postrophe
    postrophe
    Inspiring
    February 18, 2017

    Hi

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

    Pierre

    M
    michaelm71636120Author
    Inspiring
    February 18, 2017

    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
    Community Expert
    Monika GauseCommunity Expert
    Community Expert
    February 18, 2017

    Post the link to your page.

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

    Monika Gause
    Community Expert
    Monika GauseCommunity Expert
    Community Expert
    February 18, 2017

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices