Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question

2 Answers 2

up vote 1 down vote accepted

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"

share|improve this answer
    
The second part is clear. Can you please explain the first part , how do I "Expand" the text? –  Rizwan606 Feb 11 at 21:13
    
@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 at 21:16
    
Thank you so much. Works great! –  Rizwan606 Feb 11 at 21:19

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.

share|improve this answer
    
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 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 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 at 21:21

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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