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.

Folder Structure

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! :)