The font connected via CSS (@font-face) is not displayed when the file is opened locally

Help solve the font display problem.

Font files are located in the project folder\fonts\Roboto\RobotoLight path At the root of the directory is the fonts.css file next to the main css file. It describes @font-face as follows:

@font-face {
font-family: "RobotoLight";
src: url("/fonts/Roboto/RobotoLight/RobotoLight.eot");
src: url("/fonts/Roboto/RobotoLight/RobotoLight.eot?#iefix") format("embedded-opentype"),
url("/fonts/Roboto/RobotoLight/RobotoLight.woff") format("woff"),
url("/fonts/Roboto/RobotoLight/RobotoLight.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}

In the main CSS file, font-family: RobotoLight; is written for the element that needs to be set this font.

As a result, when you run the html file locally (file:///C:/Users/User/Desktop/project/index.html) Fonts are not displayed! The default default font is displayed, even though the RobotoLight font is shown in DevTools.

However, when running on localhost (the local server), the font is displayed.

What could be the problem and how to solve it? Thank you very much!

Author: Alex Topchyan, 2020-05-07

1 answers

Try fonts in the .otf format. You can find them on the Google Fonts website.

 0
Author: FeironoX5, 2020-05-08 04:37:37