DEV Community

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

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.