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">
  <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;


<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"/>
  <path />...
  <polygon points="110.4,18.87 110.41,18.91 110.37,18.9     "/>
<g id="Right_Line_1_">
    <rect x="132.27" y="61.86" class="st3" width="9.74" height="0.88"/>
<g id="Left_Line_1_">
    <rect x="54.69" y="61.86" class="st3" width="9.74" height="0.88"/>

<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>

<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"/>

  <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>

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.