Home > Back-end >  Embedded fonts in SVG not showing correctly in browser
Embedded fonts in SVG not showing correctly in browser

Time:12-08

There is SVG with two different font types: SymbolMT for the math expressions and Hind-Light for the text.

Both fonts are defined in @font-face section in SVG.

The font for the math expression looks fine but the font for the text is not the same as Hind-Light.

SVGs are embeded in a web page which is using the same font "Hind-Light".

here is fiddle example: enter image description here

But you still see an error message for the 'Symbol MT'.

Unfortunately it's nearly impossible to create a usable subset for embedding since the Symbol MT has a custom character encoding "MS Windows Symbol" (at least the windows version. enter image description here

Regular fonts set the summation/sigma) symbol at:

∑ = ∑ regular font
∑ = &#xF0E5 Symbol MT

(Data retrieved with fontdrop)

Using a desktop application, the Symbol MT encoding gets converted/remapped.
When exporting the svg - the <text> element uses the regular encoding &#x2211;.

Since 'Symbol MT' doesn't have this codepoint – you see the 'Times New Roman' summation symbol as fallback, which is noticably bigger.

<span >&#x2211;</span> <span >&#xF0E5;</span>

<style>
body{
font-size:10vw;
}

.symbol{
  font-family:Symbol;
}

.times{
    font-family:'Times New Roman', serif
}
</style>

Workarounds

You could base64 encode the original truetype font without any conversion and change the summation symbol to &#xF0E5 – not very convenient.

Working codepen.

Alternative: Install all used fonts ('Hind Light') locally so they are avaible in all aplications.
Open your svg in your editor (Inkscape, Adobe Illustrator etc.). Apply the fonts to your text elements.
Convert all text to paths.

