I'm struggling to get an SVG file to use the correct fonts and am working with the following code:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1318.72 202.13">
<defs>
<style>
.cls-1 {
fill: #2cb04b;
font-family: HalisGR-ExtraLight;
src: url('../fonts/HalisGR-ExtraLight.otf');
}
.cls-1, .cls-2 {
font-size: 144px;
}
.cls-2 {
fill: #0071a6;
font-family: Adrianna-Bold;
src: url('../fonts/Adrianna-Bold.otf');
font-weight: 700;
}
</style>
</defs>
<text class="cls-1" transform="translate(0 122.4)"><tspan x="0" y="0">MY</tspan></text>
<text class="cls-2" transform="translate(448.12 125.04)"><tspan x="0" y="0">TITLE</tspan></text>
</svg>
I've tried several variations of this with no success so far. Is there a better approach?