Criei um ícone personalizado do Facebook usando o Inkscape e salvei como um svg. Ele usa a mesma fonte do título da minha página, que usa a fonte "ubuntutitling-bold-webfont", que eu referenciei como .woff em um arquivo CSS. O título funciona, mas o svg não - ele exibe o "f" em uma fonte padrão de classificação. O arquivo de fonte está localizado em ../fonts/ubuntutitling-bold-webfont.woff em relatividade ao arquivo CSS e imagem, e em fonts / ubuntutitling-bold-webfont.woff em relatividade à página da web.

I Fount Como incorporar Google Web Fonts em um SVG? , mas estou um pouco confuso sobre como aplicar o código ao SVG, se eu precisar. O SVG pode usar a fonte .woff mencionada no arquivo CSS? A maneira como alterei manualmente a fonte dentro do arquivo SVG está correta?

Aqui está o código para o SVG:

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="80"
   height="80"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.3.1 r9886"
   sodipodi:docname="New document 1">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1"
     inkscape:cx="26.573808"
     inkscape:cy="42.478414"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:window-width="1619"
     inkscape:window-height="611"
     inkscape:window-x="165"
     inkscape:window-y="301"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0.75006053,-981.36219)">
    <rect
       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
       id="rect2987"
       width="70"
       height="70"
       x="4.2499394"
       y="986.36218"
       rx="10"
       ry="10" />
    <text
       xml:space="preserve"
       style="font-size:109.44319916px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:#fffffe;stroke-width:2.73607969;stroke-opacity:1;font-family:ubuntutitling-bold-webfont';-inkscape-font-specification:ubuntutitling-bold-webfont'"
       x="25.989071"
       y="1096.0118"
       id="text3757"
       sodipodi:linespacing="125%"
       transform="scale(1.0381556,0.96324674)"><tspan
         sodipodi:role="line"
         id="tspan3759"
         x="25.989071"
         y="1096.0118"
         style="stroke-width:2.73607969">f</tspan></text>
  </g>
</svg>

Agradeço antecipadamente.

Você precisa colocar CSS na defsseção Algo como:

<defs>
  <style type="text/css">
    @font-face {
      font-family: Delicious;
      src: url('../fonts/font.woff');
    }
  </style>
</defs>

Para carregar o Google ou quaisquer outras fontes externas no arquivo SVG, precisamos adicionar a tag style na tag defs da seguinte maneira:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="246" height="272" xml:space="preserve"><desc>Your description</desc>

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>

Editar: reli sua pergunta ... parece que sua melhor opção pode ser converter o texto em seu ícone em um contorno, para que não precise da fonte. (Talvez você precise verificar sua licença de fonte para ver se está tudo bem.)

Presumi, incorretamente, que você tinha um ícone de vetor e procurava a melhor maneira de exibi-lo em seu site.

Eu acho que você tem algumas opções.

Use uma imagem SVG

Você pode apenas usar o SVG como uma imagem em si. Você perderá o suporte para versões mais antigas do IE, mas poderá trocar um PNG ou GIF para o IE8 e versões anteriores. Ou não se preocupe com o IE8 e o suporte mais antigo (pode ou não ser uma opção, dependendo do seu público-alvo).

Use o gerador do Font Squirrel

O Font Squirrel possui um gerador @ font-face que faz todo o trabalho pesado para você, se você já tiver a fonte criada.

Font Squirrel @ font-face generator

Use uma imagem PNG

Por que você está usando SVG? É para melhor zoom e alto suporte a DPI? Nesse caso, há maneiras de fazer isso com CSS e PNGs. Realmente depende do uso pretendido.

Não sou fã de incorporar ícones em fontes. Você perde o controle de nível de pixel. Existem algumas situações em que fazer isso é uma boa escolha, mas geralmente é muito mais esforço do que vale a pena e produz resultados piores.

<defs>
 <style type="text/css">
 <![CDATA[
  @font-face {
    font-family: 'Fredoka One';
    font-style: normal;
    font-weight: 400;
    src: local('Fredoka One'), local('FredokaOne-Regular'), 
    url(https://fonts.gstatic.com/s/fredokaone/v7/k3kUo8kEI- 
    tA1RRcTZGmTlHGCac.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 
    U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, 
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  ]]>
 </style>
</defs>

Esse é um exemplo para a seguinte fonte. https://fonts.googleapis.com/css?family=Fredoka One Open visite a página da fonte e copie tudo para "defs"