Embed Adobe fonts in SVG for website

[pierrickb28882236]

Hello,

For a particular website, I need to create SVG images on illustrator, which contain large chunks of text. I can't export the text as outlines as the weight of the SVG file would be too heavy, so I need to export the text as such. The fonts used are Adobe fonts installed in Illustrator through Creative Cloud. For example, Miller Banner Bold. I export my SVG image and place it on a web page, which contains the "Web project" code generated on the Adobe Fonts website and pasted in the head tags of the website. However, the Adobe font doesn't render online... Here's an example:

https://pierrickbaquie.com/example-23-9-23.html

May someone please let me know whether I've done something wrong or whether this is simply not possible? Any help would be greatly appreciated 🙂

[Monika Gause]

You might want to do the styling via CSS and call that in the SVG code. But you can't do that in Illustrator.

[pierrickb28882236]

Thanks for taking the time to reply 🙂

[m1b · Accepted solution]

Hi @pierrickb28882236, this question is outside my sphere of competence, but my simple understanding is that you would load the web font version of Miller Banner Bold (via the html, or css—you will need a URL for it) and then the svg should appear in the font, assuming that the font is specified correctly in the svg. Currently your svg has a text element the inline attribute:

font-family="MillerBanner-Bold, 'Miller Banner'"

 Is that the correct specification for the font? I'm not sure, but I would hope it was.

Also, maybe this page will help? Sorry if I've misunderstood your question and giving you unwanted basic info.

- Mark