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 acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.