React app (storybook) experiencing loading issues with @font-face

I am struggling to load custom fonts from a local directory. Can someone provide assistance?

Below is the code I am currently using:

@font-face {
  font-family: 'My Custom Font';
  src: url('./fonts/MyCustomFont.eot');
  src: url('./fonts/MyCustomFont.eot?#iefix') format('embedded-opentype'),
    url('./fonts/MyCustomFont.woff') format('woff'),
    url('./fonts/MyCustomFont.ttf') format('truetype'),
    url('./fonts/MyCustomFont.svg#my_custom_font_otbook') format('svg');
  font-weight: normal;
  font-style: normal;
}

and utilizing it as 
.btn {
  font-family: 'My Custom Font', sans-serif;
  max-width: 100%;
  width: 20%;
  height: 8%;
}
javascriptcssreactjsfontsstorybook

Answer №1

Take a look at this valuable resource

Make sure you are correctly pointing towards the directory where your assets/fonts are stored.

Check out this font-face syntax guide

Here's an example for reference:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺︎'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

Answer №2

After numerous attempts, I was able to pinpoint the problem. It turns out that the culprit was the webpack configuration in Storybook. By replacing the default module rules with my own, I was able to resolve the issue successfully.

Answer №3

To effortlessly load font files using webpack's file-loader, simply place your fonts in the src/assets/fonts directory without needing to specify their location. The file-loader will automatically locate them for you during the build process.

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

Exploring unit tests: Customizing an NGRX selector generated by entityAdapter.getSelectors()

Let's imagine a scenario where our application includes a books page. We are utilizing the following technologies: Angular, NGRX, jest. To provide some context, here are a few lines of code: The interfaces for the state of the books page: export int ...

javascriptangulartypescriptunit-testingngrx

Ways to troubleshoot JavaScript following an AJAX request?

My webpage is structured into three separate files. The index.html file contains a navigation bar, a content box, and a footer within 3 divs. Additionally, there are two other .html files with different content that should load upon clicking specific links ...

javascriptjqueryajax

Discover the simple steps to include row numbers or serial numbers in an angular2 datagrid

Currently, I am utilizing angular2 -datatable. Unfortunately, I am facing an issue where the correct row numbers are not being displayed in their corresponding rows. Whenever a user moves to the next page using the paginator, the datatable starts countin ...

javascriptdatabaseangulartypescriptdatatable

typescript defining callback parameter type based on callback arguments

function funcOneCustom<T extends boolean = false>(isTrue: T) { type RETURN = T extends true ? string : number; return (isTrue ? "Nice" : 20) as RETURN; } function funcCbCustom<T>(cb: (isTrue: boolean) => T) { const getFirst = () => ...

javascripttypescripttypescript-generics

IE displaying "slow script" alert due to Knockout malfunction

Within my grid of observables and computed observables, the first row serves as a multiplier for all subsequent rows. Users can modify this percentage rate and Knockout automatically updates all relevant values accordingly. Additionally, I require a textbo ...

javascriptinternet-explorerknockout.js

Expanding the range of colors in the palette leads to the error message: "Object is possibly 'undefined'. TS2532"

I am currently exploring the possibility of adding new custom colors to material-ui palette (I am aware that version 4.1 will include this feature, but it is a bit far off in the future). As I am relatively new to typescript, I am finding it challenging t ...

reactjstypescriptmaterial-ui

Dealing with Array Splicing Issues in Angular

Being fairly new to the world of AngularJS, I suspect that I am just making a simple mistake. My goal is to splice the cardTypes array at the var newCard = cardTypes.shift(); line rather than using .shift() so that I can consider my ng-repeat index. Whil ...

javascriptarraysangularjsionic-framework

Discover instances of a string within an array using JQuery

I am currently exploring how to locate occurrences of a specific string within an array on the client side. The examples provided on the JQuery Docs all seem focused on number comparisons, which isn't quite what I need. Essentially, I'm attempti ...

javascriptjqueryarraysgrep

After deploying our application to Vercel using the MERN approach, we noticed that the JWT token is not being stored in cookies

I've searched everywhere for a solution, but with no luck. I'm currently using React with Express and MongoDB. After deploying the application, I noticed that the JWT token is issued and stored in the set-cookies headers, but it's not showi ...

reactjsexpressdeploymentjwtvercel

To ensure that new tabs are opened directly within jQuery UI tabs, the tab should be created within the jQuery UI tabs interface

I have integrated jquery-UI to create a dynamic Tab panel. When I click on the "Add Tab" button, a new tab is created. However, the new tab does not open automatically. It only opens when clicked on. $(function() { var tabTitle = $( ...

javascriptjqueryhtmlcssjquery-ui

Mastering the Art of Aligning Avatars: Effortless Right Alignment

Here's the updated version of the navigation bar: <nav class="navbar navbar-expand-md navbar-dark bg-dark static-top"> <button class="navbar-toggler" type="button" data-toggle="collapse"> ...

htmlcssavatar

Tips for properly implementing an enum in TypeScript when using the React useState hook

What's the correct way to utilize my useState hook? I have this enum type: export enum Status { PENDING = 'pending', SUCCESS = 'success', ERROR = 'error', } And the useState hook: const [isValid, setIsValid] = use ...

reactjstypescriptreact-hookstypescript-typings

Is it possible to center-align the text in a Material-ui TextField and enforce a minimum numerical value at the same time?

I'm facing an issue with trying to center align the text inside the TextField and also set a minimum value of 0. It seems like I can only achieve one or the other, but not both simultaneously. I referred to the material-ui page on TextField for help, ...

javascriptreactjsmaterial-ui

Is it possible to target the last child element in CSS without relying on nesting

Is there a way to select the very last child of an element and apply a specific class without using nesting? For instance, how can I target only the final div in the structure below, nothing more and nothing less. <body> <div class="very-last- ...

csssass

Here is a guide on how to ensure that the div elements automatically fill the available space

Looking at this html page: Check out the jsFidlle Demo here I am aiming to have the boxes fill up the space effortlessly, each with equal width but varying heights. This is similar to the layout in Google Keep notes ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to compare two fields in react?

Good afternoon, I am currently working on a datagrid using the MUI datagrid and following the MUI Guide. I have encountered an issue where I included two fields with the same name because I needed two separate columns (one for the date and one for the nam ...

javascriptreactjsreact-reduxmaterial-uidatagrid

Should I generate separate views in React for every table in my backend?

As a beginner in the world of React, I find myself grappling with its intricate structure. Currently, my backend consists of three tables that are powered by Express.js; however, the focus now shifts to creating a CRUD UI interface for these tables withi ...

reactjsexpress

My div is not displaying the background image properly after adding the Bootstrap CSS

Strangely enough, Bootstrap seems to be interfering with the background image of a div. The following is the HTML code: <div class="wide"> <div class="col-xs-5 line"> <hr> </div> <div class="col-xs-2 logo"> Log ...

htmlcsstwitter-bootstrap

How can CKEditor ensure that there is a paragraph tag within a div element?

Working on my current CMS, I have the need to include some custom HTML (which is functioning as expected): var element = CKEDITOR.dom.element.createFromHtml("<div class='sidebar'>Edit Sidebar Text</div>"); The issue arises when atte ...

javascripthtmlckeditor

utilizing React.js, learn how to extract the most recent user input and store it within an array

My Input component generates input tags dynamically based on JSON data. I've implemented the onChange method in the input tag, which triggers a function called "handleChange" using contextAPI to record the values in another component. The issue aris ...

javascriptreactjsarraysnext.js