Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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 
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"
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!
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.
archive for web:
Export: fonts: (text: svg, subconjunto: none). properties svg: (style element).
within the styles of the resulting file, edit it:
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;}
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:
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.
