Fabric js font family issue

Question

I am using fabric js version 1.7.22 with angular 7 and I am making text editor. My Issue is that when I add text into canvas with custom font using following code.

var canvas= new fabric.Canvas('c');
var junction_font = new FontFace('3d.demo', 'url(https://fonts.gstatic.com/s/bethellen/v1/WwkbxPW2BE-3rb_JNT-qIIcoVQ.woff2)');
junction_font.load().then(function (loaded_face) 
{
  console.log('loaded.font', loaded_face);
  document['fonts'].add(loaded_face);
  var text = new fabric.IText("lazy dog jumps over crystle guy.", {
    top: 10,
    left: 10,
    fontFamily: '3d.demo'
    })
  canvas.add(text);
  canvas.renderAll();
});

This code work perfect if I use fabric js letest version of fabric js 3.2.2. but display small text when i use fabric js version 1.7.22

My whole Project is in old version and can't update version.

I spent lot's on google for solve this issue but unable to resolve.

Is there any Patch for this to support all king of font name. Please help me. Please see below fiddle for generate issue : https://jsfiddle.net/Mark_1998/pxr9yz7g/

Answer 1

If your font working perfect it's about only font size please follow the below code.If font is not working please let me know i will update the code.

  var text = new fabric.IText('lazy dog jumps over crystle guy.',{
                left: 10,
                top: 10,
                fontFamily: '3d.demo',
                fill: '#fff',
                stroke: '#000',
                strokeWidth: .1,
                fontSize: 36,
            });
            canvas.add(text);
            canvas.renderAll();

If you are facing issue with your font family please try with google font.Please follow the below code

add this in top of the page

<link href='https://fonts.googleapis.com/css?family=Poppins|Roboto|Oswald|Arial|Lobster|Pacifico|Satisfy|Bangers|Audiowide|Sacramento' rel='stylesheet' type='text/css'>

 var text = new fabric.IText('lazy dog jumps over crystle guy.',{
                    left: 10,
                    top: 10,
                    fontFamily: 'Arial',
                    fill: '#fff',
                    stroke: '#000',
                    strokeWidth: .1,
                    fontSize: 36,
                });
                canvas.add(text);
                canvas.renderAll();

Answer 2

After a lot's of google surfing I found that fontFace not support following type of string as a first parameter.and so I put solution for purpose of help to another developer

following pattern of font family not render perfect in fabric js eg new FontFace("exo 2", font_path);

here font family name eg exo 2

1. not valid if it end with number word means last character is number and before that space
2. not valid if start any word with number
3. not valid if name contain any dot
4. not valid if name is starting with number