Why is my local font not being applied with Emotion global styling? - reactjs

Question

I am trying to use a locally hosted font in a React project that utilizes Emotion, and its Global component. This method works great for web fonts, like Google Fonts, but when I downloaded that same font and tried to apply it as a local .ttf file using #font-face, I couldn't achieve the same result.
Here's the important file, App.js:
import React from "react";
import { Global, css } from "#emotion/core";
import styled from "#emotion/styled";
const GlobalStyles = css`
#import url("https://fonts.googleapis.com/css?family=Dancing+Script&display=swap");
#font-face {
font-family: "Local Font";
src: url("fonts/DancingScript-Regular.ttf");
}
* {
text-align: center;
}
`;
const FromGoogle = styled.h1`
font-family: "Dancing Script";
`;
const FromLocal = styled.h1`
font-family: "Local Font";
`;
function App() {
return (
<div className="App">
<Global styles={GlobalStyles} />
<FromGoogle>This text's font family is from Google.</FromGoogle>
<FromLocal>
This text's font family should be the same, except it comes from a local
font file, and it's not working.
</FromLocal>
</div>
);
}
export default App;
For some reason, the text in FromGoogle uses the Google font fine, while the text from FromLocal doesn't. My first thought was that it's an issue with the path, but if it is, I couldn't tell.
Here's the full project on GitHub. I used Create React App, and removed all the irrelevant boilerplate.

Answer 1

In my Next.js app I am using emotion with these versions:
"#emotion/react": "^11.1.1",
"#emotion/styled": "^11.0.0",
My global styles are:
export const GlobalStyles = () => (
<Global
styles={css`
#font-face {
font-family: 'Faustina';
font-style: normal;
font-weight: 700;
src: local(''),
url('/fonts/Faustina/Faustina.woff') format('woff'),
url('/fonts/Faustina/Faustina.ttf') format('truetype');
}
* {
box-sizing: border-box;
font-family: Faustina;
}
html,
body {
width: 100%;
height: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
`}
/>
);
My fonts are in
project_root/public/fonts/Faustina
// explicitly
project_root/public/fonts/Faustina/Faustina-Bold.ttf
project_root/public/fonts/Faustina/Faustina-Bold.woff
In order to see font changes, I needed to restart dev server, e.g. yarn dev. Before restarting I had same issue where fonts weren't displayed (even downloaded in dev tools Network tab).

Answer 2

am using these versions in my gatsby project;
"#emotion/react": "^11.8.1",
"gatsby": "^4.8.0"
index.html file is not available so you can't add <style> html tag and embed #font-face inside it.
Host your downloaded fonts inside your src/myfonts directory then import any of your fonts using the static import statement.
import font1 from './myfonts/font1.ttf';
then call url(font1) css function with the font1
const globalStyle = css`
#font-face {
font-family: 'font1';
src: url(${font1}) format('truetype');
};
`;
it worked in my case;

Answer 3

In my case, the solution was as in this answer.
I needed to define the fonts in a css file that is imported into the index.html like so:
<link rel="stylesheet" type="text/css" href="/styles/fonts.css" />
I was then able to reference the font family names in my emotion theme and have them load correctly.