CODEWITHSUNDEEP
cssimport
Matheus Lopes
Matheus Lopes

Reputation: 325

CSS @import not working for local file - File path is correct

In my site I've tried these two methods (One for each time), to import a font:

@import "/va/fonts/FjallaOne-Regular.ttf";

@import url('/va/fonts/FjallaOne-Regular.ttf');

None of them is working. The path is correct. I don't want to use a HTTP request for this task.

PS: Tried without the quotes too: @import url(/va/fonts/FjallaOne-Regular.ttf);

Upvotes: 5

Views: 7823

Answers (2)

Gilberto Sánchez
Gilberto Sánchez

Reputation: 627

It doesn't work because you are using an import, not the @font-face, try the following:

@font-face {
    font-family: 'FjallaOne-Regular'; /*You can use whatever name that you want*/
    src: url('/va/fonts/FjallaOne-Regular.ttf');
}

Finally, select the font-family on your sections, for example:

#styledDiv {
    font-family: 'FjallaOne-Regular';
}

Good luck, bro.

Upvotes: 4

Marwan Alani
Marwan Alani

Reputation: 276

I think you might be missing a back-slash in there, I believe the correct syntax is @import url(//address);, I'm not sure though if it would work with a local file. I personally would define a font-face in my CSS and use that as a regular font-family property. Always worked for me that way whether for local files or fonts online.

Example:

@font-face {
  font-family: 'MyWebFont';
  src: url('/va/fonts/FjallaOne-Regular.ttf')  format('truetype');
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

For the record, I learned the code above some time ago from CSStricks.com

I hope that answers your question.

Happy coding :)

Upvotes: 3

Related Questions