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

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

1 голос
/ 15 марта 2019

Почему мое правило @ 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 и не отображает стилизованный текст на экране.

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

...