Font not loading in Reactjs

Question

This is how I am loading my Font files in reactjs

import styled from 'styled-components';
import fontUrls from './UberMove-Bold.ttf';
import fontUrls1 from './UberMove-Light.ttf';
import fontUrls2 from './UberMove-Medium.ttf';
import fontUrls3 from './UberMove-Regular.ttf';

const Fonts = styled`
    @font-face {
       font-familty: 'UberMove-Light';
       src: url(${fontUrls1}) format('truetype');
    }`;

This throws an error while importing

Uncaught Error: Cannot create styled-component for component: @font-f .ace{font-familty:'UberMove-Light';src:url(,) format('truetype');}.

Clarity · Accepted Answer · 2019-10-21 16:29:24Z

5

You need to load the font-face globally and then use it in the components:

import { createGlobalStyle } from "styled-components";

const GlobalStyles = createGlobalStyle`
  body {
    @import url(${fontUrls1});
    font-family: 'UberMove-Light';
  }
`
const App = () => (
  <div>
    <GlobalStyles />

   //...

  </div>
)

edited Oct 21, 2019 at 16:29

answered Oct 21, 2019 at 6:34

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Font not loading in Reactjs

1 Answer 1

Comments

Your Answer

Collectives™ on Stack Overflow

Font not loading in Reactjs

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related