Different web browsers use different font formats, it can be quite tricky to get it working cross browser and unavoidably, you have to declare multiple file sources for the same font to satisfy all browsers, the easiest way to do that is to use a generator such as Font-Squirrel
https://www.fontsquirrel.com/tools/webfont-generator
For the best possible support use this to declare your font:
@font-face {
font-family: 'MyWebFontName';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
As you can see, there are 5 font formats supported eot, woff, woff2, ttf and svg. You'll obviously need to provide the files and update the source url accordingly.
For more information on the current state of play have a read of this:
https://css-tricks.com/snippets/css/using-font-face/
That article is almost a year old but as I understand it, for backwards compatability its still relevant and correct and the code above is required to ensure font consistency across browsers.
TTF and SVG fonts for the web are being phased out but for older browsers they are still required. Just to reassure you, all of those files wont be downloaded on page load. Only the file in the font format supported by your particular browser will be downloaded.
