Search code examples
htmlcssfonts

HTML Cross-Origin Request Blocked when read file from site

I read a .css file from my site url into my site;

like this:

...
<link rel="stylesheet" href="https://sample.com/styles.css"
...

And in that file, I defined a font;

like this:

...
@font-face{
   font-family:'SomeFont';
   src: url('myfont.ttf') format('truetype');
}
...

( That is, the font is located at address https://sample.com/myfont.ttf )

But, when using font-family:SomeFont; In HTML Styles, it doesn't read my font and writes the text with the browser's default font!

And when reading that font, it gives these errors:

1- Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://sample.com/myfont.ttf. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

2- downloadable font: download failed (font-family: "SomeFont" style:normal weight:400 stretch:100 src index:0): bad URI or cross-site access not allowed source: https://sample.com/myfont.ttf

Image of error: image-link

What is the solution to my problem?

Solution

  • My problem was solved with the following solution:

    Put these lines in the .htaccess file in the folder where the font file is. ( That is, create a .htaccess file in https://sample.com/ )

    <IfModule mod_headers.c>  
    Header set Access-Control-Allow-Origin '*'
</IfModule>

    The above line allows your file to be read from any sites.