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

user_14127281 0
Viewed 682

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

font-face fonts css
4 Answers

Just change the backslash to normal slash (/) in your path of the font. Like this,

src: url('Style-Sheets/Fonts/Sevastopol-Interface/Sevastopol-Interface.eot');

You can find out more about this from here. HTML File Paths - W3 Schools .

All the best.

user_166711460

OK, I have used @font-face in my CSS like this:

@font-face {
  font-family: "Vibes";
  src: url("/src/fonts/GreatVibes-Regular.ttf");
}

Go to google-fonts and add the required fonts by clicking + then download those fonts by clicking download on the bottom right of the page your fonts.ttf files will be downloaded, now just add the .ttf file to your @font-face src as shown above.

user_136664890 

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

Note : This is only a guess. See also CSS @font-face Rule

user_166711460

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.

user_141272810
Related