Como uso uma fonte personalizada em uma imagem SVG no meu site?

28

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.

Joe
fonte
Como você exibe o SVG? Você o carrega como um <img>, o incorpora como um objeto ou exibe o SVG embutido?
Ideograma

Respostas:

19

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>
leighman
fonte
2
De acordo com o meu exemplo github.com/marians/test-webfonts-in-svg , isso não funciona com os navegadores atuais (fevereiro de 2016).
Marian
13
Se você <object>costuma incorporar o svg, em vez disso <img>, a fonte é carregada corretamente! github.com/marians/test-webfonts-in-svg/pull/1
waldyrious 10/10
2
@waldyrious Não há votos suficientes no mundo para essa dica.
Scribblemacher
@waldyrious e se o SVG for uma imagem de fundo?
Notacouch
O uso <object>tem algumas desvantagens. Depois de revisar o vecta.io/blog/best-way-to-embed-svg , decidi inserir a marcação svg diretamente no meu documento.
Herman J. Radtke III
3

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>
muTheTechie
fonte
3
De acordo com o meu exemplo github.com/marians/test-webfonts-in-svg , isso não funciona com os navegadores atuais (fevereiro de 2016).
Marian
1

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.

Marc Edwards
fonte
-2
<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"

Invisível
fonte
2
Bem-vindo ao GDSE! O link não leva a lugar algum para mim. Você poderia editar sua resposta para adicionar as informações relevantes?
curious