How to get a Google Font working inside an inline SVG?

Question

Here is a very simplified version of my HTML document.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
</head>
<body>
 <div style=" width:256px; height:256px; margin:20px auto; ">

  <svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256">
   <style type="text/css"> /*internal CSS of the inline SVG*/
    /* <![CDATA[ */
    @font-face {
     font-family: "M PLUS 1p";
     src: url('https://fonts.googleapis.com/css?family=M+PLUS+1p');
    }
    /* ]]> */
   </style>

   <a xlink:href="#">
    <circle cx="57" cy="57" r="54.5" fill="#767dcc"/>
    <text transform="translate(33.916 87)" font-size="90" font-family="M PLUS 1p">1</text>
   </a>
  </svg>

 </div>

</body>
</html>

Specifically I am concerned with this part:

@font-face {
  font-family: "M PLUS 1p";
  src: url('https://fonts.googleapis.com/css?family=M+PLUS+1p');
}

...and this part:

font-family="M PLUS 1p"

It renders the "1" with the browser's default font, and looks like this:

^{Above screenshot is from Firefox}

What the "1" glyph of the font Mplus 1p actually looks like is this:

^{Above screenshot is from TextEdit}

I have been looking at this similar question, which has two answers. When I use the method recommended in this answer it works if I use the font recommended in that answer, but not with the font I'm trying to use.

@import url('https://fonts.googleapis.com/css?family=M PLUS 1p');

^ This didn't work.

The other answer seems like a more reasonable approach because font-family can be defined and reused easily.

I am using the link provided by Google, but it's not working:

https://fonts.googleapis.com/css?family=M+PLUS+1p

Seeing that Google's URL substitutes space characters for + I thought the following might work:

@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p');

But this also has not worked. Here's my most up-to-date effort:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
</head>
<body>
 <div style=" width:256px; height:256px; margin:20px auto; ">

  <svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256">
   <defs>
    <style type="text/css"> /*internal CSS of the inline SVG*/
       /* <![CDATA[ */
       @import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:400');
       /* ]]> */
    </style>
   </defs>

   <a xlink:href="#">
    <circle cx="57" cy="57" r="54.5" fill="#767dcc"/>
    <text transform="translate(33.916 87)" font-size="90" font-family="M PLUS 1p">1</text>
   </a>
  </svg>

 </div>

</body>
</html>

It's probably a matter of one syntax problem throwing the whole thing off, but I haven't been able to pin it down.

score 2 · Accepted Answer · answered Mar 22 '19 at 11:23

The right way is using @import url('https://fonts.googleapis.com/css?family=M PLUS 1p'); and set your font-family in css too

text {
   font-family: 'M PLUS 1p';
}

Inline font-family just not works. I'm not sure it is a valid property or not

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div style=" width:256px; height:256px; margin:20px auto; ">

    <svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256">
   <style type="text/css"> 
        @import url('https://fonts.googleapis.com/css?family=M+PLUS+1p');
        text {
          font-family: 'M PLUS 1p';
        }
   </style>

   <a xlink:href="#">
    <circle cx="57" cy="57" r="54.5" fill="#767dcc"/>
    <text transform="translate(33.916 87)" font-size="90" font-family="M PLUS 1p">1</text>
   </a>
  </svg>

  </div>

</body>

</html>

Thank you! It's unexpected that even with spaces in the URL (`M PLUS 1p`) it still works! But I will go with the example syntax from your snippet (`M+PLUS+1p`) just to be certain. — Mentalist, Mar 22 '19 at 11:33

How to get a Google Font working inside an inline SVG?

1 Answers1