#font-face Two parse errors - css

Question

The site runs perfectly on the desktop browser.
On a mobile phone browser, the site does not read the font files.
So I checked the CSS validator and found 2 errors, parse errors. I've tried a couple different things and can't seem to get rid of the parse errors. Here's the code that is faulty with the errors. The font file is stored locally.
Any advice would be appreciated.
#font-face {
font-family: 'trashhand';
src: url('TrashHand.ttf');
}

Answer 1

You can try to create a fallback system for the font-family usage. For example:
font-family:'Trashhand', 'Lucida Sans', 'Arial'
The main purpose for fallback system is to create alternative font usage, so if the browser doesn't support the first font it will try the next options.

Answer 2

You can try to import font in proper ways.
CSS TO IMPORT FONT:
#font-face {
font-family: 'TrashHand';
src: url('TrashHand.ttf') format('truetype'); /* Safari, Android, iOS */
}
CSS USAGE:
body{
font-family:'TrashHand', sans-serif;
}
Also, you can see here many possiblities to import different fontface for different browser and systems.

Answer 3

First of all, although the format hint is optional if your font is OpenType or TrueType, it's worth specifying it explicitly:
#font-face {
font-family: 'trashhand';
src: url('TrashHand.ttf') format('truetype');
}
Besides that, there were some problems with path recognizing on mobile devices. So you can include a / to the beginning of your font path and that might fix everything.
The last but not the least, consider using woff or woff2 that are compatible with major browsers.