CODEWITHSUNDEEP
cssreactjsfontsfont-facefont-family
constantlyFlagged
constantlyFlagged

Reputation: 398

Unable to load font from local storage via @font-face - React / css

I am trying to load the "Inspiration-Regular.tff" font from theme.js.

The url is correct.

I am then setting the "Inspiration-Regular.tff" as body's font-family in line 137 as shown in the below's codeenter image description here

Upon inspecting the element - it does state that the "font-family" has been updated (as shown below) but the same visual default font appears. Why isn't the font changing?

enter image description here

A snippet of how inspiration-regular should appear.

enter image description here

Upvotes: 2

Views: 1259

Answers (1)

herrstrietzel
herrstrietzel

Reputation: 17265

Your @font-face rule has an error specifying the format:

The correct format value for truetype fonts is format('truetype').

Most modern browsers can also load the font without any format specified.
However, I recommend to add this value for best compatibility.

/* works */

@font-face {
  font-family: 'FiraCorrect';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firasans/v16/va9E4kDNxMZdWfMOD5Vvl4jO.ttf) format('truetype');
}


/* won't work */

@font-face {
  font-family: 'FiraIncorrect';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firasans/v16/va9E4kDNxMZdWfMOD5Vvl4jO.ttf) format('ttf');
}


/* won't work */

@font-face {
  font-family: 'FiraInDifferent';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/firasans/v16/va9E4kDNxMZdWfMOD5Vvl4jO.ttf);
}

.correct {
  font-family: 'FiraCorrect';
  font-weight: 400;
}

.inCorrect {
  font-family: 'FiraIncorrect';
  font-weight: 400;
}

.inDifferent {
  font-family: 'FiraInDifferent';
  font-weight: 400;
}
<p class="correct">Correct @font-face: format(truetype)</p>
<p class="inCorrect">Incorrect @font-face: format(ttf)</p>

<p class="inDifferent">Incorrect @font-face: no format specified</p>

Upvotes: 2

Related Questions