How to use custom fonts in React?

Question

I’m getting the following error:

TypeError:name.includes is not a function

This error occurs when I add the following code snippet:

fontFamily: fonts.regular

App.js

const fontConfig = {
  default: {
    regular: {
      fontFamily: "sans-serif",
      fontWeight: "normal"
    },
    medium: {
      fontFamily: "sans-serif-medium",
      fontWeight: "normal"
    },
    light: {
      fontFamily: "sans-serif-light",
      fontWeight: "normal"
    },
    thin: {
      fontFamily: "sans-serif-thin",
      fontWeight: "bold"
    }
  }
};

const theme = {
  ...DarkTheme,
  fonts: configureFonts(fontConfig),
  dark: true
};

export default function App() {
  return (
    <PaperProvider theme={theme}>
      <FirstScreen />
    </PaperProvider>
  );
}

Firstscreen code:

import React from "react";
import { View, Text } from "react-native";
import { withTheme } from "react-native-paper";

const FirstScreen = props => {
  const { colors, fonts } = props.theme;

  return (
    <View
      style={{
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: colors.background
      }}
    >
      <Text
        style={{
          color: colors.primary,
          fontFamily: fonts.regular
        }}
      >
        Oi mundo
      </Text>
    </View>
  );
};

export default withTheme(FirstScreen);

Answer 1

This depends on how you are styling your project, usually for those who really understand the concept of React the styled-components.

Soon knowing this I will give you two examples of how to use the custom font taking into account that you have a certain level of knowledge in React, follow the examples:

1) Using @import

Generally for the correct structuring of folders, the following is done:

src/styles/Fonts.js e src/styles/Global.js

Fonts.js

import { css } from 'styled-components';

const RobotoFont = css`
  @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
`;

export default RobotoFont;

Global.js

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  ${RobotoFont}
  body {
    font: 1rem Roboto, sans-serif;
  }
`;

export default GlobalStyle;

2) Using @font-face Generally for the correct structuring of folders, the following is done:

src/styles/Fonts.js, src/styles/Global.js e src/assets/fonts

Fonts.js

import { css } from "styled-components";

// FONT ICON'S
import {
  SpotifyEOT,
  SpotifyTTF,
  SpotifyWOFF,
  SpotifySVG,
  CircularLightEOT,
  CircularLightTTF,
  CircularLightWOFF,
  CircularLightWOFF2,
  CircularLightSVG,
  CircularBookEOT,
  CircularBookTTF,
  CircularBookWOFF,
  CircularBookWOFF2,
  CircularBookSVG,
  CircularBoldEOT,
  CircularBoldTTF,
  CircularBoldWOFF,
  CircularBoldWOFF2,
  CircularBoldSVG
} from "assets/fonts";

export const IconFontFace = css`
    @font-face {
        font-family: 'spotify';
        font-weight: normal;
        font-style: normal;
        src: url('${SpotifyEOT}?vvuwob');
        src: url('${SpotifyEOT}?vvuwob#iefix') format('embedded-opentype'),
             url('${SpotifyTTF}?vvuwob') format('truetype'),
             url('${SpotifyWOFF}?vvuwob') format('woff'),
             url('${SpotifySVG}?vvuwob#spotify') format('svg');
    }
`;

export const MainFontFace = css`
    @font-face {
        font-family: 'Circular-Light';
        font-weight: 300;
        font-style: normal;
        src: url('${CircularLightEOT}');
        src: url('${CircularLightEOT}') format('embedded-opentype'),
             url('${CircularLightTTF}') format('truetype'),
             url('${CircularLightWOFF}') format('woff2'),
             url('${CircularLightWOFF2}') format('woff'),
             url('${CircularLightSVG}') format('svg');
    }
    @font-face {
        font-family: 'Circular-Book';
        font-weight: 500;
        font-style: normal;
        src: url('${CircularBookEOT}');
        src: url('${CircularBookEOT}') format('embedded-opentype'),
             url('${CircularBookTTF}') format('truetype'),
             url('${CircularBookWOFF}') format('woff2'),
             url('${CircularBookWOFF2}') format('woff'),
             url('${CircularBookSVG}') format('svg');
    }
    @font-face {
        font-family: 'Circular-Bold';
        font-weight: bold;
        font-style: normal;
        src: url('${CircularBoldEOT}');
        src: url('${CircularBoldEOT}') format('embedded-opentype'),
             url('${CircularBoldTTF}') format('truetype'),
             url('${CircularBoldWOFF}') format('woff2'),
             url('${CircularBoldWOFF2}') format('woff'),
             url('${CircularBoldSVG}') format('svg');
    }
