Search code examples
svgfontsresponsive-designfont-facewebfonts

Live Type fonts won't appear after exporting to SVG from Illustrator CC

I am attempting to export several of our design files for a browser based customizer we are building for our site. As the title states, I am running into an issue where the live type will not appear in browser.

Not only am I using 3 system fonts, I have included 4 different formats of each one (ttf, woff/2, otf, and svg) in the root dir of the SVG. Regardless of what I've tried I cannot get the text in the center of the badge to appear, nor can I get any of the text to display the appropriate font. Below is the SVG code (I have left out font-face declarations for the Book font):

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 198.43 119.06" style="enable-background:new 0 0 198.43 119.06;" xml:space="preserve">
<defs>
  <style type="text/css">
    @font-face {
     font-family: 'Algerian';
     src: url('Algerian.eot');
     src: url('Algerian.woff') format('woff'), url('Algerian.ttf') format('truetype'), url('Algerian.svg#Algerian') format('svg');
     font-weight: normal;
     font-style: normal;
    }

    .st0{display:none;}
    .st1{display:inline;}
    .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
    .st3{fill-rule:evenodd;clip-rule:evenodd;fill:#232020;}
    .st4{fill:#231F20;}
    .st5{font-family:'STSong';}
    .st6{font-size:9.4647px;}
    .st7{fill:none;}
  </style>
</defs>

<g id="Image_xA0_332" class="st0">
  <g class="st1">
    <rect x="51.55" y="58.03" class="st2" width="93.61" height="9.06"/>
  </g>
</g>
<g>
  <path />...
  <polygon points="110.4,18.87 110.41,18.91 110.37,18.9     "/>
</g>
<g id="Right_Line_1_">
  <g>
    <rect x="132.27" y="61.86" class="st3" width="9.74" height="0.88"/>
  </g>
</g>
<g id="Left_Line_1_">
  <g>
    <rect x="54.69" y="61.86" class="st3" width="9.74" height="0.88"/>
  </g>
</g>


<text transform="matrix(1 0 0 1 65.5015 64.6816)">
  <tspan x="0" y="0" class="st4 st5 st6">EST.</tspan>
  <tspan x="20.15" y="0" class="st4 st5 st6"> </tspan>
  <tspan x="21.95" y="0" class="st4 st5 st6">06.27.2014</tspan>
</text>

<path id="SVGID_x5F_1_x5F_" class="st7" d="M8.19,96.94c0,0,38.04,5.57,89.4-5.56c0,0,59-14.38,92.17-0.62"/>

<text>
  <textPath  xlink:href="#SVGID_x5F_1_x5F_" startOffset="0%">
    <tspan style="fill:#FFFFFF; font-family:'BookmanOldStyle-Bold'; font-size:16.6697px;">ALEX &amp; MARCIA</tspan>
  </textPath>
</text>

<path id="SVGID_x5F_2_x5F_" class="st7" d="M32.56,57.72"/>

<text>
  <textPath  xlink:href="#SVGID_x5F_2_x5F_" startOffset="0%">
    <tspan class="st4" style="font-family:'Algerian'; font-size:29.2545px;">SANCHEZ</tspan>
  </textPath>
</text>
</svg>

What am I missing? I've even attempted embedding the SVG font files as base64 in the font-face declarations.

Solution

  • I think the problem you’re having is that you’ve added the @font-face declaration within the SVG itself. If you are placing the SVG inline within an HTML file, you should be able to move the @font-face CSS into the HTML document instead:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <style>
      @font-face {
        font-family: 'Example';
        src: url('Example-Regular.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
      }
    </style>
  </head>
  <body>
    <!-- Your exported SVG file, with the SVG Font export setting kept as “SVG”: -->
    <svg version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         x="0" y="0"
         viewBox="0 0 198 119">
        <defs>
          <style type="text/css">
            /* I removed the @font-face declaration
             * here, it’s just the exported CSS now. */
            .st5 { font-family: 'Example' ;}

            /* Etc. */
          </style>
        </defs>
        <!-- Etc. -->
        <text transform="matrix(1 0 0 1 65 64)">
          <tspan x="0" y="0" class="st4 st5 st6">EST. 06.27.2014</tspan>
        </text>
    </svg>
  </body>
</html>

    This approach works well when you are:

    1. Already using the same web font files on the site as in the SVG, and
    2. Using the SVG inline, rather as an image

    If you need to use the SVG in an image tag like this:

    <img src="path/to/my-svg.svg" alt="Description of text in the SVG" />

    …then you’ll need to outline the type when you export it form Illustrator. Rather than doing this within your Illustrator file itself, you can keep the type “live” and change the SVG export settings by hitting this tiny cog ⚙️ in the export settings panel:

    The Adobe Illustrator SVG export settings cog

    Now, you can choose SVG in the sidebar, and change the SVG export settings:

    The Adobe Illustrator SVG export settings panel and options

    Try changing this setting to “Covert to Outlines.” You can probably also lower the decimal precision to 2 or 3.

    This approach works well if you:

    • Need to use the SVG as an external image in an img element, or
    • Are using typefaces that aren’t going to be used as web fonts on the site, or

    I find myself switching between these options depending on things like what fonts are going to already be on the site, whether the content should be treated as text or as an image, and the complexity of the SVG.

    It’s also important to add or improve the title and description in the SVG if the text is outlined but still part of the content of the site, just like with any other image.

    In your specific SVG, some of the text is white, and there is at least one piece that might be “off canvas,” so it might be worth making a simple example SVG to test.

    Hope one of these approaches are helpful!