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.

P.S. I’ve never used @font-face before.

P.S.S. 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