Search code examples
svggimpgoogle-fonts

Use svg with external font in GIMP

I have created this svg with an external font, that part of the SVG looks like this:

<defs>
  <style type="text/css">@import url(https://fonts.googleapis.com/css?family=Cairo|Gloria+Hallelujah|Rokkitt|Shadows+Into+Light|Signika&gt;</style>
</defs>

In Chrome this works nice, but when I try to load the svg into GIMP the font is missing. Is there a way for GIMP to render the google fonts?

Complete test svg:

<?xml version="1.0"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
 <defs>
      <style type="text/css">@import url(https://fonts.googleapis.com/css?family=Cairo|Gloria+Hallelujah|Rokkitt|Shadows+Into+Light|Signika&gt;</style>

  </defs>
  <style>
     text {
        font-size: 30px;
        font-family: Shadows Into Light;
     }
  </style>

  <text x="20" y="35"><tspan>Test</tspan></text>
</svg>

Update: For the SVG to work in Gimp or Inkscape:

<?xml version="1.0"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css">
      <![CDATA[
        @font-face {
          font-family: 'Shadows Into Light';
          font-style: normal;
          font-weight: normal;
          src: local('Shadows Into Light'), local('ShadowsIntoLight'), url('http://themes.googleusercontent.com/static/fonts/shadowsintolight/v3/clhLqOv7MXn459PTh0gXYHW1xglZCgocDnD_teV2lMU.woff') format('woff');
        }

        text {
          font-size: 30px;
          font-family: Shadows Into Light;
        }
      ]]>
    </style>
  </defs>

  <text x="20" y="35"><tspan>Test</tspan></text>
</svg>
Solution

  • The problem goes further than external Google fonts:

    1) Gimp (or whatever SVG parser it uses) is picky about the syntax (normally the style should be in CDATA)

    2) Even with the CDATA fix (that at least stop nasty messages in the Gimp console), Gimp won't abide to the font-family style, even for fonts installed system-wide.