@Quintis

Как применить стили с google fonts API без Google Web Font Loader?

Доброго времени суток , как применить стили с google fonts API без Google Web Font Loader и сделать подобие google fonts?

В моем случае выбивает ошибка :

Refused to apply style from '' because its MIME type ('font/ttf') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Компонент через reducer получает обьект со стилями от google fonts API

Сам компонент :
import React, { Component } from 'react'
import { connect } from 'react-redux';

 class TextItem extends Component {
    state = {}

    static getDerivedStateFromProps(props, state) {
        return props
    }

    render() {
        console.log(this.state.data.data)
        return (
            <div>

                <div>
                <link href="https://fonts.googleapis.com/css?family=Lacquer&display=swap" rel="stylesheet"/>
                <p style={{fontFamily: "Lacquer"}}>{this.state.data.textVal}</p>
                </div>      
                {this.state.data ? this.state.data.data.map(el=>{
        
                    var link = document.createElement('link');
                    link.setAttribute('rel', 'stylesheet');
                    link.setAttribute('type', 'text/css');
                    link.setAttribute('href', el.files.regular);
                    document.head.appendChild(link);
                    return (
                        <div>
                        {/* <link type="text/css" href={el.files.regular} rel="stylesheet"/> */}
                        <p style={{fontFamily: el.family}}>{this.state.data.textVal}</p>
                        </div>
                    )
                }): null}
            </div>
            
            
        )
    }
}


export default connect(state=>({
    data:state
}), 
 dispatch=>({
    
 })

)(TextItem)
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы