How to add an external source in an SVG?

Question

I have a logo that I made in SVG, on file .svgexternal, which uses has a text with the name of the company, whose source is Open Sans Light.

On my machine works normally due to the fact that I have the font installed.

I have this source on my website through Google Fonts, however, I believe that by the fact that the SVG is being externally charged, through the property background-image, that source is not working.

How do I declare this external source within SVG? Is there any way to do this...

For example, how could I do this in the SVG below?

<svg width="200" height="200">
   <circle cx="100" cy="100" r="80" stroke="green" stroke-width="4" fill="yellow" />
   <text y="105" x="85" style="font-family: 'Open Sans'; font-size: 20px; font-weight: bold;">
     <tspan>Text</tspan>
   </text>
 </svg>

Note: Although my example is in HTML, I am using an external SVG file.

Answer 1

SVG has support for CSS, of course with some different properties for the elements, in case you can use @font-face and will achieve the desired, for example:

  <style>
  @import url('https://fonts.googleapis.com/css?family=Open+Sans');
  </style>

A test:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
  @import url('https://fonts.googleapis.com/css?family=Open+Sans');
  </style>
   <circle cx="100" cy="100" r="80" stroke="green" stroke-width="4" fill="yellow" />
   <text y="105" x="85" style="font-family: 'Open Sans'; font-size: 20px; font-weight: bold;">
     <tspan>Text</tspan>
   </text>
 </svg>

However I must say that use <text> in SVG is not something interesting, only when it is "dynamic" would be interesting, so if you can vector it do, because in addition to load less the performance will be a little better (both by downloading and rendering).

---

Extra

Note that there are (existed) tags for SVG:

• <font-face-format>
• <font-face-name>
• <font-face-src>
• <font-face-uri>
• <font-face>

However they are in disuse (they are obsolete).

---

How to vector text in Inkscape

Select the text, without the group (in the footer as in the image, it should appear Text or Text, if something else comes up it’s because you didn’t select the <text>):

Then go to the top menu and select Way > Turn into path (or hold Shift + Ctrl + C)

---

How to vector text Adobe Illustrator CC

I do not know how to do in other versions, can work in older or not, please comment

Select the text and then from the menu select Type > Create Outlines