@font-face not working

Question

Don\'t know why but font is not displaying.Please help.

CSS(in css folder): style.css:

@font-face { 
 font-family: Gotham;
 src: url(../fonts/goth         


        

Answer 1

This is probably due to CORS (or not quoting paths) and is expected behaviour. I know it sounds confusing, but the reason is due to the source of your fonts and not the web page itself.

A good explanation and numerous solutions for Apache, NGINX, IIS or PHP available in multiple languages can be found here:

https://www.hirehop.com/blog/cross-domain-fonts-cors-font-face-issue/

Answer 2

I had this problem recently and the problem was that my web server was not configured to serve woff files. For IIS 7, you can select your site, then select the MIME Types icon. If .woff is not in the list, you need to add it. The correct values are

File name extension: .woff
MIME type: application/font-woff

Answer 3

By using the .. operator, you've have duplicated the folder path - and will get something like this : /wp-content/themes/wp-content/themes/twentysixteen/fonts/.

Use the console in your browser to see for this error.

Answer 4

I was developing for an Arabic client, and had an issue like this as well, after using a font generator to create my fonts. None of the fonts I was generating were working.

It turns out that there was a setting in the "Advanced options" of the genrator which I needed to select which would not only use a the Western language glyphs (a pre-selected option).

After removing this subset, my fonts then worked with the Arabic characters. I hope this may help someone else in this position.

Cheers

Answer 5

Using font-face requires a little understanding of browser inconsistencies and may require some changes on the web server itself. First thing you have to do is check the console to see if/what messages are being generated. Is it a permissions issue or resource not found....?

Secondly because each browser is expecting a different font type I would use Font Squirrel to upload your font and then generate the additional files and CSS needed. http://www.fontsquirrel.com/fontface/generator

And finally, versions of FireFox and IE will not allow fonts to be loaded cross domain. You may need to modify your Apache config or .htaccess (Header set Access-Control-Allow-Origin "*")