¿Cómo inserto fuentes web de Google en un SVG?

Estoy escribiendo un artículo en mi sitio sobre las ventajas de las nuevas tecnologías web, entre otras HTML5, CSS3 y SVG, una de las ventajas de este último es la capacidad de seleccionar texto en lo que de otra manera es efectivamente una imagen.

Soy nuevo en SVG y acabo de hacer mi primer gráfico decente en Illustrator. Lo he incrustado en una página con el script GWF para la fuente Ubuntu en la etiqueta. Como resultado, la fuente de Ubuntu se muestra correctamente en el texto normal, pero para que este truco funcione en el SVG, el script de Google debe integrarse en el SVG. ¿Cómo puedo hacer esto?

Incruste fuentes en CSS utilizando la codificación base64. Puede aplicar estilos en documentos SVG similares a CSS utilizando un <style />elemento. Entonces, si tiene una fuente WOFF, la incrustará así:

<style>
@font-face {
    font-family: "Sample font";
    src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>

¿Dónde ...están los datos de fuente codificados en base64?

Puede encontrar ejemplos de esto mirando las hojas de estilo de Typekit. No estoy seguro de si el tipo de mimo font/woffes correcto, ya que también he visto a personas afirmar que debería serlo application/font-woff. Aunque font/woff, font/truetype, font/opentype, etc., parecen ser más popular.

Alternativamente, podría tomar la versión SVG de la fuente web e incrustar el marcado de descripción de la fuente SVG dentro de su documento (aunque el soporte del navegador todavía es muy limitado como Luke señala en los comentarios).

Sin embargo, también debería poder vincular a una fuente externa de acuerdo con la especificación SVG . Esa parece ser la mejor solución si vas a tener varios documentos SVG que hagan referencia a esa fuente.

Una <defs>sección como

<defs>
  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>

trabajos.

Puede incrustar fuentes web de Google en su SVG directamente con Nano . Escanea automáticamente su SVG e incrusta selectivamente solo las fuentes requeridas, asegurando que sus fuentes Ubuntu se vean iguales en todos los navegadores modernos. En mi caso, necesitaba que Roboto se incrustara en mi SVG:

Descargo de responsabilidad: estoy con el equipo detrás de Nano, y nosotros también hemos enfrentado el mismo problema anteriormente, por lo tanto, decidimos rascar nuestra propia picazón construyendo Nano. Espero que esto sea útil!

Editar: Aquí hay una explicación rápida de lo que sucede detrás de escena:

Para incrustar fuentes en SVG, primero debe saber qué familias de fuentes se utilizan. Luego necesita encontrar estos archivos de fuente y descargarlos. Una vez descargado, debe convertir las letras regulares, negrita, cursiva y negrita cursiva en codificación base 64. Si lo está haciendo manualmente, es una gran cantidad de trabajo, sobre una gran cantidad de archivos, saber qué archivo usa negrita y cuáles no. Luego debe copiar las 4 cadenas codificadas de base 64 en su SVG.

Es por eso que construimos Nano y nos aseguramos de que escanee SVG automáticamente e inserte solo las fuentes que se utilizan. Por ejemplo, si no se usa negrita o si no existe texto, no se incrustarán las fuentes. ¡Todo lo que necesitas hacer es arrastrar y soltar tu SVG en Nano y funciona de maravilla! Puede obtener más información aquí: https://vecta.io/blog/making-svg-easier-to-use

Esto puede ser una simplificación excesiva, pero ¿ha considerado descargar la fuente como un archivo zip de google y luego dejar que Illustrator la convierta según sea necesario en la salida de su archivo SVG?

Esto es solo teórico ya que aún no lo he intentado, pero en teoría parece funcionar.

Agregue lo siguiente después de la <desc>etiqueta

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

ACTUALIZAR a mi respuesta. Ahora prefiero una respuesta diferente en esta página, que es usar Nano: https://graphicdesign.stackexchange.com/a/121950/45239

Suponiendo que haya descargado e instalado una fuente web en su sistema y haya creado un SVG (tal vez utilizando muchos de los mismos pasos que describo a continuación pero sin elegir "Fuente: Convertir a contornos"), puede cargar el SVG a Nano y vea la opción "Incrustar fuente: Sí" y haga clic en Descargar.

Mi respuesta anterior:

Si estás dispuesto a sacrificar tener texto seleccionable y SEO:

1. Descargue la fuente web.
2. Instalarlo localmente.
3. Abra Adobe Illustrator
4. Escribe tu texto.
5. Archivo> Exportar> Exportar como ...
6. Elija ".SVG"

7. Elija esta configuración:

   • Estilo: estilo en línea
   • Fuente: Convertir a contornos
   • Imágenes: preservar
   • ID de objeto: nombres de capa
   • Decimal: 2
   • (habilitado) Minificar
   • (habilitado) Responsive

8. Opcionalmente, suba el svg resultante a https://vecta.io/nano (pude reducir el tamaño de mi archivo en un 8.2%)