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

Adjust the size of the font for the placeholder text

I've been attempting to adjust the font size of the placeholder text. I added the font size property to the listed classes below, but for some reason, it's not taking effect. Could you please advise me on how to resolve this issue so that I can ...

javascripthtmlcssreactjsmaterial-ui

Adaptable Text Title

Is there a way to make text headings responsive? When looking at the example provided here, we can see the heading is "The Swift List". How can I ensure that the words "THE" and "LIST" remain aligned with the edges of the word "SWIFT"? While I have managed ...

htmlcsstwitter-bootstrapresponsiveheading

Make sure to keep Vue-Cookies intact even when closing the browser or tab

I have integrated vue-cookies into my Vue application. The code I'm using to store a cookie is as follows: $cookies.set('authUser', authUserObj); The object authUserObj contains the access_token. However, when I close and reopen the ta ...

javascriptvue.jscookies

Updating styled-components variables based on media queries - A step-by-step guide

My current theme setup looks like this: const theme = {color: red}; Within my components, I am utilizing this variable as follows: const Button = styled.button` color: ${props => props.theme.color}; `; I am now faced with the challenge of changin ...

javascriptreactjsstyled-components

Unsure how to proceed with resolving lint errors that are causing changes in the code

Updated. I made changes to the code but I am still encountering the following error: Error Type 'String' is not assignable to type 'string'. 'string' is a primitive, but 'String' is a wrapper object. It is recom ...

javascriptjqueryhtmltypescriptkendo-ui

Prevent regex special characters in JavaScript while preserving the original string for keyword matching

As I develop my web page, I encountered an issue while trying to highlight text based on user input in the search box. My search algorithm matches each space-separated keyword, but ran into problems when including brackets in the search term. This caused a ...

javascriptregexvue.js

I am currently in the process of conducting an automated test focused on the creation of a new Facebook account

I am currently facing a challenge while attempting an automated test on Facebook. The issue lies in clicking the "Create Account" button using FindElement by id, which is not functioning as expected. public void createAccount(String firstName, String lastN ...

javascriptseleniumselenium-rc

The URI entered is not valid: The parsing of the hostname failed. Electron Builder

Having an issue while trying to build an electron app using squirrel, even though the iconUrl is valid. Here is my package.json configuration: "squirrelWindows": { "iconUrl": "http://95.85.39.111:5005/skylog.ico" }, Error message received: An unhand ...

javascriptnode.jselectronelectron-builder

transferring information from child to parent with the help of Vue.js and Laravel

As a newcomer to vue.js, I have a child component called 'test' and a parent component called 'showdata'. My issue arises when I try to emit data from the child to the parent - while the emission is successful, displaying the data in th ...

javascriptvue.jsvuejs2vue-componentvue-directives

Encountering issues with importing a module from a .ts file

Although I have experience building reactJS projects in the past, this time I decided to use Node for a specific task that required running a command from the command line. However, I am currently facing difficulties with importing functions from other fil ...

javascriptnode.jstypescriptnpm

Unable to wrap the strings from the database in a span element

I have a challenge where I need to enclose the first and last strings that represent the title and price of a product within a div using a span tag. These strings are dynamic, sourced from a database, and differ for each product. I have attempted to use th ...

javascripthtmljquerywrapper

Parent and router-outlet in Angular 4 fashion

Suppose we are presented with the following code: <div class="container"> <div class="row"> <div class="col-sm-4 col-md-3"> <app-sidebar></app-sidebar> </div> <div class="c ...

javascriptangulartwitter-bootstrap-3

Create a duplicate of the State array using a React hook

Hey there! Currently, I'm working on an update function that looks like this: const [listLockerUserType, setListLockerUserTypes] = useState([]) const getData = (content) => { let contentLocker = {...content} let keys = Object.keys( ...

reactjsstatedeep-copy

"Encountering a challenge when trying to populate a partial view using AngularJs and MVC

I am a beginner in AngularJS and I'm using a partial view for Create and Edit operations, but I'm encountering issues while trying to retrieve the data. The data is successfully being retrieved from my MVC controller but it's not populating ...

javascriptangularjsasp.net-mvcasp.net-mvc-4asp.net-mvc-5

Is there a way to ensure that both new Date() and new Date("yyyy-mm-dd hh:mm:ss") are initialized with the same timezone?

When utilizing both constructors, I noticed that they generate with different timezones. Ideally, they should be in the same timezone to ensure accurate calculations between them. I attempted to manually parse today's date and time, but this feels li ...

javascriptdate

My component fails to load using Angular Router even though the URL is correct

I have been experiencing an issue while trying to load my Angular component using the router. The component never appears on the screen and there are no error messages displayed. app-routing-module { path: '', redirectTo: '/home', ...

javascriptangulartypescriptangular8

Using JavaScript, create a regular expression with variables that can be used to identify and match a specific section of

Struggling to apply a regex (with 1 variable) to compare against a HTML code page stored as text. The HTML code is separated into an array, with each element representing a snippet like the one below. Each element showcases details of fictional Houses (na ...

javascriptregex

Command Internet Explorer 9 to disregard media queries and instead adhere to the minimum width rule

Is there a way to prevent IE9 from recognizing media queries or following min-width? I have created a responsive design for mobile devices using media queries on my website, and they function perfectly in modern browsers. However, some users still use old ...

css

Is it possible to invoke the unnamed function in jQuery using the .call() method?

Imagine I have a button with the ID #click, And let's say I attach the click event like this: $('#click').click(function(){ alert('own you'+'whatever'+$(this).attr('href')); }); However, I wish to change w ...

javascriptjqueryfunction

User missing in the transition from POST to GET

My journey with Node has just begun, and I decided to delve into the Rocket Rides demo available on GitHub. While exploring the pilot sign-up feature on the web app, I encountered a roadblock when trying to implement a similar functionality for passenger s ...

javascriptnode.jsexpress