CODEWITHSUNDEEP
htmlcsslinuxfont-face
Haradzieniec
Haradzieniec

Reputation: 9338

css @font-face in ubuntu doesn't work

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).

Upvotes: 1

Views: 4616

Answers (3)

Haradzieniec
Haradzieniec

Reputation: 9338

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

Upvotes: 2

Darko Rodic
Darko Rodic

Reputation: 1020

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)

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157404

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

Upvotes: 2

Related Questions