Почему мой woff, объявленный в моей таблице стилей JSS с @font-face, не загружается?

Почему мое правило @font-face не загружает woff? Мой createStyleSheet():

Настройка вне моего компонента React:

// ./jss.css
import jss from 'jss';
import vendorPrefixer from 'jss-vendor-prefixer';


/**
 * Reformat classNames
 * mechanism and format the classes as we see fit.
 *
 * @method createGenerateId
 * @return {String}         Formatted class name
 */
const createGenerateId = () => (rule) => {
    return rule.key.toString().replace(/\./, '_DOT_');
};


export default jss
    .use(vendorPrefixer())
    .setup({ createGenerateId });

Затем внутри:

import jss from './jss';

componentDidMount() {
        this.sheet = jss.createStyleSheet({
            '@font-face': {
                fontFamily: 'Whitney-BlackItal-ProGkCy-TDA',
                src: 'url(/fonts/woff/Whitney-BlackItal-ProGkCy-TD.woff)',
                fontWeight: 'normal',
                fontStyle: 'normal'
            }
        }).attach();
    }

URL для woff хороший. Если я нажму на этот URL-адрес, браузер загрузит файл .woff. Когда я проверяю экземпляр this.sheet, я вижу там правило.

Мой класс CSS отформатирован правильно:

.font__Whitney--423 {
    font-family: Whitney-BlackItal-ProGkCy-TDB, Whitney-BlackItal-ProGkCy-TDA, Fallback, Courier;
    font-weight: "normal";
}

Ничто из того, что я пробовал, не загрузит файл woff и не отобразит стилизованный текст на экране.

Что мне здесь не хватает?