Ho creato un'icona Facebook personalizzata usando Inkscape e l'ho salvata come svg. Utilizza lo stesso carattere del titolo della mia pagina, che utilizza il carattere "ubuntutitling-bold-webfont", a cui ho fatto riferimento come .woff in un file CSS. Il titolo funziona, ma svg no - visualizza la "f" in un tipo di carattere predefinito di ordinamento. Il file dei caratteri si trova in ../fonts/ubuntutitling-bold-webfont.woff in relazione al file CSS e immagine, e in fonts / ubuntutitling-bold-webfont.woff in relatività alla pagina web.

Io fonte Come posso incorporare Google Web Fonts in un SVG? , ma sono un po 'confuso su come applicare il codice all'SVG, se necessario. L'SVG può utilizzare il carattere .woff a cui si fa riferimento nel file CSS? Il modo in cui ho cambiato manualmente il carattere all'interno del file SVG era corretto?

Ecco il codice per l'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>

Grazie in anticipo.

Devi inserire CSS nella defssezione. Qualcosa di simile a:

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

Per caricare Google o altri fornts esterni nel file SVG, dobbiamo aggiungere il tag style nel tag defs come segue:

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

Modifica: rileggo la tua domanda ... sembra che la tua migliore opzione sia quella di convertire il testo nella tua icona in un contorno, quindi non ha bisogno del font. (Potrebbe essere necessario controllare la licenza del font per vedere se va bene.)

Presumevo erroneamente che tu avessi un'icona vettoriale e stavi cercando il modo migliore per visualizzarla sul tuo sito web.

Penso che tu abbia alcune opzioni.

Usa un'immagine SVG

Potresti semplicemente usare SVG come immagine stessa. Perderai il supporto per le versioni precedenti di IE, ma potresti scambiare un PNG o GIF per IE8 e precedenti. O non preoccuparti di IE8 e del supporto precedente (potrebbe essere o meno un'opzione, a seconda del tuo pubblico di destinazione).

Usa il generatore di Font Squirrel

Font Squirrel ha un generatore @ font-face che fa tutto il lavoro pesante per te, se hai già creato il font.

Font Squirrel @ font-face generator

Usa un'immagine PNG

Perché stai usando SVG? È per uno zoom migliore e un supporto DPI elevato? Se è così, ci sono modi per farlo con CSS e PNG. Dipende davvero dall'uso previsto.

Non sono un fan di incorporare icone nei caratteri. Si perde il controllo del livello dei pixel. Ci sono alcune situazioni in cui farlo è una buona scelta, ma spesso è molto più sforzo che vale e produce risultati peggiori.

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

Questo è un esempio per il seguente carattere. https://fonts.googleapis.com/css?family=Fredoka One Open visita la pagina dei caratteri e copia tutto in "defs"