'Custom SVG Fonts

I'm using custom fonts in a SVG file to display a logo on a website. I'm having great difficulty, using multiple options to get the fonts to work, as they are not displaying on the live website. However, they do work locally.

The HTML tag I'm using to display the SVG logo is:

<svg width="263" height="26">
    <image xlink:href="/images/header-logo.svg" src="/images/fallback.png" width="263" height="26" />
</svg>

And for the SVG fonts I'm placing the following in the section of the SVG file itself.

<style type="text/css">
    @font-face {
        font-family: 'Font-Name';
        font-weight: 500;
    font-style: normal;
        src: url('fonts/My-Chosen-Font.woff') format('woff');
    }

    #text {
        font-family: 'Font-Name';
        font-weight: 700;
        fill: #424242;
        }
</style>

And for the element:

<text font-size="34">
    <tspan x="29" y="34" id="text" style="font-family: 'Font-Name';">Company</tspan>
</text>
csssvgfontsfont-face


Solution 1:[1]

I have created a Pen that appears to work--let me know if this is helpful. It is based on the page at https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan.

<?xml version="1.0"?>
<svg width="290" height="40" viewBox="0 0 250 40"
    xmlns="http://www.w3.org/2000/svg" version="1.1">

  <style>
<![CDATA[
text{
  font: 34px 'Ravi Prakash', cursive;
}
]]>
  </style>

  <text  x="29" y="34" id="text">Company</text>
  </text>
</svg>
<p>Read all about it.</p>

CSS:

@import url('https://fonts.googleapis.com/css?family=Ravi+Prakash');
html {
  font-family: 'Ravi Prakash', cursive;
}

Solution 2:[2]

If you are using any external link like an image or font you have to declare your SVG with link capability.

 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
 >

* SVG inside <html> tags doesn't need this specifications.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 WahhabB
Solution 2 llobet

Related Questions