The above tests should look the same, or at least very very similar. Custom fonts do not appear to work for SVGs pulled in via an img element, even though the external SVG has the same @font-face calls the embedded svg contains, and all the files are in the same directory so there are no relative-path differences. Plus, if you click the link in the caption of the first test, it loads the exact same file, which uses the custom fonts as intended. The markup of the external (and embedded) SVG is included below for convenience.

<svg
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	viewBox="0 0 270 200">
<defs>
	<style type="text/css">
		@font-face {
			font-family: 'IMfellTTF';
			src: url('IMFellEnglish-Italic.ttf') format('truetype');
		}
		@font-face {
			font-family: 'IMfellWOFF';
			src: url('IM_FELL_English_Italic.woff2') format('woff');
		}

		#shapes {fill: #EEE; stroke: #000; stroke-width: 2;}
		#shapes circle {fill: #FDB;}
		#text {fill: #800; font-size: 25px;}
		#t1 {font-family: IMfellTTF;}
		#t2 {font-family: IMfellWOFF;}
	</style>
</defs>

<g id="shapes">
	<rect x="0" y="0" height="200" width="270" />
	<circle cx="50" cy="50" r="10" />
	<circle cx="50" cy="100" r="10" />
	<circle cx="50" cy="150" r="10" />
</g>
<g id="text">
	<text id="t0" x="70" y="60">default text</text>
	<text id="t1" x="70" y="110">IMfellTTF</text>
	<text id="t2" x="70" y="160">IMfellWOFF</text>
</g>

</svg>