Правильный шрифт в SVG, но неверный в HTML

Question

Я создаю логотип с моим собственным шрифтом (DimaBarf.ttf) в формате SVG. это мой код:

<svg width="276.7" height="93" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style type="text/css">
            @font-face {
                font-family: Barf;
                src: url('./DimaBarf.ttf');
            }
        </style>
    </defs>
    <g>
        <title>background</title>
        <rect fill="#fff" height="93" width="276.7" y="0" x="0"/>
    </g>
    <g>
        <title>Layer 1</title>
        <rect rx="10" height="65" width="276.5" y="0" x="0" fill="#867965"/>
        <text stroke="#000" transform="matrix(4.871815023846745,0,0,5.305484790354967,-1448.1636560162676,-511.74044508859515)" xml:space="preserve" text-anchor="first" font-family="Barf" font-size="24" y="110.4" x="297" stroke-width="0" fill="#d8c7b3">شینکاف</text>
    </g>
</svg>

Когда я открываю файл svg, он показывает мой собственный шрифт правильно.

но когда я добавляю этот svg в мой HTML-документ, мой собственный шрифт меняется на системный шрифт по умолчанию. Это мой код в формате HTML:

<div style="width:300px;">
    <img src="./data/pictures/logo.svg" alt="logo" class="mx-auto d-block" width="100%" />
</div>