FabricJS not render SVG correct when SVG include text with custom font?

Question

I have a problem with render SVG in fabricjs when SVG include text with custom font.

How to make SVG in Fabricjs display correct with custom font?

Here is my code:

var canvasObject = document.getElementById("editorCanvas");

  // set canvas equal size with div
  $(canvasObject).width($("#canvasContainer").width());
  $(canvasObject).height($("#canvasContainer").height());

var canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: null,
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

var imageObj = new fabric.Image();
  canvas.add(imageObj); 
imageObj.setSrc('https://futushigame.firebaseapp.com/group_test.svg', function(imageObject) {
  imageObject.set({top: 0, left: 0});
  imageObject.set('dirty', true);
  canvas.renderAll();
  setObjectCoords();
});


function setObjectCoords() {
  canvas.forEachObject(function(object) {
  object.setCoords();
  });
}

#canvasContainer {
  width: 100%;
  height: 100vh;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
  
  <style>
   @font-face {
                font-family: 'CurlzMT';
                src: url("https://futushigame.firebaseapp.com/CurlzMT.ttf") format("ttf");
                font-weight: 'normal';
                font-style: 'normal';
            }
 </style>
  
  <div id="canvasContainer">
    <canvas id="editorCanvas"></canvas>
  </div>

Here is my resources:
1. Font file: CurlzMT
2. SVG file: group_test.svg

Thank you!

score 1 · Accepted Answer · answered Jun 18 '19 at 12:51

1

You need to embed the font in svg file. The content of the svg must be like this https://files.fm/f/qhvbe8jj

answered Jun 18 '19 at 12:51

Marius Turcu

1,511
7
14

How did you embed font in svg? I am using google fonts https://fonts.googleapis.com/css?family=Pacifico and don't know how to embed it in exported svg by fabricjs Can you help me with it? – Aamir Nakhwa Jul 31 '19 at 08:02
1

Check this: https://graphicdesign.stackexchange.com/questions/5162/how-do-i-embed-google-web-fonts-into-an-svg – Marius Turcu Jul 31 '19 at 08:08
1

@MariusTurcu seems like the file link is broken can you please fix it and update the answer. – Sundeep Pidugu Oct 16 '19 at 12:52
1

Please read https://stackoverflow.com/help/how-to-answer – robsch Jan 25 '21 at 19:00

FabricJS not render SVG correct when SVG include text with custom font?

1 Answers1