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.
New contributor
Mohamed Clio is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.