@font-face not working on chrome

Question

I'm using the latest version of google chrome and it won't render font face at all.

I'm running Debian Linux, and all other browsers , including Chromium , show included fonts properly.

Font face declaration I'm using is:

@font-face {
    font-family: Dejaweb;
    src: url('DejaWeb.ttf');
}

@font-face {
    font-weight: bold;
    font-family: Dejaweb;
    src: url('DejaWeb-Bold.ttf');
}

try src: url('DejaWeb.ttf') format('truetype'); and src: url('DejaWeb-Bold.ttf') format('truetype'); — AMayer, Mar 09 '12 at 21:53
@BojanSavic Look at AMayer's comment... forgot about the format... — henryaaron, Mar 09 '12 at 21:55
@tybro0103 happening on localhost, can't provide the link right now — Bojan Savic, Mar 09 '12 at 21:56
Generate your font face using http://www.fontsquirrel.com/fontface/generator, it'll give you everything ready made, you have to just put it in the right place. — The Alpha, Mar 09 '12 at 22:05
I thought chrome only worked with woff type? I use eot for IE and woff to cover every other browser. — Andrew, Mar 09 '12 at 23:21
Does the Font Squirrel demo.html file you get with the Generator files work? If so, you likely have a CSS problem. — Font Squirrel, Mar 10 '12 at 03:03
Or it could just be a borked font. I've had a few free sites that supply the wrong font. — Joseph Lust, May 23 '13 at 03:54

score 12 · Answer 1 · edited Jan 21 '19 at 05:01

12

Try this

   src:url('DejaWeb-Bold.ttf') format('truetype'),

Also if the fonts are available in other different format from where you got them then I suggest writing all the cross browser compatibly in the following manner

    @font-face {
     font-family: "Dejaweb";
     src: url("DejaWeb-Bol.eot") format('embedded-opentype'), /* EDIT correction on this line */
     url('DejaWeb-Bol.woff') format('woff'), /* Modern Browsers */
     url('DejaWeb-Bol.ttf') format('truetype'), /* Safari, Android, iOS */
     url('DejaWeb-Bol.svg#Dejaweb') format('svg'); /* Legacy iOS; correction on this line */
     font-weight:bold;
    font-style:normal;
  }

edited Jan 21 '19 at 05:01

Richard D

327
3
16

answered Mar 11 '12 at 10:52

jmishra

2,086
2
24
38

It was working fine on Firefox. I had to add the 'src: ' keyword as you have suggested to make it work on Chrome. thanks – Cedric Dec 03 '18 at 12:02
1

Using 'truetype' instead of 'ttf' in the format worked for me thanks (Chrome on Ubuntu 18.04) – ericgithinji Aug 08 '22 at 14:02

score 10 · Answer 2 · answered May 23 '13 at 13:48

Whenever @font-face inexplicably doesn't work for me in the supposedly compliant browsers, I drop this in my .htaccess file. Supposedly some browsers won't load fonts hosted on other domains, and this bit of code troubleshoots that, but sometimes it is the only remedy to force fonts to load that are hosted on same domain as well. Generally its more of an issue with Firefox than with Chrome, but I just now used this to force fonts in Chrome while Firefox was working fine. Go figure.

<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Another inexplicably weird thing I have had happen with the @font-face syntax was that it wouldn't load font files properly with caps in the name. This only was an issue once, and after repeatedly banging my head against the desk troubleshooting @font-face a bunch of different ways, as a last resort I changed all font files and font-family name to lowercase characters, and it worked fine (I think that was an issue in ever-finicky IE, and only one website I was doing, exact same syntax on another website worked fine with upper and lowercase characters).

score 5 · Answer 3 · edited Mar 10 '13 at 09:16

5

If you put your font files in a folder named "fonts" and your CSS files in the folder named "style",then you should write the url like this

@font-face {
 font-weight: bold;
 font-family: Dejaweb;
 src: url('../fonts/DejaWeb-Bold.ttf'); }

I just corrected the same mistake like this.

edited Mar 10 '13 at 09:16

Arun

116,683
26
284
387

answered Mar 10 '13 at 08:56

Lenville

85
1
7

Mayank Gupta · Answer 4 · 2015-10-06T18:34:03.633

0

@font-face {    
font-family: 'FONT-NAME';
src: url('RELATIVE-FONT-URL') format('FONT-FORMAT');
}

div {
    font-family: 'FONT-NAME';
    font-weight: normal;
    font-style: normal;
}

Adding the font-weight and font-style with normal in value worked for me.

edited Oct 06 '15 at 18:34

answered Oct 06 '15 at 17:42

Mayank Gupta

31
5

@font-face not working on chrome

4 Answers4

Linked