Actually, this might quite often produce smaller files than embedding font subsets.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 161.5 64.48">
  <path d="M63.89 8.19h-.6V4.91c0-.38-.1-.68-.29-.88-.2-.2-.45-.3-.77-.3-.4 0-.75.15-1.05.46-.29.31-.44.73-.44 1.26v2.74h-.6V3.23h.6v.85c.31-.62.83-.93 1.58-.93.48 0 .86.15 1.14.44.29.29.43.67.43 1.13v3.47zm93.88 8.75h-3.98v-.54c2.09-1.6 3.13-2.93 3.13-3.99 0-.44-.13-.78-.38-1.01s-.59-.35-1.01-.35c-.49 0-.99.19-1.51.57v-.61a2.4 2.4 0 0 1 2.94-.04c.39.32.59.8.59 1.4 0 1.13-.97 2.47-2.91 4.02h3.13v.55zM11.96 20.47h-1.83v6.04h-.61v-6.04H7.7v-.56h4.25v.56zm26 4.77c0 .41-.14.74-.43.97-.28.24-.67.36-1.17.36-.6 0-1.08-.1-1.45-.29v-.62c.44.25.91.37 1.41.37.33 0 .58-.07.76-.21s.26-.32.26-.54c0-.26-.09-.46-.27-.61s-.47-.3-.89-.46c-.4-.16-.71-.34-.95-.55-.23-.21-.35-.5-.35-.86 0-.4.15-.72.44-.95.29-.24.66-.36 1.11-.36.53 0 .95.08 1.23.22v.6a2.46 2.46 0 0 0-1.24-.26c-.29 0-.51.07-.68.2a.63.63 0 0 0-.25.52c0 .13.02.24.07.34.05.1.13.19.25.27a8.47 8.47 0 0 0 .72.36c.46.18.81.38 1.05.6.26.23.38.52.38.9zm1.72-5.57c.08.08.12.18.12.3s-.04.22-.12.29a.4.4 0 0 1-.3.12.37.37 0 0 1-.29-.12.42.42 0 0 1 0-.59.4.4 0 0 1 .29-.12c.12-.01.22.03.3.12zm.01 6.84h-.6v-4.96h.6v4.96zm38.21-6.84c.08.08.12.18.12.3s-.04.22-.12.29a.4.4 0 0 1-.3.12.37.37 0 0 1-.29-.12.42.42 0 0 1 0-.59.4.4 0 0 1 .29-.12c.12-.01.21.03.3.12zm0 6.84h-.6v-4.96h.6v4.96zm24.84-1.27c0 .41-.14.74-.42.97-.28.24-.67.36-1.17.36-.6 0-1.08-.1-1.45-.29v-.62c.44.25.91.37 1.41.37.33 0 .59-.07.76-.21a.67.67 0 0 0 .26-.54.75.75 0 0 0-.27-.61c-.18-.14-.47-.3-.88-.46-.4-.16-.71-.34-.95-.55-.23-.21-.35-.5-.35-.86 0-.4.15-.72.44-.95.29-.24.66-.36 1.11-.36.54 0 .95.08 1.23.22v.6a2.46 2.46 0 0 0-1.24-.26c-.29 0-.51.07-.68.2s-.25.31-.25.52c0 .13.02.24.07.34.05.1.13.19.25.27a8.47 8.47 0 0 0 .72.36c.46.18.81.38 1.05.6.23.23.36.52.36.9zm4.63 1.02c-.39.2-.85.29-1.37.29a2.4 2.4 0 0 1-1.79-.69 2.44 2.44 0 0 1-.69-1.81c0-.8.2-1.42.61-1.88s.93-.68 1.58-.68c.61 0 1.09.2 1.45.6.36.4.54.96.54 1.68 0 .22-.01.4-.04.53h-3.5c.05.55.24.97.57 1.26.33.29.77.44 1.32.44a2.4 2.4 0 0 0 1.34-.33v.59zm-1.69-4.21c-.42 0-.77.15-1.05.44-.28.29-.44.71-.49 1.26h2.93v-.22c0-.45-.13-.81-.38-1.08s-.59-.4-1.01-.4zm27.28 4.46h-.6v-5.74l-1.44.9V21l1.44-.88h.6v6.39zm21.52 0h-.67l1.63-2.55-1.54-2.42h.7l1.21 1.96 1.2-1.96h.7l-1.55 2.43 1.66 2.54h-.71l-1.3-2.08-1.33 2.08zM57.65 29.7c.08.08.12.18.12.3s-.04.22-.12.29a.4.4 0 0 1-.3.12.37.37 0 0 1-.29-.12.42.42 0 0 1 0-.59.4.4 0 0 1 .29-.12.4.4 0 0 1 .3.12zm0 6.84h-.6v-4.96h.6v4.96zm9.38 0h-.6V30.8l-1.43.9v-.67l1.44-.88h.6v6.39zM3.42 18.97H1.99v3.84h-.87v-9.44h2.13c1.1 0 1.92.25 2.47.75.55.5.82 1.21.82 2.12-.02.63-.2 1.18-.53 1.64s-.81.77-1.43.94l2.51 3.99H6.05l-2.37-3.85-.26.01zm-.07-4.83H1.99v4.06h1.53c.69 0 1.22-.19 1.6-.57.37-.38.56-.86.56-1.43-.01-1.38-.78-2.06-2.33-2.06zm27.31 4.83h-1.43v3.84h-.87v-9.44h2.13c1.1 0 1.92.25 2.47.75.55.5.82 1.21.82 2.12-.02.63-.2 1.18-.53 1.64s-.81.77-1.43.94l2.51 3.99h-1.04l-2.37-3.85-.26.01zm-.07-4.83h-1.36v4.06h1.53c.69 0 1.22-.19 1.6-.57.37-.38.56-.86.56-1.43-.01-1.38-.78-2.06-2.33-2.06zm42.25 4.83h-1.43v3.84h-.87v-9.44h2.13c1.1 0 1.92.25 2.47.75.55.5.82 1.21.82 2.12-.02.63-.2 1.18-.53 1.64s-.81.77-1.43.94l2.51 3.99h-1.04l-2.37-3.85-.26.01zm-.07-4.83h-1.36v4.06h1.53c.69 0 1.22-.19 1.6-.57.37-.38.56-.86.56-1.43 0-1.38-.78-2.06-2.33-2.06zm22.65 4.83H94v3.84h-.87v-9.44h2.13c1.1 0 1.92.25 2.47.75.55.5.82 1.21.82 2.12-.02.63-.2 1.18-.53 1.64s-.81.77-1.43.94l2.51 3.99h-1.04l-2.37-3.85-.27.01zm-.07-4.83H94v4.06h1.53c.69 0 1.22-.19 1.6-.57.37-.38.56-.86.56-1.43-.01-1.38-.79-2.06-2.34-2.06zm57.85 8.66h-.85v-4.69c0-.55-.14-.97-.42-1.26a1.47 1.47 0 0 0-1.11-.43c-.58 0-1.08.22-1.5.67s-.63 1.04-.63 1.8v3.92h-.85v-7.1h.85v1.22c.44-.89 1.19-1.33 2.25-1.33.68 0 1.23.21 1.64.63.41.42.62.96.62 1.62v4.95zM7.73 57.96h-.87v-4.41H1.99v4.41h-.87v-9.44h.87v4.23h4.87v-4.23h.87v9.44zm3-9.79c.12.12.18.26.18.43s-.06.31-.18.42c-.12.11-.26.17-.43.17s-.3-.06-.42-.18c-.11-.11-.17-.25-.17-.42s.06-.31.17-.43c.11-.12.25-.17.42-.17s.31.06.43.18zm.01 9.79h-.86v-7.1h.85v7.1zm7.52 0h-.86v-4.69c0-.55-.14-.97-.42-1.26a1.47 1.47 0 0 0-1.11-.43c-.58 0-1.08.22-1.5.67s-.63 1.04-.63 1.8v3.92h-.85v-7.1h.85v1.22c.44-.89 1.19-1.33 2.25-1.33.68 0 1.23.21 1.64.63s.62.96.62 1.62v4.95zm7.71 0h-.85v-1.04a2.44 2.44 0 0 1-2.2 1.15c-.95 0-1.69-.35-2.23-1.04-.53-.7-.8-1.54-.8-2.54 0-1.1.28-2 .85-2.7s1.3-1.04 2.2-1.04c.92 0 1.65.39 2.17 1.18v-3.86h.85v9.89zm-5.18-3.46c0 .81.2 1.47.6 1.99.4.51.9.77 1.5.77.61 0 1.13-.22 1.57-.67.44-.44.66-1.18.66-2.22 0-.52-.07-.98-.22-1.37a2.06 2.06 0 0 0-1.25-1.31 1.93 1.93 0 0 0-2.25.63c-.4.51-.61 1.24-.61 2.18zm11.61 3.46h-.85v-9.9h.85v9.9zm3.08-9.79c.12.12.18.26.18.43s-.06.31-.18.42c-.12.11-.26.17-.43.17s-.31-.06-.42-.17c-.11-.11-.17-.25-.17-.42s.06-.31.17-.43c.11-.12.25-.17.42-.17s.32.05.43.17zm.01 9.79h-.85v-7.1h.85v7.1zm7.63-.55c0 1.07-.29 1.88-.87 2.42-.58.54-1.33.8-2.24.8-.81 0-1.5-.13-2.07-.41v-.84c.58.29 1.25.43 2 .43.71 0 1.27-.19 1.69-.58.42-.39.63-1 .63-1.83v-.92a2.3 2.3 0 0 1-2.13 1.3c-.82 0-1.52-.3-2.09-.91a3.46 3.46 0 0 1-.86-2.46c0-1.06.26-1.94.79-2.63s1.22-1.04 2.08-1.04a2.3 2.3 0 0 1 2.21 1.36v-1.25h.85v6.56zm-5.04-3.03c0 .85.21 1.5.64 1.94s.91.66 1.43.66a2.1 2.1 0 0 0 1.46-.62c.44-.42.66-1.05.66-1.91 0-.98-.21-1.71-.63-2.18a1.87 1.87 0 0 0-2.98.07 3.35 3.35 0 0 0-.58 2.04zm12.35 3.58h-.85v-4.69c0-.55-.14-.97-.42-1.26a1.47 1.47 0 0 0-1.11-.43c-.58 0-1.08.22-1.5.67s-.63 1.04-.63 1.8v3.92h-.85v-9.9h.85v4.02c.43-.89 1.18-1.33 2.25-1.33.68 0 1.23.21 1.64.63s.62.96.62 1.62v4.95zm5.47-.2c-.27.18-.58.27-.94.27-1.34 0-2.02-.69-2.02-2.07v-4.37h-1.16v-.73h1.16v-1.78h.87v1.78h2.03v.73h-2.03V56c0 .81.38 1.22 1.13 1.22.37 0 .69-.11.95-.32v.86zm7.06.2h-.86v-8.22l-2.06 1.29v-.97l2.06-1.26h.85v9.16zm6.89 0h-.84v-2.3h-4.24v-.77l3.67-6.09h1.41v6.09h1.41v.77h-1.41v2.3zm-4.2-3.07h3.36v-5.6l-3.36 5.6zm11.14 5.87h-.85v-9.9h.85v1.04a2.44 2.44 0 0 1 2.2-1.15c.95 0 1.69.35 2.23 1.04.53.7.8 1.54.8 2.54 0 1.1-.29 2-.85 2.7a2.7 2.7 0 0 1-2.2 1.04c-.92 0-1.65-.39-2.17-1.18v3.87zm0-6.31c0 .52.07.98.22 1.36a2.16 2.16 0 0 0 1.25 1.31 1.93 1.93 0 0 0 2.25-.63c.41-.51.62-1.23.62-2.18 0-.81-.2-1.47-.6-1.99-.4-.51-.9-.77-1.5-.77-.61 0-1.13.22-1.57.67-.45.45-.67 1.19-.67 2.23zm10.41 3.31c-.27.18-.58.27-.94.27-1.34 0-2.02-.69-2.02-2.07v-4.37h-1.16v-.73h1.16v-1.78h.87v1.78h2.03v.73h-2.03V56c0 .81.38 1.22 1.13 1.22.37 0 .69-.11.95-.32v.86zm10.21.2h-.85v-1.27c-.37.92-1.12 1.37-2.25 1.37a2.2 2.2 0 0 1-1.64-.62 2.23 2.23 0 0 1-.61-1.64v-4.93h.85v4.69c0 .54.14.96.43 1.25s.66.43 1.13.43a1.9 1.9 0 0 0 1.52-.67c.39-.45.58-1.03.58-1.75v-3.95h.85v7.09zm7.49 0h-.85v-4.69c0-.55-.14-.97-.42-1.26a1.47 1.47 0 0 0-1.11-.43c-.58 0-1.08.22-1.5.67s-.63 1.04-.63 1.8v3.92h-.85v-7.1h.85v1.22c.44-.89 1.19-1.33 2.25-1.33.68 0 1.23.21 1.64.63s.62.96.62 1.62v4.95zm7.74 0h-.85v-1.04a2.44 2.44 0 0 1-2.2 1.15c-.95 0-1.69-.35-2.23-1.04-.53-.7-.8-1.54-.8-2.54 0-1.1.28-2 .85-2.7a2.7 2.7 0 0 1 2.2-1.04c.92 0 1.65.39 2.17 1.18v-3.86h.85v9.89zm-5.18-3.46c0 .81.2 1.47.6 1.99.4.51.9.77 1.5.77s1.13-.22 1.57-.67c.44-.44.66-1.18.66-2.22 0-.52-.07-.98-.22-1.37a2.06 2.06 0 0 0-1.25-1.31 1.93 1.93 0 0 0-2.25.63c-.4.51-.61 1.24-.61 2.18zm16.1 1.02c0 .82-.28 1.45-.83 1.88-.55.43-1.26.65-2.12.65-.97 0-1.8-.21-2.48-.62v-.97a4.43 4.43 0 0 0 2.43.74c.66 0 1.18-.14 1.55-.43.37-.29.55-.71.55-1.25 0-.41-.14-.74-.42-1s-.69-.5-1.22-.74l-.49-.22-.53-.23-.48-.24a3.1 3.1 0 0 1-.47-.29l-.37-.34a1.3 1.3 0 0 1-.32-.42 2.63 2.63 0 0 1-.26-1.11c0-.79.29-1.41.85-1.86a3.3 3.3 0 0 1 2.09-.66c.78 0 1.44.14 1.96.42v.97a3.99 3.99 0 0 0-1.94-.53c-.63 0-1.13.15-1.5.44-.37.29-.56.68-.56 1.17 0 .25.05.48.15.67.1.2.26.38.5.54a6.17 6.17 0 0 0 1.4.74l.74.33c.17.08.38.2.64.37s.46.33.6.5a2.44 2.44 0 0 1 .53 1.49zm4.87 2.26a4.27 4.27 0 0 1-1.26 1.99 2.7 2.7 0 0 1-1.65.55c-.19 0-.36-.02-.53-.07v-.85c.17.05.33.07.48.07 1 0 1.69-.57 2.09-1.71l-2.9-6.9h.98l.96 2.38 1.37 3.42c.06-.21.47-1.35 1.22-3.42l.87-2.38h.95l-2.58 6.92zm13.19.18h-.85v-4.69c0-1.13-.49-1.69-1.48-1.69-.48 0-.92.22-1.29.67a2.67 2.67 0 0 0-.57 1.79v3.92h-.85v-4.69c0-1.13-.5-1.69-1.48-1.69-.49 0-.92.22-1.29.67a2.67 2.67 0 0 0-.57 1.79v3.92h-.85v-7.1h.85v1.16a2.04 2.04 0 0 1 1.99-1.27c1.14 0 1.84.47 2.1 1.4.44-.93 1.14-1.4 2.1-1.4.75 0 1.3.21 1.67.62.36.42.54.96.54 1.63v4.96zm3.03 0h-.85v-9.9h.85v3.86a2.49 2.49 0 0 1 2.17-1.18c.9 0 1.63.35 2.2 1.04s.85 1.59.85 2.7c0 1-.27 1.85-.8 2.54a2.62 2.62 0 0 1-2.23 1.04c-.97 0-1.7-.38-2.2-1.15v1.05zm0-3.58c0 1.04.22 1.78.66 2.22s.96.67 1.57.67 1.11-.26 1.5-.77c.4-.51.59-1.18.59-1.99a3.4 3.4 0 0 0-.62-2.18 1.92 1.92 0 0 0-2.25-.63 2.12 2.12 0 0 0-1.25 1.31c-.13.39-.2.84-.2 1.37zm13.11.07c0 1.05-.3 1.92-.89 2.61a3.05 3.05 0 0 1-2.44 1.03c-1 0-1.79-.34-2.38-1.04a3.86 3.86 0 0 1-.88-2.6c0-1.04.3-1.91.91-2.62a2.95 2.95 0 0 1 2.35-1.06c1.05 0 1.87.35 2.46 1.04.58.69.87 1.57.87 2.64zm-5.7 0c0 .77.22 1.44.65 2 .43.55 1.01.83 1.71.83.78 0 1.38-.27 1.8-.82.43-.55.64-1.22.64-2.01 0-.82-.2-1.5-.6-2.05-.4-.55-1.01-.82-1.83-.82-.74 0-1.32.28-1.74.84a3.27 3.27 0 0 0-.63 2.03zm8.32 3.51h-.85v-9.9h.85v9.9zM58.95 32.91h5.01v.46h-5.01v-.46zm0 1.79h5.01v.47h-5.01v-.47zm-41.7-17.08h7.18v.66h-7.18v-.66zm0 2.55h7.18v.68h-7.18v-.68zm30.35-4.54h.67v3.27h3.25v.66h-3.25v3.25h-.67v-3.25h-3.26v-.66h3.26v-3.27zm38.22 0h.67v3.27h3.25v.66h-3.25v3.25h-.67v-3.25h-3.26v-.66h3.26v-3.27zm26.53.59 2.54 2.53 2.54-2.53.47.46-2.54 2.55 2.54 2.53-.47.48-2.54-2.54-2.54 2.54-.48-.48 2.54-2.54-2.54-2.53.48-.47zm13.58.32v6.07c.35-.07.63-.2.85-.38s.4-.5.56-.95.29-1.25.39-2.41c.09-.96.24-1.62.45-1.98.21-.36.57-.54 1.08-.54.17 0 .43.04.77.12v.23c-.2 0-.34.03-.44.1-.13.1-.24.27-.32.52s-.16.7-.23 1.36a8.6 8.6 0 0 1-.45 2.32 3.6 3.6 0 0 1-1.58 1.7c-.32.16-.68.26-1.08.3v2.83h-.75V23a3.31 3.31 0 0 1-2.67-1.99c-.17-.41-.32-1.19-.45-2.34-.08-.69-.15-1.16-.23-1.39s-.18-.4-.31-.49c-.08-.06-.23-.09-.44-.09v-.23c.38-.08.64-.12.79-.12a1.31 1.31 0 0 1 1.26.92c.11.31.2.84.27 1.6.09 1.13.21 1.92.37 2.37.16.46.34.78.56.97.21.19.5.32.86.4v-6.07h.74zm11.6 2.33h7.18v.68h-7.18v-.68zm-69.05 9.25H55.02v-.37l6.86-8.52-6.86-8.38v-.38h13.1l.28 3.46h-.41c-.11-.94-.37-1.62-.79-2.02a2.46 2.46 0 0 0-1.76-.61h-7.59l5.76 7.04-6.45 7.97h8.39c.48 0 1-.09 1.57-.28.39-.13.71-.36.97-.69.26-.33.47-.85.64-1.55l.41.07-.66 4.26z"/>
</svg>

Drawback: you can't select any text, since every text was converted to <path> elements.

  • Related