How to use google fonts in manually created React app?

Question

I created React app manually (not create-react-app) one by one such as index.js, App.js, index.css, components folder etc because I am using React app as a separate app in the Django project. And in order to use google fonts, I followed this answer. But when I write @import url('https://fonts.googleapis.com/css?family=Josefin+Sans') in the index.css, it is giving me this error.

ERROR in ./src/index.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
| 
 @ ./src/index.js 4:0-21

webpack 5.15.0 compiled with 1 error in 999 ms

I think this error is related to webpack.config.js and it seems I need to add some rules in the module section related to css-loader, file-loader, or something else, but I am not sure how to write. This is just my thought, I have no idea why this is happening.

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env" : {
        NODE_ENV: JSON.stringify("production"),
      }
    })
  ]
};

How to solve this issue? (This issue has happened when I tried to use react-toastify also. So I removed it and used another alternative package.) How to use fonts in the non create-react-app based project?

I think you should add a link tag like this inside index.html file instead of using import in css file and install the css-loader. I always use google font like this. https://developers.google.com/fonts/docs/css2#quickstart_guides — Văn Vi, Jul 22 '21 at 19:22
Just remember to change the font-family inside index.css too. It will work when you add the link tags (get from https://fonts.google.com/) into index.html and change to font-family inside index.css to the correct font. I just change the font to on JosefinSans this https://codesandbox.io/s/create-react-app-forked-t9s09?file=/public/index.html , you can check it out — Văn Vi, Jul 22 '21 at 19:34
Once I add any code in index.css file, then it is giving me same error. Should I install css-loader? — SatelBill, Jul 22 '21 at 19:51
If you just get the same error, I think you should add then. To add css-loader, just follow this https://webpack.js.org/loaders/css-loader/#getting-started — Văn Vi, Jul 22 '21 at 20:03

How to use google fonts in manually created React app?

0 Answers0