: Preserving font type in illustrator SVG file 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.

@Ravi4787994

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!

Vote Up Vote Down

@Angie364

archive for web:


use google fonts.
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:


attach line "@import".
attach "px" to all font-size.
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;}

Vote Up Vote Down

@Gail6891361

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.

Vote Up Vote Down

@Angela777

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"

Vote Up Vote Down