Heroku Failed Deployment ttf Font - reactjs

Question

I've downloaded a font file from online with a .ttf extension. I'm loading it in my css like this
#font-face {
font-family: 'ChalkDash';
src: local('ChalkDash'), url(./fonts/ChalkDash.ttf) format('truetype');
}
It works fine on localhost and the font is loaded properly. My html elements get styled with that font to be clear. However, when I deploy to heroku, I get this error:
Counting objects: 30, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (30/30), done.
Writing objects: 100% (30/30), 2.74 KiB | 1.37 MiB/s, done.
Total 30 (delta 23), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> React.js (create-react-app) multi app detected
remote: -----> Configure create-react-app build environment
remote: Using `NODE_ENV=development`
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
remote: =====> Detected Framework: Multipack
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
remote: =====> Detected Framework: Node.js
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NPM_CONFIG_PRODUCTION=false
remote: NODE_VERBOSE=false
remote: NODE_ENV=development
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version 8.x...
remote: Downloading and installing node 8.11.1...
remote: Using default npm version: 5.6.0
remote:
remote: -----> Restoring cache
remote: Loading 2 from cacheDirectories (default):
remote: - node_modules
remote: - bower_components (not cached - skipping)
remote:
remote: -----> Building dependencies
remote: Installing node modules (package.json + package-lock)
remote: added 113 packages in 12.842s
remote:
remote: -----> Caching build
remote: Clearing previous node cache
remote: Saving 2 cacheDirectories (default):
remote: - node_modules
remote: - bower_components (nothing to cache)
remote:
remote: -----> Pruning devDependencies
remote: Skipping because NODE_ENV is not 'production'
remote:
remote: -----> Build succeeded!
remote: =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
remote: =====> Detected Framework: React.js (create-react-app)
remote: Writing `static.json` to support create-react-app
remote: Enabling runtime environment variables
remote:
remote: > reverse-hangman-app#0.1.0 build /tmp/build_b679e081d23e4ff1218d9c24620bc77b
remote: > react-scripts build
remote:
remote: Creating an optimized production build...
remote: Failed to compile.
remote:
remote: Module not found: Error: Can't resolve './fonts/ChalkDash.ttf' in '/tmp/build_b679e081d23e4ff1218d9c24620bc77b/src'
remote:
remote:
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! reverse-hangman-app#0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the reverse-hangman-app#0.1.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /app/.npm/_logs/2018-04-24T15_48_50_183Z-debug.log
remote: ! Push rejected, failed to compile React.js (create-react-app) multi app.
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to limitless-depths-91672.
remote:
To https://git.heroku.com/limitless-depths-91672.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/limitless-depths-91672.git'
I'm just wondering why this is happening. I've browsed so many posts on this forum but couldn't figure out why it won't work and I have tried a bunch of fixes to no avail. Can anyone point me in the right direction?