Usando @ font-face com uma fonte SVG embutida na página HTML atual

Eu tenho um documento HTML independente que eu quero distribuir, sem quaisquer dependências externas. Estou usando uma fonte não padrão neste documento que apenas alguns dos meus usuários terão instalado.

Para os usuários que não têm a fonte instalada, estou incluindo uma cópia da fonte em um documento SVG incorporado na parte superior do<body>. (Estou usando uma fonte com um glifo para este exemplo, o documento real está usando uma fonte completa.)

<svg style="display: none;"><defs>
  <font id="MyFontElement">
    <font-face font-family="MyFont" />
    <glyph unicode="A" horiz-adv-x="950" d="M0,0L0,100L100,100L100,200L0,200L0,300L100,300L100,400L200,400L200,500L300,500L300,600L400,600L600,600L600,500L700,500L700,400L800,400L800,300L900,300L900,200L800,200L800,100L900,100L900,0L600,0L600,100L700,100L700,200L800,200L800,300L100,300L100,200L200,200L200,100L300,100L300,0L0,0M300,400L600,400L600,500L300,500L300,400Z" />    
  </font>
</defs></svg>

As fontes SVG não são tão bonitas quanto as fontes comuns, portanto, desejo apenas que a fonte SVG seja usada se a fonte não estiver instalada localmente. Se a fonte foi definida em um documento SVG externo, eu poderia usá-la com uma prioridade menor que a fonte instalada localmente assim:violino)

<style>
  @font-face {
    font-family: "My Font";
    src: local("My Font"), url("fonts.svg#MyFontElement") format("svg");
  }
</style>
<p style="font: 3em 'My Font';">
    Alphabet
</p>

Infelizmente, nenhuma das variações óbvias parece funcionar para uma fonte no documento atual: (violino)

  src: local("My Font"),
       url("./#MyFontElement") format("svg"),
       url("./#MyFontElement"),
       url("#MyFontElement") format("svg"),
       url("#MyFontElement");

Mesmo sem um@font-face declaração, a fonte já está disponível no documento comoMyFont, afont-family especificado no<font-face />. No entanto, isso será usado em umsuperior prioridade do que uma fonte nativa chamadaMyFont, então não é uma solução.

Eu esperava poder me referir a ele comolocal("MyFont")... (violino)

  src: local("My Font"), /* local */
       local("MyFont"); /* embedded */

... mas isso não funciona também.

Eu poderia dar à fonte incorporada um nome diferente e usá-lo em uma prioridade mais baixa,style="font-family: LocalFont, EmbeddedFont", mas estou permitindo que os usuários importem snippets de arquivos locais para o documento e esses arquivos locais se referirão à fonte apenas pelo nome padrão. Seria possível reescrever essas referências quando elas forem importadas, mas não gosto dessa solução.

Como me refiro a uma fonte SVG embutida no documento atual de um@font-face declaração?

questionAnswers(2)

yourAnswerToTheQuestion