CODEWITHSUNDEEP
reactjsjsxstyled-jsx
Mohamed Clio
Mohamed Clio

Reputation: 1

Inline Google font-family is not working inside JSX file in react

How Can I apply inline google font-family to an element? (it does work when I create a separate class for it & edit the CSS file but not from the inline method)

Here's my HTML:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <title>JSX</title>
    <link rel="stylesheet" href="/styles.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Jacquard+12&display=swap"
      rel="stylesheet"
    />
  </head>
 
  <body>
    <div id="root"></div>
    <script type="module" src="/src/index.jsx"></script>
  </body>
</html>

index.jsx:

import React from "react";
import { createRoot } from "react-dom/client";
 
const customisedStyle = {
  color: "red",
  fontFamily: "Jacquard 12, sans-serif",
  fontWeight: 900,
};
 
const root = createRoot(document.getElementById("root"));
root.render(
  <div>
    <h1 style={customisedStyle}>Hello World!</h1>
  </div>
);

PS: fontWeight is correctly applied, the issue is with fontFamily

I'm trying to apply a specific inline style google font-family to the h1 header but when I try to render the page, it ignores the font-family completely and restores it to default font-family.

Upvotes: 0

Views: 67

Answers (1)

Mohamed Amadou
Mohamed Amadou

Reputation: 1

Try to create a general css file like index.css, use @import and add

h1 {
    font-family: "font-name", sans-serif;
 }

Import this css file in your .jsx file

Hope i solved your problem

Upvotes: 0

Related Questions