title: How to add a custom font to the themeprovider in styled components?
body: <p>I'm building a React app using material-ui styled-components with TypeScript.</p>
  
  <p>I'm trying to use a custom font with my styled components, but I'm struggling to get it to work.</p>
  
  <p>First thing I did was I created a <code>globalStyles.ts</code> file <code>createGlobalStyle</code>:</p>
  
  <pre><code>import { createGlobalStyle } from "styled-components";
  
  export const theme = {
    primaryBlue: "#0794B4",
    secondaryBlue: "#043157",
    primaryWhite: "#fff"
  };
  
  const GlobalStyle = createGlobalStyle`
    @font-face {
      font-family: pala;
      src: url("./assets/pala.ttf") format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    html {
      font-size: 10px;
    }
  `;
  export default GlobalStyle;
  </code></pre>
  
  <p>I added the <code>ThemeProvider</code> and the <code>GlobalStyle</code> to my app:</p>
  
  <pre><code>import React, { Component } from "react";
  import "./App.css";
  import NavBar from "./components/NavBar";
  import { ThemeProvider } from "styled-components";
  import GlobalStyle, { theme } from "./globalStyles";
  
  class App extends Component {
    render() {
      return (
        &lt;ThemeProvider theme={theme}&gt;
          &lt;div className="App-header"&gt;
            &lt;NavBar title="MyCompany" /&gt;
            &lt;GlobalStyle /&gt;
          &lt;/div&gt;
        &lt;/ThemeProvider&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>And then I tried to use this font from within my styled component:</p>
  
  <pre><code>import React, { PureComponent } from "react";
  import styled from "styled-components";
  import AppBar from "@material-ui/core/AppBar";
  import Toolbar from "@material-ui/core/Toolbar";
  import Typography from "@material-ui/core/Typography";
  
  export const StyledAppBar = styled(AppBar)``;
  export const StyledToolbar = styled(Toolbar)``;
  export const StyledTypography = styled(Typography)`
    &amp;&amp; {
      font-family: pala;
      font-size: 10rem;
      color: ${props =&gt; props.theme.primaryWhite};
    }
  `;
  
  export interface Props {
    title: string;
  }
  
  export class NavBar extends PureComponent&lt;Props&gt; {
    render() {
      return (
        &lt;StyledAppBar&gt;
          &lt;StyledToolbar&gt;
            &lt;StyledTypography&gt;{this.props.title}&lt;/StyledTypography&gt;
          &lt;/StyledToolbar&gt;
        &lt;/StyledAppBar&gt;
      );
    }
  }
  
  export default NavBar;
  </code></pre>
  
  <p>The styles for the color and the font size are correctly applied, but the custom font is not. Do I somehow have to add the custom font to the <code>ThemeProvider</code> and use it via <code>props.theme.font</code>? Or am I doing something wrong?</p>