Unable to load custom font in direflow application with React

I have been facing an issue with my JavaScript Direflow application. I am attempting to load a local font, but so far have not succeeded.

Below are the specifics and code snippets I have implemented.

Directory Structure https://i.sstatic.net/qLKlY.png

font.css

@font-face {
    font-family: 'MyLocalFont';
    src: local('MyLocalFont'),
         url('./fonts/MyLocalFont.woff') format('woff'),
         url('./fonts/MyLocalFont.woff2') format('woff2');
}

direflow-components/testing-component/index.js

plugins: [
    {
      name: 'font-loader',
      options: {
        custom: {
          families: ['MyLocalFont'],
          urls: ['/fonts.css']
        },
      },
    },
  ],

App.css

.header-title {
  font-size: 34px;
  color: #5781C2;
  font-family: 'MyLocalFont';
}

The font files are not loading. Any assistance would be appreciated.

Note: I created a React app using create-react-app where @font-face changes successfully loaded the fonts. It seems like there might be an issue specific to Direflow.

Answer №1

The issue has been successfully resolved by eliminating the need for the plugin font-loader. It was removed from the file

direflow-components/testing-component/index.js
.

Additionally, I made a modification by eliminating the single quotes from the font-family property.

App.css

.header-title {
    font-family: MyLocalFont;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can we retrieve a recently saved Mongoose object from MongoDB that includes custom or full properties along with data from another collection?

Seeking assistance with retrieving full property or custom property from a saved object. Please see explanation below: Post model : const postSchema = new mongoose.Schema( { content: { type: String, trim: true, required: [true, &qu ...

Issues with Organizing Bootstrap Card Layout

I'm in need of assistance with creating a responsive Bootstrap card grid. My goal is to have a grid layout with 6 cards, initially displayed as 2 rows of 3 cards. As the screen size decreases, I want the layout to adjust accordingly to maintain reada ...

Updating the status in Reactjs

I need help with updating the status of a selected student in my code. I am able to retrieve the ID and status of the clicked student, but I am unsure of how to implement the update functionality. export const UPDATESTATUS = gql` mutation UpdateStatus($sta ...

Using Webflow code in ReactJS/NextJS: Best practices and implementation tips

After exporting my Webflow code to my NextJS app, I noticed that many of the HTML tags are being flagged as errors because they appear to be missing closing tags. Can anyone shed some light on why this is happening and suggest potential solutions? It&apos ...

Ways to showcase an image that goes beyond the top and bottom boundaries of a div using CSS

Attempting to extend an image beyond the top and bottom of a div. Successful in extending it below, but how can I achieve this effect above? Check out the online demo here. .about { background-image: linear-gradient(100deg, #483dec, #4074eb); } .abo ...

Changing Tailwind CSS variables for customization

Using Variables in index.css : :root { --property: 1; } A Different Approach to Changing it with CSS on Hover: img{ transform: scale(var(--property));; } .another-element:has(:hover, :focus) { --property: 1.1; } There's a way to inclu ...

Concern regarding the lack of timely response

I am experiencing an issue with the responsiveness of my template. When I test it online on various websites, everything appears to be working perfectly. However, when I try to view it on my HTC one, the responsiveness is terrible and not fully functional. ...

Ways to display JSX with formatted new lines and spaces in React.js?

Here is an image displaying a comparison between my console log and React website in Google Chrome. Check out the Console log and Chrome website Notice how the console output is neatly formatted with new lines and indents, while the text below "Generated ...

Switching slider value without changing the drag behavior MUI Slider React

Currently, I am facing an issue with my MUI slider. I have set up the code to invert the value of the slider based on a boolean variable, which is working correctly. However, the problem arises when I try to drag the slider towards 0, it actually moves t ...

Connecting pages through index.html within the hosting file manager directory

I have just started my coding journey and recently signed up for ipage hosting. After uploading my .html files to a directory named "Website", I encountered an issue while trying to link multiple pages to the index.html home page. I tried using the code ...

The constant motion of jQuery images is mesmerizing

Having trouble with a slide effect in my project. I have set up 4 images, where images 3 and 4 should slide down when clicked. Additionally, a div element should come down from them. I'm new to this, so apologies if it's a simple question. Any as ...

The 'initializeOnMount' property is a necessary requirement within the definition of the 'MoralisProviderInitializedProps' type

I encountered an unexpected issue with the code below: Type '{ children: Element; appId: string | undefined; serverUrl: string | undefined; }' is not compatible with type 'IntrinsicAttributes & MoralisProviderProps'. The property ...

Learn how to utilize a button in a React Native app to cancel a particular Firestore realtime listener

Utilizing a live listener on a Firestore collection to retrieve the most recent data. The function used is as follows, and it is linked to a button click event. function fetchItems(selectedCategory){ const subscriber = firestore() .collection('C ...

Adding a margin to each page using the @page feature in CSS

I am currently working on a project where I have a dynamically generated HTML page that needs to be saved as a PDF. The issue I am facing is related to the page border, which needs to appear at the edge of the page when printed. To achieve this, I have set ...

What is causing the extra whitespace on the right side with container-fluid?

Could someone assist me with an issue I'm experiencing when using the container-fluid in Bootstrap? It seems to be leaving some space on the right side of my web page, and as a newcomer to Bootstrap, any help would be greatly appreciated. <link ...

Having trouble with React-leaflet map rendering correctly within the Ionic framework

https://i.sstatic.net/wXM7b.png I have encountered numerous individuals facing this issue, but none of the suggested solutions have resolved it for me. I am confident that I have set up everything correctly. This is my index.html: <!DOCTYPE html> & ...

Could there be any elements in the code that serve no purpose?

Here is an image of the design I envision. It will feature a sticky footer that remains at the bottom of the page at all times. The main content area should adjust its height to fill the space between the header and footer, with a scrollbar appearing ...

"Implementing unique typefaces on a static website hosted on AWS

I've been attempting to incorporate a unique font into my CSS class using font-face. I have experimented with both .otf and .ttf file formats, uploading the custom font files to an S3 bucket. I made sure to grant public permissions to the font files a ...

The pictures in a <div> tag are not showing up

Functionality: I have set up 2 different <div> elements with unique IDs. Each of these <div> elements will make an ajax call to fetch a specific set of images for display. To summarize, both <div> elements are invoking the same ajax met ...

Utilizing CSS to enhance the navigation bar design in a WordPress theme

I have created a unique WordPress theme and my navigation bar looks great. However, I am facing an issue with the CSS (style.css) code: #navbar li a.active{ background-color:#000; color:#fff; border-top: 3px solid; border-color:#d22b2b; } This CSS is r ...