What's the best way to implement a font family in a React component?

Question

I'm currently attempting to implement the font found at:

https://fonts.google.com/specimen/Source+Code+Pro

After downloading the font into my directory, it appears as shown in this image: enter image description here

This is how I have it set up:

<Box sx={{paddingBottom: '4%'}}>
     <AppWindow id='AppWindow'/>
</Box>

I initially tried using

sx={{fontFamily: 'Source Code Pro'}}

without success, indicating that the local files may not have been imported correctly.

I then attempted an import solution:

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

#AppWindow{font-family: 'Source Code Pro'};

However, this did not work either. The only way I was able to somewhat get the font working was by using:

<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">

The issue with this approach is that it changes the font for everything.

Another method I explored involved modifying the theme within theme.js:

import "@fontsource/SourceCodePro/300.css"

temp:{
  fontFamily: 'Source Code Pro'
}

Yet again, I suspect there might have been issues with importing the local files correctly. Any assistance would be greatly appreciated.

Answer 1

Answer №1

If you prefer, you can use the webfontloader library as an alternative. Start by downloading it:

yarn add webfontloader # Alternatively, npm i webfontloader

Next, import it into the component where you want to utilize the font:

import WebFont from 'webfontloader';

When the component mounts, the desired fonts will be loaded using the useEffect hook. Specify the font you wish to download in the code block:

useEffect(() => {
  WebFont.load({
    google: {
      families: ['Your Font Name']
    }
  });
}, []);

Afterwards, you can apply the font by either using className and adjusting your CSS or implementing inline styling.

Answer 2

If you prefer, you can use the webfontloader library as an alternative. Start by downloading it:

yarn add webfontloader # Alternatively, npm i webfontloader

Next, import it into the component where you want to utilize the font:

import WebFont from 'webfontloader';

When the component mounts, the desired fonts will be loaded using the useEffect hook. Specify the font you wish to download in the code block:

useEffect(() => {
  WebFont.load({
    google: {
      families: ['Your Font Name']
    }
  });
}, []);

Afterwards, you can apply the font by either using className and adjusting your CSS or implementing inline styling.