React is not applying the font as expected

Question

React is not applying the font as expected

Currently, I am working on setting up a @font-face in my index.css file:

@font-face {
    font-family: "Raleway";
    src: url(../assets/fonts/Raleway/Raleway-VariableFont_wght.ttf) format(truetype),
}

Next, I am trying to apply this font family by specifying it in the font-family property within the body tag:

body {
    position: relative;
    font-family: "Raleway";
    overflow-x: hidden;
    overflow-y: auto;
}

Even though I have imported the index.css file into my index.js, the specified font is still not being applied to the body.

css reactjs

Answer 1

Answer №1

To improve your website's design, consider the following changes in your CSS file:

@font-face {
  font-family: "Raleway";
  src: local("Raleway"),
       url(../assets/fonts/Raleway/Raleway-VariableFont_wght.ttf) 
       format(truetype),
}
body {
  position: relative;
  font-family: "Raleway";
  overflow-x: hidden;
  overflow-y: auto;
}

Here is an example of a component using the specified CSS:

import React from "react"

// Include CSS File
import "index.css"

const So74327630 = (props) => <div>Example</div>

export default So74327630

For more detailed guidance on handling images, fonts, and files with Create React App, refer to this resource: "Adding Images, Fonts, and Files"

Answer 2

To improve your website's design, consider the following changes in your CSS file:

@font-face {
  font-family: "Raleway";
  src: local("Raleway"),
       url(../assets/fonts/Raleway/Raleway-VariableFont_wght.ttf) 
       format(truetype),
}
body {
  position: relative;
  font-family: "Raleway";
  overflow-x: hidden;
  overflow-y: auto;
}

Here is an example of a component using the specified CSS:

import React from "react"

// Include CSS File
import "index.css"

const So74327630 = (props) => <div>Example</div>

export default So74327630

For more detailed guidance on handling images, fonts, and files with Create React App, refer to this resource: "Adding Images, Fonts, and Files"

React is not applying the font as expected

Answer №1

Similar questions

There seems to be an issue with authentication in React JS and AWS Cognito as the logins are

When you click on a sublevel in the vertical CSS and JavaScript onclick menu, it disappears automatically

I would like the dropdown menu to only appear on mobile devices

Including Previous & Next Buttons in Product Categories

When I click on the button, the page reloads instead of executing the essential code

Providing a data point for each frame of animation within React Native

Customizing CSS by replacing link file styles with code in the HEAD section

The Clash of Backdrop Modals and Dropdown Menus

Issue with Color Attribute in Heading within an Ionic Content Element

Enhancing User Interfaces with React and CSS Styling

Incorporating dynamic images from local sources into a listview in a React Native

Display or conceal the location where the click event occurs within a single div

What is the process for generating an array of arrays in a React component?

Child div within a parent div with absolute positioning does not extend to the full height of the webpage

React component unable to process form submission

How can I adjust a large image to fit the browser window using CSS?

The installation of the .ipa file was unsuccessful on any iOS device

Utilizing SingleSpa Micro-frontends in Development standalone mode without Internet connectivity

``I am curious about using react-particles-js as a dynamic background for my React projects. It would

Updating an object within an array of objects can be achieved by utilizing the setState method in React