Why does font-face refuse to download a font from another site?

Question

css

I download fonts from a third-party site using font-face:

@font-face {
  font-family: Regular;
  src: url(http://site.ru/path/fontname.ttf) format('truetype');
}

Next, I connect to the element on the page. If you just enter this path in the browser, then the font is downloaded normally, and in the console, if you look at the requests, there is this font, but it does not want to be applied to the element. If you upload the font to the server itself and connect from there, then the font is normally applied. I noticed that in this case, its type in the browser is set to "x-font-ttf", and if you specify the path to a third-party site, then "font-sfnt", maybe this is the case ...

You need to download the font from a third-party site. What could be the problem?

Answer 1

I missed this message in the console:
"A request from an outside source was blocked. Reason: CORS header 'Access-Control-Allow-Origin' is missing." It was solved by adding the following rule to the .htaccess of the site where the font comes from:

Header set Access-Control-Allow-Origin 'http:site2.ru'

And "site2.ru" - respectively, the site that this font is trying to install.

Answer 2

Try brackets.
src: url(" https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf ");