CODEWITHSUNDEEP
css
user1217380
user1217380

Reputation: 629

@font-face not working

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/gothammedium.eot);
 src: local('Gotham-Medium'),
 url(../fonts/Gotham-Medium.ttf) format('truetype'); 
} 

a { 
 font-family:Gotham,Verdana,Arial; 
}

Upvotes: 47

Views: 200290

Answers (13)

Chris Hayes
Chris Hayes

Reputation: 13771

Another thing to check:

For .otf font files, use format('opentype') NOT format('otf')

For example use:

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

For me, this was a case of GitHub Copilot getting its suggestion 95% correct, but incorrectly using format('otf'), which caused me to spend an hour debugging this.

Upvotes: 19

user14852781
user14852781

Reputation: 11

In my case, the problem was the font file itself. All the font files suddenly would not work anymore (seemed broken). It's an Electron app.

Originally everything worked fine, and I didn't change anything related to the font, just pushed my code to the repo. But the font didn't work for my teammates, after I pulled her changes, it didn't work for me as well.

The solution is quite easy in my case: I deleted all the font files and put the original files in again, then everything worked again.

Hope this helps those who have similar issues as mine.

Upvotes: 1

Justin Levene
Justin Levene

Reputation: 1677

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/

Upvotes: 0

radha gupta
radha gupta

Reputation: 23

try to put below html in head tag.It worked for me.

 <title>ABC</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Upvotes: -2

Mark Antony Agius
Mark Antony Agius

Reputation: 65

You need to put the font file name / path in quotes.
Eg.

url("../fonts/Gotham-Medium.ttf")

or

url('../fonts/Gotham-Medium.ttf')

and not

url(../fonts/Gotham-Medium.ttf)

Also @FONT-FACE only works with some font files. :o(

All the sites where you can download fonts, never say which fonts work and which ones don't.

Upvotes: 3

CDK
CDK

Reputation: 679

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

Upvotes: 2

Ganesh Garad
Ganesh Garad

Reputation: 381

I'm also facing this type of problem. After trying all solutions I got final solution on this problem. Reasons for this type of problem is per-defined global fonts. Use !important keyword for each line in @font-face is the solution for this problem.

Full description and example for Solution of this problem is here :- http://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Upvotes: -2

Eric Godoy
Eric Godoy

Reputation: 11

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.

Upvotes: 1

Tricky
Tricky

Reputation: 11514

I was having this same issue and I thought I'd share my solution as I didn't see anyone address this problem specifically.

The problem was I wasn't using the correct path. My CSS looked like this:

@font-face {
font-family: 'sonhoregular';
src: url('fonts/vtkssonho-webfont.eot');
src: url('fonts/vtkssonho-webfont.eot?') format('embedded-opentype'),
     url('fonts/vtkssonho-webfont.woff2') format('woff2'),
     url('fonts/vtkssonho-webfont.woff') format('woff'),
     url('fonts/vtkssonho-webfont.ttf') format('truetype'),
     url('fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg');
font-weight: normal;
font-style: normal;

The problem with the path is that I am referring to the font from my CSS file, which is in my CSS folder. I needed to come up a level first, then into the fonts folder. This is what it looks like now, and works great. 

@font-face {
font-family: 'sonhoregular';
src: url('../fonts/vtkssonho-webfont.eot');
src: url('../fonts/vtkssonho-webfont.eot?') format('embedded-opentype'),
     url('../fonts/vtkssonho-webfont.woff2') format('woff2'),
     url('../fonts/vtkssonho-webfont.woff') format('woff'),
     url('../fonts/vtkssonho-webfont.ttf') format('truetype'),
     url('../fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg');
font-weight: normal;
font-style: normal;

I hope this helps someone out!

Upvotes: 25

Jean Libera
Jean Libera

Reputation: 629

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

Upvotes: 4

Malcolm Boyanton
Malcolm Boyanton

Reputation: 296

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 "*")

Upvotes: 9

Rvervuurt
Rvervuurt

Reputation: 8961

Double period (..) means you go up one folder and then look for the folder behind the slash. For example:

If your index.html is in the folder html/files and the fonts are in html/fonts, the .. is fine (because you have to go back one folder to go to /fonts). Is your index.html in html and your fonts in html/fonts, then you should use only one period.

Another problem could be that your browser might not support .eot font-files.

Without seeing more of your code (and maybe a link to a live version of your website), I can't really help you further.

Edit: Forget the .eot part, I missed the .ttf file in your css.

Try the following:

@font-face { 
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf); 
}

Upvotes: 43

Terry
Terry

Reputation: 14219

Not sure exactly what your problem is, but try the following:

  1. Do the font files exist?
  2. Do you need quotes around the URLs?
  3. Are you using a CSS3-enabled browser?

Check here for examples, if they don't work for you then you have another problem

Edit:

You have a bunch of repeated declarations in your source, does this work?

@font-face { font-family: Gotham; src: url('../fonts/gothammedium.eot'); }

a { font-family:Gotham,Verdana,Arial; }

Upvotes: 1

Related Questions