Custom Fonts in React-Meteor app
I wanted to use the ‘Digital Dream Fat’ font from Font Squirrel. After hours and hours of struggle I figured how Meteor loads custom fonts. So, here is a like a 3 step process to add any custom fonts.
Any fonts you need to include should reside in the App/public/fonts directory. Something like below.
Once you have the fonts included, you need to add the @font-face in your CSS file like below.
@font-face {
font-family: ‘digital_dream_fatregular’;
src: url(‘/fonts/digitaldreamfat-webfont.eot’);
src: url(‘/fonts/digitaldreamfat-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘/fonts/digitaldreamfat-webfont.woff’) format(‘woff’),
url(‘/fonts/digitaldreamfat-webfont.ttf’) format(‘truetype’),
url(‘/fonts/digitaldreamfat-webfont.svg#digital_dream_fatregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
Once you have added the font-face, you can use it anywhere in your app. Let’s say you want to add it to the body. So all you need to do is,
body{
font-family: ‘digital_dream_fatregular’;
}
I hope it helps you create beautiful apps! :)