Search code examples
cssfontsfont-face

@font-face is not working for CSS with correct format, generation, and directory path

I have jumped through all kinds of pages trying to figure out why my code is not working. I see this is a popular question but I am sure that I have covered all my bases:

  1. I am sure I have the correct path (See below)
  2. I have generated the right files using transfonter
  3. The demo page that came with transfonter works thus the font should work
  4. I am using Chrome
  5. I call font-family: 'Sevastopol_Interface';

CSS Code and Directory Tree:

Directory Tree

@font-face {
    font-family: 'Sevastopol_Interface';
    src: url('\Fonts\Sevastopol-Interface\Sevastopol-Interface.eot');
    src: url('\Fonts\Sevastopol-Interface\Sevastopol-Interface.eot?#iefix') format('embedded-opentype'),
        url('\Fonts\Sevastopol-Interface\Sevastopol-Interface.woff2') format('woff2'),
        url('\Fonts\Sevastopol-Interface\Sevastopol-Interface.woff') format('woff'),
        url('\Fonts\Sevastopol-Interface\Sevastopol-Interface.ttf') format('truetype'),
        url('\Fonts\Sevastopol-Interface\Sevastopol-Interface.svg#Sevastopol-Interface') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Edit: Changed directories. Still doesn't work

Solution

  • I found out what was the issue:

    @font-face {
  font-family: "Sevastopol_Interface";
  src: url("Fonts//Sevastopol-Interface//Sevastopol-Interface.ttf");
}

    The issue is that my path was not quite right. Backslashes are indeed correct but I needed two of them instead of one as I am on a windows machine. Not something like linux where you would only need one. Thanks to @Syed Muhammad Moiz and @Kusal Darshana for leading me to that conclusion.