DEV Community

How to import a web font into your React App with styled components 4

Sibylle Sehl on February 11, 2019

Tired of being limited to requesting fonts over a CDN? Look no further. You might be required to import a font for a number of reasons -...

Read full post

Antero Nunes • Oct 18 '20 • Edited

Thank yooouuuuu!!!! ♥♥♥

And for those using TypeScript, create a fonts.d.ts file in /src folder and include the font extensions you want to import, like below ↓↓↓:

declare module '*.woff';
declare module '*.ttf';

Update - September 2021 | TTF and OTF Fonts:

Don't write formats like format('ttf') or format('otf'), because it is not gonna work.
If you are using TTF or OTF fonts, in the format options of @font-face, you should write as:
format('truetype');
format('opentype');

Don't use spaces when naming your font files
Wrong: My Awesome Font.ttf
Right: MyAwesomeFont.ttf

That's it! Now your project's Typescript understands fonts.

Chris Pete • Dec 19 '23

I created an account on this website just to like this and say thank you. Been tearing out my hair trying to figure out why this darned font wouldn't load-- it was because of the spaces. Thank you for this.

john1625b • Feb 23 '22 • Edited

great article. If I want all my components to use this font without specifying the font again and again for every component, how would I do that?

edit: in the global styles file do

* { font-family:... }

Khairi Husseini • Oct 15 '20

Do you by change know how to handle the font delivery when using this approach in a component library?
I setup my library to be bundled with rollupjs and the @rollup/plugin-url, however when running the implementing react application, the fonts are requested directly via http ./[hasedname].woff which results in a 404.

Ayaskanta Samal • Sep 30 '21

Did you find any solutions for this?

Krzysztof Sordyl • Aug 10 '20 • Edited

Thank you very much. Very informative. For people like me who are using Typescript you might want to declare your your font file types described here:
designcise.com/web/tutorial/how-to...

Johnathan Le • Apr 15 '20

Great post! What if I were to import a whole family of fonts?

Michele • Dec 14 '23

Followed step by step (except for downloading two font formats) and downloaded my fonts from the site provided but just get an error

 Uncaught SyntaxError: The requested module '/src/fonts/JetbrainsMono.woff?import' does not provide an export named 'JetBrainsMono' (at fonts.js:2:9)

import { createGlobalStyle } from 'styled-components';
import {JetBrainsMono} from './JetbrainsMono.woff';

export default createGlobalStyle`
    @font-face {
        font-family: JetBrains Mono;
        src: local('JetBrains Mono'), local('JetBrainsMono'),
        url(${JetBrainsMono}) format('woff');
        font-weight: 700;
        font-style: normal;
    }
`;

Adam • Jun 13 '22

You can also to this:

// simplified example

const App = () => <StyledContainer>
  <StyledButton>
    Click
  </StyledButton>
</StyledContainer>

const StyledContainer = styled.div`
    @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
`;

const StyledButton = styled.button`
    font-family: 'Lato', sans-serif;
`;