CODEWITHSUNDEEP
htmlcsssvgfonts
Dimitrios Stefos
Dimitrios Stefos

Reputation: 157

HTML Use an SVG image which contains a custom Font

I have an SVG image (created with InkScape) which has a text with Ubuntu Mono font. I am using , but computers without having the font installed, are displaying the text with other fonts. How can I upload the font in the SVG file?

Upvotes: 3

Views: 5349

Answers (2)

William Casey
William Casey

Reputation: 312

I had this problem a few days ago. Here is the link to a Ubuntu mono ttf:

http://ff.static.1001fonts.net/u/b/ubuntu.mono.ttf

Upload that to your server and then declare the font in your CSS:

@font-face {
    font-family: Ubuntu-Mono;
    src: url(/path/to/ubuntu.mono.ttf);
}

Then in the CSS for the corresponding SVG, declare the font as so:

.svg {
    font-family: Ubuntu-Mono;
}

An alternative could also be to "Create Outlines" of your text in the program you created the SVG in, though this will result in a larger SVG file, and the text within the SVG won't be recognized as text by the browser.

Upvotes: 1

Rodrigo5244
Rodrigo5244

Reputation: 5545

You can convert the font to base64 and add it to the svg file using a style tag.

<defs>
  <style type="text/css">
    @font-face {
      font-family: 'FONT_NAME';
      src: url(MIME+BASE64_STRING) format('TYPE_OF_FONT');
    }
  </style>
</defs>

Upvotes: 4

Related Questions