`;

Global.js

import { createGlobalStyle } from "styled-components";

// FONTS
import { MainFontFace } from "./Fonts";

// OTHERS
import Color from "./Colors";

const Themes = {
  default: {
    color: Color.greyLight2,
    background: Color.black2
  },
  midnight: {
    color: Color.greyBlack2,
    background: `linear-gradient(to right, ${
      Color.greyBlack2
    }, black), linear-gradient(transparent, black 70%)`
  },
  error: {
    color: "white",
    background: `linear-gradient(85deg, ${Color.red}, ${Color.orange} 60%)`
  }
};

const GlobalStyle = createGlobalStyle`
    ${MainFontFace};
    body {
        font-family: 'Circular-Light', 'Circular-Book', 'Circular-Bold', sans-serif;
    }
`;

GlobalStyle.defaultProps = {
  theme: "default"
};


export default GlobalStyle;

Soon in src/Assets/fonts note that we have another folder within this hierarchy called src/assets/fonts/circular and a file called src/assets/fonts/index.js. What place src/assets/fonts contains the source files (ttf, eot and etc. ), then the file index.js I did a technique called "barrel", that nothing else is an export technique, to facilitate our life in the Imports.

Index.js

// BARREL ICON'S FONT'S
export { default as SpotifyEOT } from "assets/fonts/icons/spotify.eot";
export { default as SpotifyTTF } from "assets/fonts/icons/spotify.ttf";
export { default as SpotifyWOFF } from "assets/fonts/icons/spotify.woff";
export { default as SpotifySVG } from "assets/fonts/icons/spotify.svg";

// BARREL MAIN FONT'S

// prettier-ignore
export { default as CircularLightEOT } from "assets/fonts/circular/CircularSpUIv3T-Light.eot";
// prettier-ignore
export { default as CircularLightTTF } from "assets/fonts/circular/CircularSpUIv3T-Light.ttf";
// prettier-ignore
export { default as CircularLightWOFF } from "assets/fonts/circular/CircularSpUIv3T-Light.woff";
// prettier-ignore
export { default as CircularLightWOFF2 } from "assets/fonts/circular/CircularSpUIv3T-Light.woff2";
// prettier-ignore
export { default as CircularLightSVG } from "assets/fonts/circular/CircularSpUIv3T-Light.svg";

// prettier-ignore
export { default as CircularBookEOT } from "assets/fonts/circular/CircularSpUIv3T-Book.eot";
// prettier-ignore
export { default as CircularBookTTF } from "assets/fonts/circular/CircularSpUIv3T-Book.ttf";
// prettier-ignore
export { default as CircularBookWOFF } from "assets/fonts/circular/CircularSpUIv3T-Book.woff";
// prettier-ignore
export { default as CircularBookWOFF2 } from "assets/fonts/circular/CircularSpUIv3T-Book.woff2";
// prettier-ignore
export { default as CircularBookSVG } from "assets/fonts/circular/CircularSpUIv3T-Book.svg";

// prettier-ignore
export { default as CircularBoldEOT } from "assets/fonts/circular/CircularSpUIv3T-Bold.eot";
// prettier-ignore
export { default as CircularBoldTTF } from "assets/fonts/circular/CircularSpUIv3T-Bold.ttf";
// prettier-ignore
export { default as CircularBoldWOFF } from "assets/fonts/circular/CircularSpUIv3T-Bold.woff";
// prettier-ignore
export { default as CircularBoldWOFF2 } from "assets/fonts/circular/CircularSpUIv3T-Bold.woff2";
// prettier-ignore
export { default as CircularBoldSVG } from "assets/fonts/circular/CircularSpUIv3T-Bold.svg";

You can access my github, there I have several reactjs repositories with a great folder structure and clean code. CLICK HERE TO ACCESS.