CSS Help

File: M7Lr6.gif (2MB, 640x480px) Image search: [Google]

2MB, 640x480px

Hoping to find some coding help here. I'm using @font-face, and it's working on my local device (because the font is installed), but it's not working on the server.

/*THE @FONT-FACE CODE*/

@font-face {
font-family: BigNoodleTitling;
src: url('Files/Fonts/big_noodle_titling.ttf');
src: url('Files/Fonts/big_noodle_titling.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('Files/Fonts/big_noodle_titling.woff2') format('woff2'), /* Super Modern Browsers */
url('Files/Fonts/big_noodle_titling.woff') format('woff'), /* Pretty Modern Browsers */
url('Files/Fonts/big_noodle_titling.ttf') format('truetype'), /* Safari, Android, iOS */

url('Files/Fonts/big_noodle_titling.svg#svgFontName') format('svg'); /* Legacy iOS */
src: local('BigNoodleTitling');

/* BODY CODE */

body {
font-size: 100%;
font-family: BigNoodleTitling, Helvetica, Helvetica Neue, DIN Condensed Bold, Avenir, Times New Roman;
background-color: rgba(255,255,255,1.00);
}

/* CLASS CODE */

.nav {
max-width: 1000px;
min-width: 320px;
margin-left: auto;
margin-right: auto;
padding-bottom: 1px;
text-align: center;
}
.nav h2 {
font-family: 'BigNoodleTitling';
display: inline;
font-size: 32px;
padding: 10px;
color: #FFB8BB;
letter-spacing: 1.2px;
}
.nav h2 a {
color: #FFB8BB;
text-decoration: none;
}
.nav h2 a:hover {
color: #A17477;
text-decoration: none;
}