typekit / webfontloader

Web Font Loader gives you added control when using linked fonts via @font-face.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

webfontloader and jsdom

animanathome opened this issue · comments

I understand this isn't the projects typical use case and references a number of third party libraries. However, I'm just looking to get some insight into the underlying problem. Maybe someone else ran into the same issue and possibly found a solution. Unfortunately, StackOverflow comes up very bare on solutions. Hopefully, someone can provide me with some information.

Basic info:

  • Node.js version: 12.7.0
  • jsdom version: 15.1.1
  • webfontloader: 1.6.28

Minimal reproduction case

const html = `<html><head><style type="text/css">
    @font-face {
        font-family: "MontserratBold";
        src: url('https://storage.googleapis.com/lumen5-site-css/Montserrat-Bold.ttf');
    }
</style><body></body></html>`;

require('jsdom-global')(html, {resources: 'usable'});

const WebFont = require('webfontloader');
const WebFontConfig = {
    custom: {
        families: ['MontserratBold'],
    },
    active: function() { console.log('active'); },
    inactive: function() { console.log('inactive'); },
    fontinactive: function(familyName) { console.log(`fontInactive ${familyName}`); },
};
WebFont.load(WebFontConfig);

The above example always returns fontInactive MontserratBold and inactive.

How does similar code behave in browsers?

Returns 'active'