how to get the font src url via webfont loader

Question

i use webfont-loader dynamic load fonts via css files,code like this

WebFont.load({
    custom: {
        families: 'Lobster',
        urls:'mydomain.com/lobster.css'
    }
}

and in the css file,it like this

@font-face {
    font-family: 'Lobster';
    src: url('Lobster_1.3-webfont.woff') format('woff'),
         url('Lobster_1.3-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

i wonder as if there is a way to get the font face url,like "Lobster_1.3-webfont.ttf" and "Lobster_1.3-webfont.woff" which defined in css.

in webfont-loader,there is no such api,if there is no directly way,i have to load the css as text file first,but i relly don't want do such things

do you guys have any clue?

PS:the reason why i need the font's url,is because i use fabric.js to create svg file and render it to PDF by phantom.js in node side,but looks that phantom.js did not support svg with @import url('xxx.css'). so i have to use @font-face with src.

Answer 1

Well, let's say that you are using a subset of fonts that you chose and not updated by users, so you know paths of the font you are currently using. Fabricjs has an internal object that you can populate called:

fabric.fontPaths = { };

if you store there url information:

fabric.fontPaths = {Lobster: 'Lobster_1.3-webfont.woff'};

You will have font face embeeded in svg at export. That should allow you to have a properly loaded svg in phantomjs.

Answer 2

First get font name with URL's.

var fontArray = [];
$.get("https://www.googleapis.com/webfonts/v1/webfonts?key={your key}&sort=popularity", {}, function (data) {
    var count = 0;
    $.each(data.items, function (index, value) {
        count++
        fontArray.push(value);
    });
});

and then add to fabric.fontPaths.

    $.each(fontArray, function (i, item) {
     if (fontName == item.family) {
     var ttfFile  = item.files.regular;
     var dataFile = [];
    fabric.fontPaths[fontName] = "data:font/opentype;charset=utf-8;base64," + ttfFile;
      }
})