CODEWITHSUNDEEP
reactjsfonts
Wiktor Czajkowski
Wiktor Czajkowski

Reputation: 1762

How to inject a font into js-only React application?

I've got an app that is a part of a larger system. My app is distributed as a JS file, that is later embedded into HTML of another page. I don't have control over that HTML file.

I want to add a font from Google Fonts into my app. I have a link to a stylesheet that imports and declares the fonts.

I've tried using createGlobalStyle from styled components or a CSS file referenced inside the file with main React component, to no avail — the font doesn't seem to be loaded, possibly because @import declarations have to appear before other declarations, and my CSS is inlined into a random place in the document.

How do I insert them as before any other CSS?

Upvotes: 0

Views: 796

Answers (1)

Wiktor Czajkowski
Wiktor Czajkowski

Reputation: 1762

The solution to my problem was to add <link rel="stylesheet" src="..." /> into the head using react-helmet.

<Helmet>
  <link
   href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
   rel="stylesheet"
  />
</Helmet>

Upvotes: 1

Related Questions