Webfont in een SVG? Werkt.. maar niet zoals ik het wil.

[Xthemes.us]

Hallo,

Ik heb een SVG in inkscape gemaakt, daar vervolgens de volgende CSS ingezet

Cascading Stylesheet:

    <style
       type="text/css"
       id="style7">
       <![CDATA[
       @font-face {
         font-family: 'Shadows Into Light';
         font-style: normal;
         font-weight: normal;
         src: url('/fonts/pokemon-solid.woff') format('woff'),
              url('https://www.eggfriends.me/fonts/pokemon-solid.woff') format('woff');
      }
      ]]>
      </style

En InkScape ziet het er prima uit


Maar in de webbrowsers volg ik het niet meer helemaal.
In Firefox op de pagina in een img tag of als je de file direct bezoekt wordt het font vergeten.
Idem in Chrome in een <img> tag.


Als ik echter de file direct bezoek in Chrome of nog verwarrender als ik over de link in de developers tool hover in Firefox werkt het font weer prima.


De enige reden die ik mij kan bedenken is dat cross domain/https restricties ervoor zorgen dat het niet werkt en deze verwarrende resulaten geeft. Maar ook als ik het IP van de testserver voor de font-file gebruik ( https://192.168.1.100/fonts/pokemon-solid.woff ) krijg ik alsnog dezelfde resultaten.

In plaats van <img src=""> ook <object> geprobeert voor de svg maar het hetzelfde resultaat.

Ik sta op het punt uit te gaan dus deze post is wellicht iets incompleet. Ik zou nog kunnen proberen de gehele SVG inline in de HTML te plaatsen om te kijken of dat wat uithaalt.

[n9iels]

Ik denk dat het makkelijker is om de tekst in de SVG afbeelding om te zetten naar een path. Dit houd in dat het dan geen tekst met een bepaald lettertype is, maar gewoon lijnen ed. van de SVG. Op deze manier wordt de tekst altijd correct getoont en hoeft het lettertype niet meer ingeladen te worden. Dit levert dus ook een (kleine) performance winst op.

Ik ken Inkscape niet heel goed, maar volgensmij zou deze pagina je opweg moeten helpen: https://www.lifewire.com/...-cutting-machines-1701892

[Xthemes.us]

Het lijkt erop dat ik het probleem heb opgelost.
Eerst probeerde ik onder

code:

file > save as > Optimized SVG

op te slaan maar toen kreeg ik de error:

WARNING: SVG input document uses 1 flow text elements, which won't render on browsers!"

Vervolgens door de tekst in inkscape te selecteren en dan in het menu onder

code:

"Text > Convert to Text"

te klikken en opnieuw op te slaan lijkt het nu te werken in zowel Firefox als Chrome.