Why do font-faces not work from one pc to another?

Asked

Viewed 630 times

1

Hello! I created a website on a computer with external sources, using the @font-face tag. However, when I opened the html document on another pc, the file did not load the fonts.

I put the font-face and the class to call it in html

@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: normal;
    src: local('Bebas Neue'), url('BebasNeue.eot') format('eot');
}

.div02 {
    font-family: Bebas Neue;
}

Could you help me? Thank you.

html css html5 font

  • I believe that either the browser on the second pc is outdated or has no support for it

  • I used Google Chrome in the process and it is up to date.

  • Put font-face source code

  • You passed the file on @font-face?

  • @Leticiaqueiroz is welcome, to know how the community do the [tour]. How are you opening this file ? Copied all files? Please edit your question and put the code so we can help you.

  • I put the font-face and the class to call it in the html: @font-face { font-family: 'Bebas Neue'; font-style: normal; font-Weight: normal; src: local('Bebas Neue'), url('Bebasneue.eot') format('eot'); } . div02 { font-family: Bebas Neue; }

Show 1 more comment

1 answer

1

Leticia has some details in her code that you need to fix.

The first is that you need to declare the Font Family name within quotation marks on .div02

.div02 {
    font-family: "Bebas Neue"; /* repare o nome entre aspas */
}

Now about the @font-face in the local statement() you did not put the extension of the source, in your case .eot and had also left a gap between a word and another notice "Bebas Neue" / "Bebasneue". 

@font-face {
    font-family: 'Bebas Neue';
    src: local('BebasNeue.eot'), 
         url('BebasNeue.eot') format('eot');
    font-style: normal;
    font-weight: normal;
}

Finally make sure your source that is on your server is really in the format .EOT, if she goes .TTF and you’re declaring .EOT it will not be loaded. You can check this on Chrome Devtools on the flap Network > Font and see if the font has been downloaded.

You can make a fallback if the format .EOT not found by placing two different font formats in CSS. See below for how it looks. OBS: the browser will always try to find first the source that is declared before, ie from top to bottom.

@font-face {
  font-family: "Bebas Neue";
  src: url("BebasNeue.eot") format("eot"),
       url("BebasNeue.ttf") format("ttf");
}

Article that can help you https://tableless.com.br/font-face-fonts-externas-na-web/

Browser other questions tagged html css html5 font

You are not signed in. Login or sign up in order to post.