Why does this local font have "../../" in its source url?

August 1, 2022

This is the src url in a font-face for a local font in a wordpress theme. I can’t for the life of me figure this out. Searching on google brings me no results.

@font-face {
    font-family: "Example";
    src: url("../../fonts/example.eot");
    src: url("../../fonts/example.eot#iefix") format("embedded-opentype"), url("../../fonts/example.woff2") format("woff2"), url("../../fonts/example.woff") format("woff"), url("../../fonts/example.ttf") format("truetype"), url("../../fonts/example.svg#Example") format("svg");
    font-weight: normal;
    font-style: normal;
}

>Solution :

Two dots like that in a relative url mean "up to next parent directory" and you can use this more than one time to climb ever higher in the directory structure.

If you had a folder tree like this:

A/
  B/
  C/
     - File In C Folder.css
  D/
      E/
      F/
         - File In F Folder.css

From the location of File In F Folder.css if you wanted to refer to the location of File In C Folder.css you would first walk "up" two levels to A and then back down to C.

So the path would be