CODEWITHSUNDEEP
css
Water Cooler v2
Water Cooler v2

Reputation: 33880

url() does not resolve a relative path to the parent folder on the local computer

My directory structure is as follows:

+ CSS
  + fonts
    + palanquin
      - palanquin-thin-webfont.woff
      - palanquin-thin-webfont.woff2
      - ... (other font files)

  + my-exercises
    - magazine-2.html

Where the nodes with the + sign denote folders and those with a - sign denote files.

In CSS\my-exercises\magazine-2.html, I have a document level style-sheet (i.e. a <style> element) from within which I am trying to load the palanquin-thin font from within the folder CSS\fonts\palanquin\.

However, the url() function silently fails to resolve the path:

src: url('../fonts/palanquin/palanquin-thin-webfont.woff')

Or basically any relative path where the parent folder (..) is involved.

I have tried moving the font files around and trying different permutations. When I place the fonts in the same folder as the HTML document or within any of its subfolders, the url() function resolves the fonts correctly. As soon as there is a reference to a parent folder, the relative path is not resolved.

Due to the problem being related to folder hierarchies, it would be of little use to provide a JS Fiddler or a Codepen, so I request you to please download the magazine-2.html file and the fonts/palanquin folder from my github repo and try it on your computer, maintaining the existing folder hierarchy.

I am producing the relevant snippets below.

<html>

<head>
    <style>
        @font-face {
            font-family: 'Palanquin Thin';
            src: url('../fonts/palanquin/palanquin-thin-webfont.woff2') format('woff2'),
            url('../fonts/palanquin/palanquin-thin-webfont.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }

        body > h1 {
            font-family: 'Palanquin Thin', 'Courier New';
        }

    </style>
</head>

<body>

    <h1>This is the heading</h1>

</body>

</html>

Upvotes: 1

Views: 632

Answers (1)

Kaiido
Kaiido

Reputation: 137171

This is because of security measures browsers do impose to the file:// protocol.

The rules are different in every browsers, but IIRC none does allow to lookup prior to the document's folder, and hence, you won't be able to load resources that are not descendants of your document's root (i.e my-exercises in your case).

Firefox should allow to load resources that are inside this folder, so if you are using FF, you can try to set your magazine-2.html directly inside CSS folder.

Chrome has stricter rules, but also has an --allow-file-access-from-files flag which should leverage those restrictions. Not sure if you'll be able to navigate up though.

And the best being of course to run your own local server.

Upvotes: 2

Related Questions