How to apply styles with google fonts API without Google Web Font Loader?

Question

JavaScript

Good day, how to apply styles with google fonts API without Google Web Font Loader and make it look like google fonts?

In my case, I get an error:

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

The component receives an object with styles from the google fonts API through the reducer

The component itself:

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)