@font-face uncaught syntax error in chrome

Question

Gone through some other threads regarding a similar problem, but their solution didn't work. I had been successfully using the code below to add a font to our site which was based off a comprehensive bootstrap template. I now started work on a new site, this time from only a base bootstrap template and tried to add fonts via the same method.

@font-face {
   font-family: 'myfontname';
   src: url('font/myfontname-Regular.svg'); 
   src: url('font/myfontname-Regular.eot'); 
   src: url('font/myfontname-Regular.eot?#iefix') format('embedded-opentype'), 
   url('font/myfontname-Regular.woff2') format('woff2'), 
   url('font/myfontname-Regular.woff') format('woff'), 
   url('font/myfontname-Regular.ttf')  format('truetype') 
}

@font-face {
  font-family: 'myfontname';
  font-weight: bold;
  src: url('font/myfontname-Bold.svg'); 
   src: url('font/myfontname-Bold.eot'); 
   src: url('font/myfontname-Bold.eot?#iefix') format('embedded-opentype'), 
   url('font/myfontname-Bold.woff2') format('woff2'), 
   url('font/myfontname-Bold.woff') format('woff'),
   url('font/myfontname-Bold.ttf')  format('truetype') 
}

.myfontnameBOLD{
  font-family: myfontname; 
  font-weight: bold;
  text-transform: uppercase;
}

.myfontnameREG{
  font-family: myfontname; 
}

Files are all stored in the same manner as previous ( a Font folder within my css folder). However this time I get the following error

uncaught syntaxError:Invalid or unexpected token

In Chrome the debug highlights the very first line where it says "@font-face" I ran this through a Linter and no problem, but even I.E is giving an error and highlighting @font-face and saying it has a missing semi-colon. Anyone able to see what might be wrong? thanks

Answer 1

ok I found the answer and it was a silly one. thanks for your replies. the problem was the actually declaration of the css file in my HTML. I had put it in <script> tags by mistake instead of <link>. slaps self

Answer 2

Could it be the missing semi-colon after url('font/myfontname-Regular.ttf') format('truetype') and url('font/myfontname-Bold.ttf') format('truetype') ?

@font-face {
   font-family: 'myfontname';
   src: url('font/myfontname-Regular.svg'); 
   src: url('font/myfontname-Regular.eot'); 
   src: url('font/myfontname-Regular.eot?#iefix') format('embedded-opentype'), 
   url('font/myfontname-Regular.woff2') format('woff2'), 
   url('font/myfontname-Regular.woff') format('woff'), 
   url('font/myfontname-Regular.ttf')  format('truetype'); 
}

@font-face {
  font-family: 'myfontname';
  font-weight: bold;
  src: url('font/myfontname-Bold.svg'); 
   src: url('font/myfontname-Bold.eot'); 
   src: url('font/myfontname-Bold.eot?#iefix') format('embedded-opentype'), 
   url('font/myfontname-Bold.woff2') format('woff2'), 
   url('font/myfontname-Bold.woff') format('woff'),
   url('font/myfontname-Bold.ttf')  format('truetype'); 
}

I've added the semi-colon

Answer 3

I believe that Ayush's answer may solve your problem! I would also like to add that the order in which the fonts are loaded may create some problems in some browsers and platforms. The order in which the src element is read varies depending on what browser and version are using it. Take the example below from CSS-Tricks,

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compatible 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 */
}

It's best to include SVG last because it might be picked up by some browsers (like the modern ones) where woff or woff2 is supported.