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

Navigation
1

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

I put the font-face and 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.

    
asked by anonymous 27.04.2018 / 05:04

1 answer

1

Leticia has some details on your code that you need to fix.

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

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

Now about the @font-face in the local declaration () you did not put the source extension, in your case .eot and also had left a space between one word and another repair "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 that your source that is on your server really is in .EOT format, if it is .TTF and you are declaring .EOT it will not be loaded. You can check this in Chrome DevTools on the Network > Font tab and see if the font has been downloaded.

You can make a fallback if the .EOT format is not found by placing two different font formats in the CSS. See below how it is. OBS: The browser will always try to find 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 link

    
27.04.2018 / 12:39
How to put the option to check all the Checkboxes in the JQGrid The application for when the editText is not filled