1

This is NOT a duplicate of Font-Face use absolute path.

In folder1, I have index.html, main.css and digital.tff. I don't understand why the font doesn't work with the full path. I tested wood-table.jpg with and without the full path and it works either way.

This doesn't work:

@font-face {
  font-family: "digital";
  src: url(http://www.example.com/folder1/digital.ttf);
}

body {
  background-image: url(http://www.example.com/folder1/wood-table.jpg);
  background-repeat: repeat;
  background-size: 100% 100%;
}

But this does:

@font-face {
  font-family: "digital";
  src: url(digital.ttf);
}

body {
  background-image: url(http://www.example.com/folder1/wood-table.jpg);
  background-repeat: repeat;
  background-size: 100% 100%;
}
Community
  • 1
  • 1
AlwaysLearning
  • 311
  • 4
  • 12
  • Possible duplicate of [Font-Face use absolute path](http://stackoverflow.com/questions/21251760/font-face-use-absolute-path) – roberrrt-s Aug 26 '16 at 14:45
  • No, in that "duplicate" question, the poster is not a native English speaker and meant to say "relative path". – AlwaysLearning Aug 26 '16 at 15:07
  • put full path between two ' s – Ali.Rashidi Aug 26 '16 at 15:12
  • src: url('urladdress'); – Ali.Rashidi Aug 26 '16 at 15:13
  • @Ali.Rashidi I'd be interested to find out if this is the reason why, interesting – Lee Aug 26 '16 at 15:13
  • @Lee didn't exactly understand your intent! – Ali.Rashidi Aug 26 '16 at 15:15
  • read about url quoting http://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary – Khurram Aug 26 '16 at 15:16
  • sometimes ignoring the problem is better than to solve it, use https://fontlibrary.org instead for using your favorite font in your site! – Ali.Rashidi Aug 26 '16 at 15:19
  • 1
    @Ali.Rashidi That's terrible advice, it's much better to load local fonts file, and keep your external HTTP requests down to a minimum! – Lee Aug 26 '16 at 15:21
  • I already tried using quotation marks. Didn't work. I tried single and double. Same problem. The weird thing is that it WAS working, I'm sure of it. I just noticed today that it's not working anymore. NO idea why though. If everything stopped working, I'd think it was a server problem, but the fact that it works with just file name but not full path is a mystery. – AlwaysLearning Aug 26 '16 at 15:21
  • @Ali.Rashidi I can't use that anyway. I need this specific font. – AlwaysLearning Aug 26 '16 at 15:25
  • Sorry if this is a stupid question, but your index.html file IS loaded with the http protocol, right? You don't have mismatched protocols? – Mr Lister Aug 26 '16 at 19:05
  • Anyway, a quick and dirty test shows that it does work. If you want to have a look, here: http://strictquirks.nl/temp/test1-again.html (won't be there forever, so look at it now). Can you point to a webpage where it fails? – Mr Lister Aug 26 '16 at 19:18
  • I don't know what happened. Seems to be working now. I had a separate problem that required me to restore my system and that seems to have taken care of it. However, the problem still exits in Codepen. I can't upload files to Codepen so I used the full path to point to my personal server. It was working before but not anymore. My first thought was that this might be a cross-domain problem but if that's the case then why was it working before? – AlwaysLearning Aug 27 '16 at 20:48
  • In my case it was CORS, by default azure storage file wouldn't allow you to use file as CORS properties are not set. If you check the network tab, it would say CORS error. – Sangram Nandkhile Mar 14 '23 at 23:58

0 Answers0