Embed Adobe fonts in SVG for website

Question

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 &#128578;

m1b · Accepted Answer

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, &apos;Miller Banner&apos;"

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

Monika Gause · Answer

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded