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 -...
Collapse
 
anteronunes profile image
Antero Nunes • 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.

Collapse
 
negativefriction profile image
Chris Pete

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.

Collapse
 
khusseini profile image
Khairi Husseini

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.

Collapse
 
codeguruedison profile image
Ayaskanta Samal

Did you find any solutions for this?

Collapse
 
john1625b profile image
john1625b • 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:...
}

Collapse
 
earthnoob profile image
Jo

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

Collapse
 
michelestaffiere profile image
Michele

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)
Enter fullscreen mode Exit fullscreen mode
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;
    }
`;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
verthon profile image
Krzysztof Sordyl • 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...

Collapse
 
kanapka94 profile image
Adam

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;
`;

Enter fullscreen mode Exit fullscreen mode
Collapse
 
gugadev profile image
gugadev

Interesing approach! Thanks for share it.

Collapse
 
danphp7 profile image
Carlos Daniel

It works on React Native ?

Collapse
 
raghavsharma profile image
Raghav Sharma

Thank you ❤️, you saved my life!

Collapse
 
edicarlossilva profile image
Edi Carlos

Thank you. Good job.

Collapse
 
eveporcello profile image
Eve Porcello

This is so great. Thank you!

Collapse
 
patcki profile image
pat-cki

great stuff, thank you!

Collapse
 
surajkamdi profile image
Suraj Kamdi

Nice Article

Collapse
 
gixxerblade profile image
Steve Clark 🤷‍♀️

Great tutorial. It has helped me a lot!

Collapse
 
msandovaldev profile image
Marco A. Sandoval E.

Thank you, i was looking for this :D