Problem with firefox and @ font-face

Question

Problem with firefox and @ font-face

Navigation

#1 by (0 votes)

0

Hi I have a problem linking my @ font-face in firefox when I use "../" in the url of the font to go to the previous directory.

I have the following example code, if I remove the "../" and paste the "sources" folder that keeps all my fonts inside the directory where the html works correctly but if I leave out the sources in another route that implies backward in the Firefox directory does not take them.

It is worth mentioning that the other browsers do (chrome opera and even Explorer)

I thank whoever can help me and I have looked in many places and nowhere have I found a solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style type="text/css">
            @font-face {
            font-family: rock;
            src: local(rock), url('../fuentes/Rock_Salt (1)/RockSalt-Regular.woff');

            }
            p.custom_font{
            font-family: rock;
            font-size:52px;
}
</style>
</head>
<body>


<p class="custom_font">Hola Hola</p>
    <a href="../views 2/prueba2.html">volver</a>
</body>
</html>

html5 css firefox

asked by Hamer 20.04.2018 в 04:29

source

1 answer

pretty print XML Open Firefox browser on different screens with batch script

score 0 · Answer 1

It's because of a security problem in Mozilla Firefox or < a href="https://developer.mozilla.org/en/docs/Web/HTTP/Access_control_CORS"> CORS , what it says is that: files can only read certain other files. Specifically, a file can read another file only if the home directory of the source file is a predecessor directory of the destination file. However, directories can not be loaded this way.

Therefore you only have two options to solve this problem:

Either you do as you said in the question, move the folder in the same directory that you have the file.

Or enable the CORS for other subdirectories with .htaccess . Here is an example of what headers to write.

In .htaccess :

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>