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 -...
For further actions, you may consider blocking this person and/or reporting abuse
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';
Don't write formats like
format('ttf')
orformat('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.
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.
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.Did you find any solutions for this?
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:...
}
Great post! What if I were to import a whole family of fonts?
Followed step by step (except for downloading two font formats) and downloaded my fonts from the site provided but just get an error
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...
You can also to this:
Interesing approach! Thanks for share it.
It works on React Native ?
Thank you ❤️, you saved my life!
Thank you. Good job.
This is so great. Thank you!
great stuff, thank you!
Nice Article
Great tutorial. It has helped me a lot!
Thank you, i was looking for this :D