Question 73038 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Fonts don't display with Sass, React, create-react-app – Reactjs

I’m working on a React project made with create-react-app.

I’m using Sass and the sass files transpile correctly.

I have local fonts that I want to embed in the app.

I use the @font-face rule correctly, I believe, in my sass file. Here it is for one of the fonts:

/* poppins-200 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'someName';
  font-style: normal;
  font-weight: 200;
  src: url('/assets/fonts/poppins-v20-latin_latin-ext-200.eot'); /* IE9 Compat Modes */
  src: url('/assets/fonts/poppins-v20-latin_latin-ext-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/assets/fonts/poppins-v20-latin_latin-ext-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('/assets/fonts/poppins-v20-latin_latin-ext-200.woff') format('woff'), /* Modern Browsers */
       url('/assets/fonts/poppins-v20-latin_latin-ext-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/poppins-v20-latin_latin-ext-200.svg#Poppins') format('svg'); /* Legacy iOS */
}

This is my sass class, which I assign to a <p> element:

.someClassName{
  font-family: 'someName';
  font-size: 28px;
  line-height: 28px;
  color: #090909;
  padding: 0px;
  margin:  0px;
                 }

but the <p> element does not appear in the app in the correct font.

I get this type of error message in Chrome’s web developer tools console for each font:

Failed to decode downloaded font: http://localhost:3002/assets/fonts/poppins-v20-latin_latin-ext-200.woff2

and this one in Firefox:

downloadable font: rejected by sanitizer (font-family: "someName" style:normal weight:200 stretch:100 src index:1) source: http://localhost:3002/assets/fonts/poppins-v20-latin_latin-ext-200.woff2
downloadable font: rejected by sanitizer (font-family: "someName" style:normal weight:200 stretch:100 src index:2) source: http://localhost:3002/assets/fonts/poppins-v20-latin_latin-ext-200.woff
downloadable font: rejected by sanitizer (font-family: "someName" style:normal weight:200 stretch:100 src index:3) source: http://localhost:3002/assets/fonts/poppins-v20-latin_latin-ext-200.ttf
downloadable font: no supported format found (font-family: "someName" style:normal weight:200 stretch:100 src index:5) source: (end of source list)

It doesn’t matter which font I use. I have tried three unrelated fonts all downloaded from Google Fonts and the problem is the same each time.

Can anyone tell me what is going on?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For those who are interested, I have sorted the problem out.

    It turns out that apps created using create-react-app can deal with .scss files out of the box.

    This is what I had been doing:

    1. I was editing the .scss file and getting the following script to convert it to a .css file on the fly:
    "changeSassToCSS": "sass --watch src/scss:src/assets/css"
    1. I was importing the .css file into my index.js and App.js files

    This is what I did to solve the problem:

    1. Dumped the .css file

    2. Dumped the script that transpired from .scss to .css

    3. Imported the .scss file into my index.js and App.js files.


  2. 0

    Also I had used my own name for a font family in the .scss file where I had used the @font-face rule.

    Instead of this:

    /* poppins-200 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'someName';
  font-style: normal;
  font-weight: 200;
  src: url('/assets/fonts/

    which made the browser use some default font instead of Poppins

    I should have written this:

    /* poppins-200 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url('/assets/fonts/
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search