24

Hi I am new to illustrator and created an image that uses "Skia-Regular" font. But when I save that image in .svg format, it changes the font type. And when I open the .svg format file in browser the font is completely different. Can anyone please tell me what am I doing wrong. I have opened the .svg file in notepad++ as well and it says font-family="'Skia-Regular' as well bu still the font is not Skia Regular.Any help will be appreciated. Thanks

Image is also attached for reference Image attached

31

If you want to be sure that the text will have the same appearance in every case -

First, you can Expand the text before saving as svg

Second, in font part of saving dialog you can press "convert to outline"

  • 2
    The second part is clear. Can you please explain the first part , how do I "Expand" the text? – Rizwan606 Feb 11 '14 at 21:13
  • 5
    @Rizwan606 you select the text with a selection tool and press menu Object and there you press Expand (it will convert the text to shapes), alternatively you select the text and then RightClick and shoose Create Outlines – Ilan Feb 11 '14 at 21:16
  • 5
    To clarify this answer, you don't need to do both. Either method will work independently. – Simon Woodside Oct 27 '15 at 0:54
  • ⚙️ (Advanced settings for exported file types) → SVG → Font to “Convert To Outlines.” – Константин Ван Mar 23 at 6:59
9

The reason why the font does not render correctly to the actual font type is because, when the SVG is saved using the Illustrator application. The application automatically converts the design to code. And if observed closely the font name within the code does not match to the actual font installed within the system.

To overcome the issue of font rendering you will need to copy the SVG code from Illustrator and modify the font name to match the name of the font installed in your system. (Ex: Font name within SVG code which from Illustrator "Arial-Regular", but the name of the font installed in your system is "Arial Regular". Here you will need to modify the code to have Font-Family as "Arial Regular".)

This shall solve your problem without needing to converting fonts to outline.

Hope this helps!

  • 1
    This is exactly it! Illustrator uses the PostScript names for fonts when you do a File > Save and select SVG. You end up with "MyriadPro-Regular" instead of "Myriad Pro" as you might expect and your browser doesn't work with PostScript names the way Illustrator does. A workaround is to use File > Export for saving SVGs as it will export the proper family name instead of the PostScript name. – Michael Thompson Mar 28 '16 at 14:13
  • @Michael Thompson when I choose File > Export, SVG isn't one of the options. I'm using CS5. Is this an option in earlier/later versions? – Max Starkenburg Dec 1 '16 at 16:49
  • @MaxStarkenburg: the Export menu changes wildly between versions. In newer versions there are three ways to save/export to SVG: File > Save As > (choose SVG type); File > Export > Export As... > (choose SVG type) and File > Export for Screens > (add SVG format). – Michael Thompson Dec 1 '16 at 20:52
4

As you noted, the typeface is a reference to a font file which may (or may not) be available to the system which attempts to open the svg. The solution is to convert your type to paths so that the curves are stored explicitly within the file.

As to why the browser may not be aware of the font face you are trying to reference, that is unclear since I am presuming you are testing on the same computer that you used while creating the svg file. It is plausible that the font is selectable within Illustrator but not formally installed at the OS level.

  • Yes I am testing on the same computer on which I am creating the svg file. And can you please correct me if I am wrong. I took your first part of the reply as I have to give specific path to the font .ttf file of Skia Regular in Font-Family property? – Rizwan606 Feb 11 '14 at 21:16
  • It is up to the browser to match the typeface name to an installed font, so "no" you won't be giving it a path to a ttf. The reference is similar to the css font-face syntax, which allows a comma-separated list of font-family styles. The browser may identify the font name differently. – horatio Feb 11 '14 at 21:20
  • Note that for logos and distributed matter of this nature, (pdfs etc) where the typeface matters, it is a good idea to embed the font or convert to paths. So resolving this reference may not be a good solution because you rely on 3rd parties to have the proper typefaces installed already – horatio Feb 11 '14 at 21:21
2

archive for web:

  1. use google fonts.
  2. using only two font families max.

Export: fonts: (text: svg, subconjunto: none). properties svg: (style element).

within the styles of the resulting file, edit it:

  1. attach line "@import".
  2. attach "px" to all font-size.
  3. rename the font name.

result:

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
body {}

.st0{fill:#868686;}
.st1{font-family:'Roboto Condensed';}
.st2{font-size:14.414px;}
.st3{letter-spacing:55px;}
.st4{fill:#1D1D1B;}
.st5{font-family:'Roboto Condensed'; font-weight: 700;}
.st6{letter-spacing:51px;}
.st7{letter-spacing:45px;}
.st8{letter-spacing:40px;}

  • 1
    This answer is too terse. I can't even tell if it refers to an SVG file or some other solution... – jiggunjer Aug 24 '17 at 4:38
1

Chances are your PC does not have the font family (Skia-Regular) font file available locally. So when you open your SVG file on your browser, it renders using the default system font which is Times New Roman most of the time. There are several workarounds:

  1. Use @import to refer to Google Fonts API (but the catch is, depending on how you embed your SVG images on your website, this only works well if you're using inline SVG & object tag SVG)
  2. Convert your fonts to path (which increases your file size and results in blurry text as you lost ClearType rendering)
  3. Embed fonts into your SVG file using Nano

You can read more on using custom fonts in SVG here: https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.