use a custom font in github pages

You have to provide the Relative Path to the file,

For Example Take This Directory Structure:

- root
  - system-files
  - vahid
    - github-pages
      - resources
        - Samim.ttf
      - index.html
      - styles.css

Here the “root” is the Drive On which your Operating System is Stored On, and “system-files” contains your Operating System’s Important Files and finally you have this folder “vahid” which contains the user’s files, and inside “vahid” you have “github-pages” folder where all your github pages code is stored.

In Path the / means the root, in Windows take this as like if you open C:\ in Windows Explorer.

And this period . means current directory, and when you use ./ instead of / you’re specifying a path to a file/folder in current Directory.

Now when in my styles.css if I use this Path /resources/Samim.ttf what it means is “Samim.ttf” File in inside of the “resources” folder in the root directory.

Did you notice something? Let me try to show this path in the directory Structure.

- root
  - resources
    - Samim.ttf

As you can see the Path we specified doesn’t exist, try to compare it to the Real Directory Structure Given Above.

So instead of using / we have to use ./ because the “resources” folder is in the same folder as of the “styles.css”.

So you have to replace your Absolute Path with Relative Path, which will be this:

  • ./resources/Samim.ttf

Read More About Relative And Absolute Path At

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top