I have received some font from designers and faced the issue with vertical alignment

I added this font to my application by using Js

        const font = {
            family: `Suisse Int'l`,
            style: 'normal',
            display: 'fallback',
            weight: 500,
            src: '/assets/fonts/SuisseIntl-BlackItalic.otf',
            locale: 'Suisse',
        },

        const { family, src, ...descriptor } = font;
        const fontFace = new FontFace(family, `url(${src})`, {
            ...descriptor,
            weight: descriptor.weight.toString(),
        });

        const font = await fontFace.load().then((loadedFontFace) => {
            document.fonts.add(loadedFontFace);

            return font;
        }

        document.documentElement.style.setProperty('--font-family', `${font.family}, sans-serif`);

But after loading I can see that the font is not vertically aligned

enter image description here

As we can see the symbol is above baseline.
This is an example of simple sans-serif font
enter image description here

This is simple p element withoud subelements

I tried to align it vertically by using vertical-align with display: inline-clock and line-height but it did not help.
Also, when I downloaded trial version of this font from official site in .ttf format it resolved the issue and sybol bere centered as expected. Also resolved the issue ascent-override but is does not support all browsers.

Could you please assist with it and tell me what could be wrong? Because it seems for me that problem in the file in .otf format.