I'm trying to see if there's a quick and dirty way to export Adobe Illustrator files as SVGS that use the web font names on my company's website instead of the system font names on my machine. Is there a basis script that can do this?


  • 2
    What web-font names? If you're using fonts with @font-face you can give them any name you like for example, the name has nothing to do with the actual font itself.
    – Cai
    Jun 28 '17 at 19:52
  • I'm making SVGs for a website that has their css styles pre-defined. I need to match my font-families in the SVGs to their sheets. Jul 2 '17 at 13:48

As mentioned by Cai, you can define the css font-name to anything you like.

font-family Specifies a name that will be used as the font face value for font properties. MDN - @font-face

If the design you are integrating with references a font called MagicalFont it might be defined as

@font-face {
  font-family: MagicalFont;
  src: url(MagicalFont.ttf);

To update this to use your new illustrator font you can simply change the path reference to the font file.

@font-face {
  font-family: MagicalFont;
  src: url('Magical Illustrator Font.ttf');

The CSS will still function, anything defined to use font-family: MagicalFont will now be updated to the new font.

  • I can't do this. I can't alter the css sheets on the page, only add SVGs to the page, exported from AI. Jul 5 '17 at 16:46
  • @incodeveritas You wont need to alter the css. If you update the font file. I'm confused what you're trying to do. Update a font-file or export an svg that uses a web font?
    – Lex
    Jul 5 '17 at 23:02
  • The font-file is a css file, no? I can't change any css on the page. Jul 6 '17 at 1:05

You can edit the SVG files in a text editor after they've been exported from Illustrator.

Merely place the font-face CSS inside the SVG file.
It's still CSS, but won't require editing any existing CSS files.

More information can be found at StackOverflow.com -> Custom Font in svg

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.