How to correctly include a font via @font-face?

Question

css

I test the site on localhost and connect my font in this way -

@font-face {
    font-family: 'bebas_neuebook';
    src: url('font-webfont.eot');
    src: url('font-webfont.eot?#iefix') format('embedded-opentype'),
         url('font-webfont.woff2') format('woff2'),
         url('font-webfont.woff') format('woff'),
         url('font-webfont.ttf') format('truetype'),
         url('font-webfont.svg#bebas_neuebook') format('svg');
    font-weight: normal;
    font-style: normal;

}

Question: Why does the font only work after I install it on my PC? Before that, it is not displayed. It should load without installation.

Answer 1

You probably have the wrong paths to the font files.
UPD
Open the code inspector in the browser (F12 in Chrome), go to the network tab, refresh the page. See all the requests your page makes to the server. Some lines will be red, which means the server returned a 404 error (resource not found). Look at these lines, on which path the font is requested and compare with the one on which it actually lies. Well, correct, accordingly, the paths in the url () rules

Answer 2

and it is on that way on which you write it? in order for it to work it must be in the same folder as your css.

Answer 3

@font-face {
    font-family: 'bebas_neuebook';
    src: url('путь до шрифта/bebas_neuebook.eot');
    src: url('путь до шрифта/bebas_neuebook.eot?#iefix') format('embedded-opentype'),
         url('путь до шрифта/bebas_neuebook.woff2') format('woff2'),
         url(путь до шрифта/'bebas_neuebook.woff') format('woff'),
         url('путь до шрифта/bebas_neuebook.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}