How to insert a Local Font in my Project? - reactjs

Question

I used IconMoon to create custom icon fonts.
In the .html that is generated by it, it works perfectly. But when I try to use it in my project with React and Styled-Components, instead of being displayed the icon displays its content in HTML.
My fonts are in the path: src/assets/fonts/icons
Fonts are being downloaded by the browser and no errors are displayed:
Soon I am trying to create a component for my fonts, similar to FontAwesome and this happens:
MY COMPONENT:
import React from "react";
import styled from "styled-components";
const Tst = styled.i`
font-family: "spotify" !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
::before {
content: "\e900";
color: red;
}
`;
const SaveFavorite = () => {
return <Tst />;
};
export default SaveFavorite;
MY GLOBAL STYLES:
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
#font-face {
font-family: "spotify";
font-weight: normal;
font-style: normal;
src: url("../assets/fonts/spotify.eot?") format("embedded-opentype"),
url("../assets/fonts/spotify.ttf?") format("truetype"),
url("../assets/fonts/spotify.woff?") format("woff"),
url("../assets/fonts/spotify.svg?") format("svg");
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
outline: 0;
}
body {
font-family: 'CircularSpUIv3T', sans-serif;
color: white;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
user-select: none;
}
img {
width: 100%;
max-width: 100%;
height: auto;
}
`;
export default GlobalStyle;

Answer 1

If you look at the css generated by Styled Components, you'll find that the font paths aren't resolved at all, they are exactly the way you typed them. The browser won't be able to find relative paths in the src directory without some help from Babel, and the way you have it now these paths would just be passed as-is.
You have two options, although I'm not sure if both will work.
Option 1: move your fonts to the public directory
Files in the public directory can be found by the browser just like any old HTML page. In your global style, you would then have to use a path that is relative to public/index.html.
Your file structure would be something like:
project
|-- public
|-- index.html
|-- fonts
|-- spotify.eot
|-- spotify.ttf
|-- spotify.woff
|-- spotify.svg
|-- src
|-- global.style.js
|-- (...)
And your global.style.js:
const GlobalStyle = createGlobalStyle`
#font-face {
font-family: "spotify";
src: url("fonts/spotify.eot?") format("embedded-opentype"),
url("fonts/spotify.ttf?") format("truetype"),
url("fonts/spotify.woff?") format("woff"),
url("fonts/spotify.svg?") format("svg");
}
Option 2: keep your fonts in src, but make Babel resolve the paths for you
To make Babel resolve the paths, we need to import the files in our global.style.js, and then use the resolved path instead of the static one:
import SpotifyEOT from '../assets/fonts/spotify.eot';
// etc
const GlobalStyle = createGlobalStyle`
#font-face {
font-family: "spotify";
src: url(${SpotifyEOT}?) format("embedded-opentype"),
// [etc]
}
I don't know what the question mark is actually for but I assume you can just place it after the resolved path like I did.