1

I'm trying to import a CSS font but unfortunately it's not working and I'm really unsure why.

The font in the filesystem called 'deadjim.ttf' It is placed inside my main public_html and yes it is the correct path, visiting the path downloads the file.

@font-face {
    font-family: 'deadjim';
    src: url('http://url.com/deadjim.ttf'); /*URL to font*/
}

I've tried clearing my cache but this hasn't worked either. Apparently it's working on Safari but I have no means of checking having a windows PC

ConorReidd
  • 276
  • 5
  • 25
  • try using a relative path ... also you may need to include the `woff`formats of the font – DaniP Nov 24 '16 at 21:59

2 Answers2

0

Make sure that you're calling the font like normal; @font-face doesn't apply any styles to the html, it just defines the font.

#Define your font
@font-face {
  font-family: 'deadjim';
  src: url('http://url.com/deadjim.ttf'); /*URL to font*/
}

#Will apply the font as default on the entire page
html, body{
  font-family: 'deadjim';
}
Braeden Orchard
  • 235
  • 2
  • 12
0

To be sure your font works in all browser / most platforms, you will need to do something similar to this (with all formats provided) - it's not enough to just have the .ttf-file.

Here's an example of including FontAwesome:

@font-face {
  font-family: 'fontawesome';
  src: url('fontawesome-webfont.eot?v=4.7.0');
  src: url('fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
       url('fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
       url('fontawesome-webfont.woff?v=4.7.0') format('woff'), 
       url('fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
       url('fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
junkfoodjunkie
  • 3,168
  • 1
  • 19
  • 33
  • It seemed to be enough for my last file which was only a .ttf file. My assumption is if one ttf file works on the lastest Chrome, another one would – ConorReidd Nov 24 '16 at 22:41