3

Having the problem with svg fonts.

here is my index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </head>
    <body>

    <img src="sign.svg"></img>

    </body>
</html>

and here is my svg file

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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 47.2 110 20.6" enable-background="new 0 47.2 110 20.6" xml:space="preserve">
<defs>
    <style type="text/css">
        @font-face {
          font-family: 'Indie Flower';
          font-style: normal;
          font-weight: 400;
          src: url('http://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6qRDOzjiPcYnFooOUGCOsRk.woff') format('woff');
        }
    </style>
</defs>
<text transform="matrix(1 0 0 1 23.4251 58.5378)" fill="#004888" font-family="'Indie Flower'" font-size="12">My sign</text>
</svg>

In Safari on my Mac font looks as it should enter image description here

but everywhere else the font appear as a regular one enter image description here

on the iPhone just does not appear at all.

If to use this font in a regular css, it renders everywhere correctly. Could you please suggest me what am I doing wrong?

8
  • Is the sign.svg saved in the right content-type and is sign.svg the locatioN?
    – Cas Bloem
    Apr 7, 2015 at 14:50
  • Why do you want to use SVG if css works ? Apr 7, 2015 at 14:50
  • @Pierre Granger, I want to create a logotype using Illustrator
    – fen1ksss
    Apr 7, 2015 at 14:57
  • @Cas Bloem, I'm not sure about content-type, you can see all the information from svg-file I have in my question. Yes sign.svg is a file.
    – fen1ksss
    Apr 7, 2015 at 14:58
  • Maybe you need to import a svg file for your font, like url('http://....svg') format(''svg'), but i can't test as i don't find a svg file online :( Apr 7, 2015 at 15:08

3 Answers 3

7

For security reason, embedded svg images have to be standalone images. You will need to make the svg 'standalone' by embedding all external assets (in our case is the font definition) into it. To embedded the font inside svg file, follow these steps:

1. Generate the embedded font url as base64

Download the font file you want to use under .ttf extension. We will need to have the embedded as data URI scheme.
Upload this font file to any online Data URI converter, I'm using dopiaza.org data URI generator for simplicity (or you can use any File to Base64 converter tool, as long as you follow the same data-uri generated pattern).

Upload the font file to the converter. Ensure Use base64 encoding is checked. Since we're embedding font, so choose Explicitly specify mime type and put the mime type is application/font-woff

Hit the Generate Data URI and let the tool do the job, it should present you the following data URI format:
data:<mime-type>;base64,<the_encoded_font_as_base64_content>

In our case using font as Mime-Type, it will be:

data:application/font-woff;base64,AAEAAAATAQAABAAwR0RFRv4pBjw....

2. Declare the embedded font inside our SVG file

Edit our SVG file that's using the font. Declare @font-face inside the tag. Put the generated data-uri URL above in the src: url("<generated_data_uri>")

<svg>
    <defs>
        <style>
            @font-face {
                font-family: Inter;
                src: url("data:application/font-woff;base64,AAEAAAATAQAABAAwR0RFRv4pBjw....")
            }
        </style>
    </defs>

    <!-- The rest of your SVG content goes here -->
</svg>

And that's all.

1
  • This works, but what can confuse ppl is that many image viewers will just display default font. Also mu image of 4kb is then 150kb large so needs to be taken into consideration when using it.
    – Blissful
    Oct 14, 2021 at 10:49
1

If you use SVG in an image context e.g. via an <img> tag it must be complete in a single file.

You'll need to convert the woff data from an external file to a data URI and embed it in the SVG file.

1
  • Thank you, it works almost everywhere. The last thing, it is still not rendering on the iPhone, any suggestions?
    – fen1ksss
    Apr 7, 2015 at 15:34
0

Embedding the whole font as a base64 inside the SVG as mentioned by @ThangLeQuoc works just fine, however, it definitely increases the file size (final size = SVG size + font size) and if you do it for each SVG file of yours you'll simply end up wasting a lot of space. The best solution can be using URLs. Google provides lots of fonts via URL but you can also upload your custom fonts and use the link in your SVGs. the website should return a CSS Style text file including the font details (you can open this URL as a reference to see how it should look).

To use a hosted font instead of using a locally embedded font you just need to use @import url() like the following code:

<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=Monoton:400,400i,700,700i");
.st10{font-family:'Monoton';}
.st11{font-size:36px;}
</style>

Now that a font file named "Monoton" is imported it can be used in different styles.

1
  • 1
    This works for inlined svgs but not for <img> elements loading an external svg. You'll see a fallback font. Aug 29, 2022 at 14:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.