Ubuntu中的css @ font-face不起作用

Question

I developed the web-page under Windows. It has such folders:

wwwroot
wwwroot/css
wwwroot/fonts

and files

wwwroot/css/main.css
wwwroot/fonts/fontaaa.otf

main.css file has such a code:

@font-face
{
    font-family : 'fontaaa';
    src         : url("../fonts/fontaaa.otf");
}

and it sees the font under Windows on my localhost. Everything is perfect, so I uploaded my project to the linux server. Everything works fine (the page loads, styles are OK), but the font fontaaa.otf is not displayed . What is the problem? Spent a lot of time to figure out.

PS I've never used @font-face before.

PSS the font was downloaded from Internet (was not in the Windows fonts folder).

Answer 1

Font face is declared like this :

@font-face {
  font-family: 'Font name';
  font-style: normal;
  font-weight: 400;
  src: local('Font name'), local('Font name-Regular'), url(fontname.woff) format('woff');
}

And to apply these fonts you've to do like this :

<style>
h1 {
font-family: 'Font Name', Arial/* Just in case if your web fonts didn't load */;
}
</style>

<h1>this will be font-face fonts</h1>

For more web fonts

Answer 2

Tried all answers, no luck, but the problem was found. It was the permission for the fonts folder. Thank you everybody.

Answer 3

try:

@font-face
{
 font-family : 'fontaaa';
 src         : url("../fonts/fontaaa.otf");
}

p, html, body {
 font-family:fontaaa;
 src: url('../fonts/fontaaa.otf');
}

@font-face {
 font-family: 'Font name';
 font-style: normal;
 font-weight: 400;
 src: local('Font name'), local('Font name-Regular'), url(fontname.woff) format('woff');
}

that worked for me (you can put another tag instead of the p)