React webpack application not loading Roboto Font - reactjs

Question

I am working on React application where i want to use Roboto Font.I have followed the process to load the roboto Font. Following is my Project Structure :
My Index.css file
#font-face {
font-family: 'Roboto-Light';
src: url('./Roboto-Light.eot');
src: url('./Roboto-Light.eot?#iefix') format('embedded-opentype'),
url('./Roboto-Light.woff') format('woff'),
url('./Roboto-Light.ttf') format('truetype'),
url('./Roboto-Light.svg#RobotoLight') format('svg');
font-weight: 100;
font-style: normal;
}
My webpack.config.js :
const webpack = require('webpack');
const { resolve } = require('path');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
resolve(__dirname, 'src', 'js/index'),
],
output: {
filename: '[name].[hash].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader?sourceMap&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'sass-loader?sourceMap'
]
},
{
test: /\.(jpg|jpeg|gif|png)$/,
exclude: /node_modules/,
use: [
'url-loader?limit=1024&name=images/[name].[ext]'
]
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
use: ['file-loader?name=src/fonts/[name].[ext]']
},
{
test: /\.(json)$/,
use: ['file-loader?name=[name].[ext]']
}
]
}
}
and using css to load font as :
body {
font-family: 'Roboto-Light' !important;
}
I have followed this tutorial but its not working as expected and font is not loaded on webpage. Thanks in advance.
I didnt got any solution as of now.
Added Screenshot as per requested

Answer 1

Look like the app couldn't load the font face.
Please try:
in src/js/index.js: remove the line
import '../fonts/index.css';
rename file index.css to roboto.scss
in src/fonts/roboto.scss use absolute path instead of relative path:
#font-face {
font-family: 'Roboto-Light';
src: url('/src/fonts/Roboto-Light.eot');
src: url('/src/fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
url('/src/fonts/Roboto-Light.woff') format('woff'),
url('/src/fonts/Roboto-Light.ttf') format('truetype'),
url('/src/fonts/Roboto-Light.svg#RobotoLight') format('svg');
font-weight: 100;
font-style: normal;
}
in src/css/styles.scss add:
#import "../fonts/roboto";
You can also take a look at this commit.
Update 1
You can use WhatFont chrome extension to check. it's Roboto Light.
Update 2
I found that you must use absolute http url because app can't find your font with normal path.
src/fonts/roboto.scss
#font-face {
font-family: 'Roboto-Light';
src: url('http://localhost:8089/fonts/Roboto-Light.eot');
src: url('http://localhost:8089/fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
url('http://localhost:8089/fonts/Roboto-Light.woff') format('woff'),
url('http://localhost:8089/fonts/Roboto-Light.ttf') format('truetype'),
url('http://localhost:8089/fonts/Roboto-Light.svg#RobotoLight') format('svg');
font-weight: 100;
font-style: normal;
}
And the result: