3

I am trying to apply custom fonts on my web-page, but some fonts are not applying. Can anyone help me please?

Here's the code:

CSS:

@font-face {
   font-family: 1-ProLook_Athletic;
   src: url('Fonts/QStrikeFonts/1-ProLook_Athletic.TTF');
}

HTML:

<div style="font-size:35px; font-Family: 1-ProLook_Athletic"> 
  The quick brown fox
</div>
llanato
  • 2,508
  • 6
  • 37
  • 59
user3168256
  • 53
  • 7
  • have you tried to use the @import instead? In the CSS – Patrick R Jan 26 '15 at 12:20
  • Your font-family declaration needs `'....' ` quotes . Also be sure you have the right format for the right browser – DaniP Jan 26 '15 at 12:21
  • First of all, check if the font files are actually being loaded (you will need other files to be compatible in all browsers. Have a look at "@font-face file types" here http://www.miltonbayer.com/font-face/) Secondly, you need to check inside the files as the name not necessarily matches the name of the file. Try also putting the name of the font inside quotes. – Teknotica Jan 26 '15 at 12:23
  • possible duplicate of [Cross browser @font-face use](http://stackoverflow.com/questions/9519560/cross-browser-font-face-use) – Bram Vanroy Jan 26 '15 at 13:22
  • Try this manual step-by-step http://stackoverflow.com/questions/28082480/how-to-use-wedding-text-in-css-font-family/28083329#28083329 – Mardzis Jan 26 '15 at 13:30

2 Answers2

3

You missed some file formats (woff, woff2, eot, svg) and your browser seems to not support TTF files. Read this post to use webfonts:
http://css-tricks.com/snippets/css/using-font-face/

As @Danko said, you also need to add single quotes (i.e: '') to your font name declaration.

flks
  • 610
  • 10
  • 28
  • Can't confirm that works if you don't say more about it. Maybe this specific file is corrupted? Also try to rename the file, without "-" nor "_". – flks Jan 26 '15 at 12:28
  • Already try to rename the file these fonts are working MS Word after installing but when i try to apply on web these are not working. also tried after rename without "-" and "_", but no result – user3168256 Jan 26 '15 at 12:34
  • You **need** to convert that font to the webfonts formats, otherwise it willn't works. Using fonts on web is not like activate a font on your computer. – flks Jan 26 '15 at 12:38
1

Make sure your browser which you are currently using that supports the .TTF format file. Add also .eot and otf format files, Try with this:

@font-face {font-family: 1-ProLook_Athletic;src: url(1-ProLook_Athletic.eot);src: local('1-ProLook_Athletic'), local(1-ProLook_Athletic'), 
     url(1-ProLook_Athletic.otf) format('opentype');}
rajesh
  • 1,475
  • 10
  • 23