Why is the font displayed differently?

Question

css

In general, I have a couple of fonts in the layout. Downloaded, installed, connected - not displayed.
This is how I connected them in css:
This is how the Playfair font is displayed: (I specifically use the extension to show what font is used on the page)
This is how it should be displayed:

What is the problem and how to solve it?
UPD: To the answer about the paths:
UPD 2: the problem is specifically in this font, because I tried to include other fonts and they displayed fine.

Answer 1

And I think the problem is in the font generation.
Using the Font squirrel, make a font and add cross-browser code.

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

Answer 2

Most likely, something with the paths - the browser does not find font files.

Answer 3

The font used during rendering can be viewed on the Computed tab.