CODEWITHSUNDEEP
reactjsfontsfont-faceemotioncss-in-js
TrevLev
TrevLev

Reputation: 139

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

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.

Upvotes: 4

Views: 10268

Answers (3)

josh
josh

Reputation: 101

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;

Upvotes: 1

James McDonell
James McDonell

Reputation: 35

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.

Upvotes: 0

JSGuru
JSGuru

Reputation: 329

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).

Upvotes: 3

Related Questions