SVG File not rendering on safari iphone

I am designing a website and using an SVG File. The SVG is a text of 'Welcome' with a specific font I want. It displays perfectly on internet explorer and google chrome - even when I resize the screen to mobile sizes. However, when I open on my iPhone, the SVG file just displays the text 'Welcome' without the special font.

I tried changing the SVG file to just a in html with the special font, however this also did not solve my issue.

I am using this in my html:

<image
src="/images/text.svg"
title=""
id="text-brand"
/>

SVG File:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 126.62 24.44"><defs><style>.cls-1{font- 
size:24px;fill:#fff;font-family:PalaceScriptMT, Palace Script MT;} 
</style></defs><title>signature</title><text class="cls-1" 
transform="translate(0 18.62)">
Welcome
</text><path d="M-197.67-94.67" transform="translate(-1.35 3.29)"/></svg>

I expect the output to be Welcome with the font PalaceScriptMT like in the SVG file, but on iPhone this font is not working. I also tried importing the font in my css:

@import url(//db.onlinewebfonts.com/c/be6ba96b363711643c6efb8970ebce73? 
family=Palace+Script+MT);