React component library, Fonts not working

Question

I created a component library in react using styled component. The library contains some custom fonts, in different formats, woff, woff,eot, tff, otf and etc. when I use the fonts inside the component library, the fonts works as it should.

The problem arises, when I import the library in another react project. When I look at the node modules, I can se that the fonts are included. The project is bade using React and Next.js. am I missing some important steps to use these fonts? I don´t get any error. The application, just use the fallback font specified. I I´m not interested in changing the font of my of my whole application. I want to be able to access the font exported with my component Library, and use them in some places og my application.

An example: My component Library contains the component "Headline", which use a custom font.

export const h1CSS = cssStyled`
margin-top: ...;
  margin-bottom: ...;

  line-height: ...;
  font-weight: ...;
  color: ...;
  font-family: "Some_custom_Font";
  font-style: normal;
  margin-top: 0;
  text-rendering: optimizeLegibility;
`;

In the application, which import the component Library, I can use the Headline component. The only problem is that the headline component does not have the custom font, when used inside my application.

@Anand yes I did. It was a combination of forgetting to use globalstyle the right place and a misspelled font name — EdwinS95

SHUVO MUSA SHUVO MUSA · Accepted Answer · 2020-11-17T08:06:32

Without knowing the error messages or all others aspect that hard to tell what exactly you need to do.

But You can customised the Document _document.js for your need. Which is more efficient to solve.

To override the default Document, create the file ./pages/_document.js and extend the Document class as shown below:

import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
           //You can add custom Favicon from here also              
           <link rel="icon" href={Favicon_URL} type="image/png" />
          <meta
            httpEquiv="cache-control"
            content="no-cache, nostore, must-revalidate"
          />
          <meta httpEquiv="pragma" content="no-cache" />
          <meta httpEquiv="expires" content="0" />
          //Please add your woff, woff,eot, tff, otf files here. 
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument;

Official Documentation page

React component library, Fonts not working

1 Answers