@font-face not working on chrome @font-face not working on chrome google-chrome google-chrome

@font-face not working on chrome


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).


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


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.