Creé un ícono personalizado de Facebook usando Inkscape y lo guardé como un svg. Utiliza la misma fuente que el título de mi página, que usa la fuente "ubuntutitling-bold-webfont", a la que he hecho referencia como .woff en un archivo CSS. El título funciona, pero el svg no: muestra la "f" en algún tipo de fuente predeterminada. El archivo de fuente se encuentra en ../fonts/ubuntutitling-bold-webfont.woff en relatividad con el archivo CSS y de imagen, y en fonts / ubuntutitling-bold-webfont.woff en relatividad con la página web.

Busco ¿Cómo incrustar las fuentes web de Google en un SVG? , pero estoy un poco confundido sobre cómo aplicar el código al SVG, si es que lo necesito. ¿Puede el SVG usar la fuente .woff referenciada en el archivo CSS? ¿Fue correcta la forma en que cambié manualmente la fuente dentro del archivo SVG?

Aquí está el código para el 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>

Gracias de antemano.

Necesitas poner CSS en la defssección. Algo como:

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

Para cargar Google o cualquier otro formato externo en el archivo SVG, debemos agregar la etiqueta de estilo en la etiqueta defs de la siguiente manera:

<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: volví a leer su pregunta ... parece que su mejor opción podría ser convertir el texto de su icono en un esquema, por lo que no necesita la fuente en absoluto. (Puede que tenga que verificar su licencia de fuente para ver si esto está bien).

Asumí, incorrectamente, que tenías un icono de vector y estabas buscando la mejor manera de mostrarlo en tu sitio web.

Creo que tienes algunas opciones.

Usa una imagen SVG

Podrías usar el SVG como una imagen en sí misma. Perderá la compatibilidad con versiones anteriores de IE, pero podría cambiar un PNG o GIF por IE8 y versiones anteriores. O no se preocupe por IE8 y el soporte anterior (puede o no ser una opción, dependiendo de su público objetivo).

Usa el generador de Font Squirrel

Font Squirrel tiene un generador @ font-face que hace todo el trabajo pesado por usted, si ya tiene la fuente creada.

Font Squirrel @ generador de fuentes

Usa una imagen PNG

¿Por qué estás usando SVG? ¿Es para un mejor zoom y un alto soporte de DPI? Si es así, hay formas de hacerlo con CSS y PNG. Realmente depende de su uso previsto.

No soy fanático de incrustar iconos en las fuentes. Pierdes el control del nivel de píxeles. Hay algunas situaciones en las que hacerlo es una buena opción, pero a menudo es mucho más esfuerzo que vale la pena y produce peores resultados.

<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>

Ese es un ejemplo para la siguiente fuente. https://fonts.googleapis.com/css?family=Fredoka One Open visite la página de fuentes y copie todo en "defs"