Kevin Powell - Community•12mo ago

SVG not loading properly?

Hello! I created a logo on illustrator and exported as an SVG. When importing onto my website, the logo's font looks completely different than what I exported. I'm assuming that the logo's font-family isn't being recognized? How do I go about fixing this? I'm currently loading the SVG using <img> tags, not <svg>

12 Replies

Rook•12mo ago

what happens if you use <svg> tags instead? i think i've run into something similar with inkscape when using text in an svg. it might not be converting the text to a path when you're exporting it. there is probably an "object to path" option in illustrator if that is the case

Matt•12mo ago

I just exported as code and still having the issue

Matt•12mo ago

Matt•12mo ago

For reference

Rook•12mo ago

is the text in illustrator a path?

Matt•12mo ago

Yeah

<?xml version="1.0" encoding="UTF-8"?>
                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1752.73 357.12">
                  <defs>
                    <style>
                      .cls-1 {
                        letter-spacing: 0em;
                      }
      
                      .cls-2 {
                        letter-spacing: .04em;
                      }
      
                      .cls-3 {
                        letter-spacing: .03em;
                      }
      
                      .cls-4 {
                        letter-spacing: .02em;
                      }
      
                      .cls-5 {
                        letter-spacing: .01em;
                      }
      
                      .cls-6 {
                        fill: #fff;
                        font-family: TheHometown, 'The Hometown';
                        font-size: 282.54px;
                      }
      
                      .cls-7 {
                        letter-spacing: .02em;
                      }
      
                      .cls-8 {
                        letter-spacing: 0em;
                      }
      
                      .cls-9 {
                        letter-spacing: -.02em;
                      }
                    </style>
                  </defs>
                  <text class="cls-6" transform="translate(0 240.15)"><tspan class="cls-4" x="0" y="0">Ho</tspan><tspan class="cls-1" x="428.04" y="0">m</tspan><tspan class="cls-2" x="624.97" y="0">e</tspan><tspan class="cls-3" x="728.09" y="0">t</tspan><tspan class="cls-7" x="798.72" y="0">ow</tspan><tspan class="cls-8" x="1060.91" y="0">n</tspan><tspan class="cls-9" x="1187.49" y="0">B</tspan><tspan class="cls-7" x="1425.95" y="0">i</tspan><tspan class="cls-5" x="1499.68" y="0">t</tspan><tspan x="1564.66" y="0">es</tspan></text>
                </svg>

<?xml version="1.0" encoding="UTF-8"?>
                <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1752.73 357.12">
                  <defs>
                    <style>
                      .cls-1 {
                        letter-spacing: 0em;
                      }
      
                      .cls-2 {
                        letter-spacing: .04em;
                      }
      
                      .cls-3 {
                        letter-spacing: .03em;
                      }
      
                      .cls-4 {
                        letter-spacing: .02em;
                      }
      
                      .cls-5 {
                        letter-spacing: .01em;
                      }
      
                      .cls-6 {
                        fill: #fff;
                        font-family: TheHometown, 'The Hometown';
                        font-size: 282.54px;
                      }
      
                      .cls-7 {
                        letter-spacing: .02em;
                      }
      
                      .cls-8 {
                        letter-spacing: 0em;
                      }
      
                      .cls-9 {
                        letter-spacing: -.02em;
                      }
                    </style>
                  </defs>
                  <text class="cls-6" transform="translate(0 240.15)"><tspan class="cls-4" x="0" y="0">Ho</tspan><tspan class="cls-1" x="428.04" y="0">m</tspan><tspan class="cls-2" x="624.97" y="0">e</tspan><tspan class="cls-3" x="728.09" y="0">t</tspan><tspan class="cls-7" x="798.72" y="0">ow</tspan><tspan class="cls-8" x="1060.91" y="0">n</tspan><tspan class="cls-9" x="1187.49" y="0">B</tspan><tspan class="cls-7" x="1425.95" y="0">i</tspan><tspan class="cls-5" x="1499.68" y="0">t</tspan><tspan x="1564.66" y="0">es</tspan></text>
                </svg>

Excuse the formatting, just a quick c/p

Rook•12mo ago

that isn't a path

Matt•12mo ago

hmm

Rook•12mo ago

i've never used illustrator so i don't know if this is the right thing, but maybe try this? https://www.youtube.com/watch?v=l4FqRPqls3w

Jamela Payne

YouTube

How To Make SVG Files From Text In Illustrator

Learn how to make simple and easy SVG files for Cricut using adobe illustrator. Learn how to work with text to create your own designs. Grab this file for free. https://colormecrafty.net/custom-doormat-using-cricut-or-silhouette-stencils/ Adobe Photoshop and Illustrator http://bit.ly/allappsadobe My SVG and file shop https://by-pink.com/shop...

Milan Poudel•12mo ago

if you select all your logo and press cmd shift o, it will make your design outline. and you're good to go.

13eck•12mo ago

Your text element has font-family: TheHometown, 'The Hometown'; declared in the SVG's style tag. If your webpage isn't loading that font you won't see the font. You either need to turn it into a stroke/outline/line as Milan suggested, export as a PNG, or link the correct font in your HTML.

Gaming

Programming

SVG not loading properly?