Kevin Powell - Community•2y 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•2y 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

MattOP•2y ago

I just exported as code and still having the issue

MattOP•2y ago

MattOP•2y ago

For reference

Rook•2y ago

is the text in illustrator a path?

MattOP•2y 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•2y ago

that isn't a path

MattOP•2y ago

hmm

Rook•2y 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•2y 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•2y 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?