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

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

Check your resources tab in the inspector/firebug to make sure your fonts are being loaded correctly. — Christopher Marshall, Mar 27 '12 at 20:38
Sure hope you have the proper rights to that font, it looks like @font-face isn't supported by the foundry yet: http://www.typography.com/ask/faq.php?path=head#Ft_10 — Mark Ransom, Mar 27 '12 at 20:53
Just a suggestion: check out Google Web Fonts ([google.com/webfonts](http://google.com/webfonts)) You can link straight to these from CSS or meta tag — pep, Mar 27 '12 at 20:40
me too having the same issue, i am developing cordova application in which i am using me_quran font family, but it is not taking in the mobile app.. why?? pls help me [My Question](http://stackoverflow.com/questions/26859969/cordova-application-shows-phones-default-font-family) — Eann, Nov 21 '14 at 11:15

Rvervuurt · Accepted Answer · 2012-03-27T20:55:09.043

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); 
}

score 22 · Answer 2 · answered Jul 14 '15 at 22:21

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!

score 13 · Answer 3 · answered Nov 21 '21 at 23:18

13

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.

answered Nov 21 '21 at 23:18

Chris Hayes

11,505
6
33
41

1

Exact same problem! Copilot added `otf` instead of `opentype` and I completely overlooked it. Thanks for the great answer, I was pulling my hair out! – Aaron Meese Mar 23 '22 at 14:25
For future reference: this worked for me on Chromium. – Aamir Jun 27 '22 at 12:46

score 9 · Answer 4 · answered Mar 27 '12 at 20:59

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

score 4 · Answer 5 · edited Aug 19 '17 at 14:39

4

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.

edited Aug 19 '17 at 14:39

Thomas Fritsch

9,639
33
37
49

answered Aug 19 '17 at 14:10

Mark Antony Agius

67
1
3

score 3 · Answer 6 · answered Dec 22 '13 at 16:36

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

score 1 · Answer 7 · edited Aug 15 '16 at 11:56

1

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.

edited Aug 15 '16 at 11:56

pistache

5,782
1
29
50

answered Aug 15 '16 at 11:49

Eric Godoy

11
1

score 1 · Answer 8 · answered Jul 20 '17 at 10:17

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

Justin Levene · Answer 9 · 2020-09-02T14:00:19.910

0

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/

edited Sep 02 '20 at 14:00

answered Sep 02 '20 at 13:48

Justin Levene

1,630
19
17

score 0 · Answer 10 · answered Mar 03 '21 at 19:37

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.

score 0 · Answer 11 · answered Mar 27 '12 at 20:40

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

Do the font files exist?
Do you need quotes around the URLs?
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; }

score -2 · Answer 12 · answered Jun 06 '17 at 18:13

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

score -2 · Answer 13 · edited Feb 28 '20 at 21:02

-2

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

edited Feb 28 '20 at 21:02

danwellman

9,068
8
60
88

answered Jun 22 '17 at 11:43

radha gupta

23
4

@font-face not working

13 Answers13

Linked

Related