Creé un ícono de Facebook personalizado usando Inkscape y lo guardé como un svg. Utiliza la misma fuente que el título de mi página, que utiliza 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 relación con el CSS y el archivo de imagen, y en fonts/ubuntutitling-bold-webfont.woff en relación con la página web.
Encontré ¿Cómo incrusto Google Web Fonts 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 a la que se hace referencia 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>
<object>para incrustar el svg, en lugar de <img>, ¡entonces la fuente se carga correctamente! github.com/marians/test-webfonts-in-svg/pull/1<object>tiene algunas desventajas. Después de revisar vecta.io/blog/best-way-to-embed-svg , decidí alinear el marcado svg directamente en mi documento.Para cargar Google o cualquier otra fuente externa en un 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: releí tu pregunta... parece que tu mejor opción podría ser convertir el texto de tu icono en un esquema, por lo que no necesita la fuente en absoluto. (Es posible que deba verificar la licencia de su fuente para ver si está bien).
Supuse, incorrectamente, que tenías un ícono vectorial y estabas buscando la mejor manera de mostrarlo en tu sitio web.
Creo que tienes algunas opciones.
Simplemente podría usar el SVG como una imagen en sí. Perderás la compatibilidad con las versiones anteriores de IE, pero puedes cambiar un PNG o GIF por IE8 y versiones anteriores. O no se preocupe por IE8 y soporte anterior (puede o no ser una opción, dependiendo de su público objetivo).
Font Squirrel tiene un generador @font-face que hace todo el trabajo pesado por ti, si ya tienes la fuente creada.
Font Squirrel @font-face generador
¿Por qué estás usando SVG? ¿Es para un mejor zoom y soporte de alto DPI? Si es así, hay formas de hacerlo con CSS y PNG. Realmente depende de su uso previsto.
No soy fanático de incrustar íconos en las fuentes. Pierde 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 de lo que vale 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%20One Abra, visite la página de fuentes y copie todo en "defs".
Ideograma