3

I use laravel framework. But in chrome console this error happening and font-family not working.

Failed to load resource: the server responded with a status of 500 (Missing Content-Type Header)

In css:

@font-face{
  font-family: 'HelveticaNeue';
  src: url(../fonts/HelveticaNeue.otf);
}

After searching I found that adding format() can solve problem. and I changed to this : 

@font-face{
 font-family: 'HelveticaNeue';
 src: url(../fonts/HelveticaNeue.otf) format(opentype);
}

Now error not showing in console but font-family still not working.

My file structure is: 
public
    css
    fonts

Thanks.

Tiddo
  • 6,331
  • 6
  • 52
  • 85
Vahab Veliyev
  • 31
  • 2
  • Take a look at your log files, does it says anything? Try to load the resource with Chrome, if Laravel crashes and you're in debug mode you should see an error message. – Elie Faës Aug 15 '16 at 10:18

1 Answers1

0

If you don't get a 404 error for the asset, the issue is probably Chrome not liking the .otf font format.

You can generate a complete set of webfont types using the FontSquirrel Webfont generator: https://www.fontsquirrel.com/tools/webfont-generator

If you do get a 404 error you may need to add the necessary mimetypes for your server to be able to serve the fonts. Check out this little guide for how to enable this for apache or nginx: https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts

Either way it's always worth having your .ttf and .woff fonts for cross browser compatibility, so definitely generate a complete font kit over at FontSquirrel.

Steve O
  • 5,224
  • 1
  • 24
  • 26