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

6 Answers 6


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"

  • 4
    The second part is clear. Can you please explain the first part , how do I "Expand" the text?
    – Rizwan606
    Commented Feb 11, 2014 at 21:13
  • 6
    @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
    Commented Feb 11, 2014 at 21:16
  • 8
    To clarify this answer, you don't need to do both. Either method will work independently. Commented Oct 27, 2015 at 0:54
  • ⚙️ (Advanced settings for exported file types) → SVG → Font to “Convert To Outlines.” Commented Mar 23, 2019 at 6:59

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!

  • 3
    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. Commented Mar 28, 2016 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? Commented Dec 1, 2016 at 16:49
  • 2
    @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). Commented Dec 1, 2016 at 20:52

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
    Commented Feb 11, 2014 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
    Commented Feb 11, 2014 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
    Commented Feb 11, 2014 at 21:21

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.


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

.st1{font-family:'Roboto Condensed';}
.st5{font-family:'Roboto Condensed'; font-weight: 700;}

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

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/


You can embed the used font directly into your SVG file. This way, the correct font will be rendered independently of the fonts that are installed on the user's system. The CLI tools Nano or svg-body can do this. But both tools only support Google fonts.

Disclaimer: I'm the author of svg-buddy. I hope that this open-source tool is useful for others.

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