¿Cómo incrusto Google Web Fonts en un SVG?

Incrustas fuentes en CSS usando la codificación base64. Puede aplicar estilos en documentos SVG similares a CSS usando un <style />elemento. Entonces, si tiene una fuente WOFF, la incrustaría 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 populares.

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 aún es muy limitado, como señala Luke en los comentarios).

Sin embargo, también debería poder vincular a una fuente externa de acuerdo con la especificación SVG . Esa parecería ser la mejor solución si va 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>

obras.

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

Descargo de responsabilidad: estoy con el equipo detrás de Nano, y nosotros también nos hemos enfrentado al mismo problema anteriormente, por lo tanto, decidimos rascarnos la 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, debe encontrar estos archivos de fuentes y descargarlos. Una vez descargado, debe convertir la codificación regular, negrita, cursiva y cursiva negrita a la codificación base 64. Si lo está haciendo manualmente, es una gran cantidad de trabajo, en una gran cantidad de archivos, saber qué archivo usa negrita y cuál no. Luego, debe copiar las 4 cadenas codificadas en base 64 en su SVG.

Es por eso que creamos 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 fuentes. ¡Todo lo que necesita hacer es arrastrar y soltar su SVG en Nano y funciona de maravilla! Puede obtener más información aquí: https://vecta.io/blog/making-svg-easier-to-use

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 descargó e instaló una fuente web en su sistema y creó un SVG (tal vez usando 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á dispuesto a sacrificar tener texto seleccionable y SEO:

1. Descarga la fuente web.
2. Instálelo localmente.
3. Abra Adobe Illustrator
4. Escribe tu texto.
5. Archivo > Exportar > Exportar como…
6. Elija ".SVG"

7. Elige estos ajustes:

   • Estilo: Estilo en línea
   • Fuente: convertir a contornos
   • Imágenes: Conservar
   • ID de objeto: nombres de capa
   • decimales: 2
   • (habilitado) Minimizar
   • (habilitado) Responsivo

8. Cargue opcionalmente el svg resultante en https://vecta.io/nano (pudo reducir el tamaño de mi archivo en un 8,2 %)

Junto a Nano también puedes consultar svg-buddy . Esa es una herramienta de línea de comandos que detecta automáticamente las fuentes utilizadas en su SVG, las descarga de Google Fonts e incrusta las fuentes codificadas en base64 en la defsetiqueta del SVG. Esto garantiza que el SVG se muestre de la misma manera en todos los dispositivos, independientemente de las fuentes instaladas en el sistema del usuario. Además, svg-buddytambién se pueden aplicar algunas optimizaciones básicas para reducir el tamaño del archivo. Es totalmente gratuito y funciona sin conexión.

Descargo de responsabilidad: soy el autor de esta herramienta de código abierto. Espero que sea útil para otros.

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

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

Agregue la siguiente <desc>etiqueta posterior

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

Pude solucionar el problema, en lugar de usar el SVG como fuente de una imagen en el archivo HTML, inserté el SVG en línea en el propio HTML.

Ej: (No funcionó)

<img src="/img/my_svg.svg">

Necesitaba poner el SVG real dentro del propio archivo HMTL. Luego, Safari pudo leer las fuentes que había importado previamente.

Ej: (Obras)

<svg class="coupon" height="220.254" viewBox="0 0 434.842 220.254" width="434.842" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <linearGradient id="a" gradientUnits="objectBoundingBox" x1=".079" x2=".933" y1=".088" y2=".879">
        <stop offset="0" stop-color="#00b2dc"/>
        <stop offset="1" stop-color="#00dac4"/>
    </linearGradient>
    <path d="m281.406 302.474a6.213 6.213 0 0 1 -6.167-6.914l.726-6.415a15.2 15.2 0 0 0 .1-1.7 14.846 14.846 0 0 0 -14.817-14.845c-.461 0-.915.026-1.364.066l-6.275.565a6.21 6.21 0 0 1 -6.763-6.189v-149.4a6.209 6.209 0 0 1 6.762-6.189l6.275.563c.451.04.906.068 1.366.068a14.846 14.846 0 0 0 14.819-14.839 15.225 15.225 0 0 0 -.1-1.7l-.726-6.415a6.212 6.212 0 0 1 6.167-6.912h365.712a6.211 6.211 0 0 1 6.167 6.912l-.724 6.415a15.316 15.316 0 0 0 -.1 1.7 14.844 14.844 0 0 0 14.818 14.839c.461 0 .917-.028 1.366-.068l6.277-.563a6.209 6.209 0 0 1 6.761 6.189v149.4a6.211 6.211 0 0 1 -6.763 6.189l-6.277-.565c-.449-.04-.9-.066-1.364-.066a14.844 14.844 0 0 0 -14.818 14.837 15.316 15.316 0 0 0 .1 1.7l.724 6.415a6.212 6.212 0 0 1 -6.167 6.914z" fill="#fff" transform="translate(-246.845 -82.22)"/>
    <path d="m661.315 118.088a26.8 26.8 0 0 1 -26.785-26.82 27.426 27.426 0 0 1 .176-3.048h-352.816a27.448 27.448 0 0 1 .176 3.048 26.8 26.8 0 0 1 -26.785 26.821c-.822 0-1.634-.042-2.435-.114v136.777c.8-.074 1.614-.116 2.435-.116a26.8 26.8 0 0 1 26.785 26.823 27.477 27.477 0 0 1 -.176 3.048h352.816a27.455 27.455 0 0 1 -.176-3.048 26.8 26.8 0 0 1 26.785-26.823c.822 0 1.634.042 2.435.116v-136.777c-.802.072-1.614.113-2.435.113z" fill="url(#a)" transform="translate(-240.878 -76.237)"/>
    <g fill="#fff">
        <path d="m621.645 274.026h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.975v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.968zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-17.291-.859a33.59 33.59 0 0 0 -2.734-9.267l1.811-.835a35.522 35.522 0 0 1 2.888 9.824zm341.224-7.679-1.851-.741a35.833 35.833 0 0 1 5.1-8.866l1.568 1.232a33.823 33.823 0 0 0 -4.823 8.375zm-349.198-9.708a34.131 34.131 0 0 0 -7.31-6.315l1.075-1.682a36.025 36.025 0 0 1 7.739 6.687zm360.994-5.343-1.159-1.628a35.748 35.748 0 0 1 9.083-4.7l.652 1.891a33.621 33.621 0 0 0 -8.577 4.437zm-377.09-4.959a33.483 33.483 0 0 0 -3.979-.891l-.84-.138v-6.629h1.994v4.939c1.137.21 2.27.479 3.377.8zm392.125-5.88h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.764h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-9.99h1.994zm394.949-8.209h-1.995v-9.981h1.995zm-394.949-11.763h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-6.679l.84-.134a33.762 33.762 0 0 0 3.935-.881l.551 1.919c-1.1.316-2.214.577-3.331.787zm391.395-5.313a35.649 35.649 0 0 1 -9.522-3.731l.985-1.736a33.641 33.641 0 0 0 8.987 3.519zm-378.745-4.673-1.073-1.686a33.95 33.95 0 0 0 7.317-6.302l1.5 1.314a36.072 36.072 0 0 1 -7.745 6.673zm361.147-5.331a35.941 35.941 0 0 1 -5.99-8.292l1.765-.929a33.98 33.98 0 0 0 5.659 7.833zm-347.837-9.934-1.811-.837a33.663 33.663 0 0 0 2.737-9.265l1.975.286a35.635 35.635 0 0 1 -2.901 9.816zm338.45-8.013c-.064-.33-.126-.659-.182-.993h-7.3v-2h9.017l.122.857c.082.587.181 1.166.3 1.742zm-17.45-.993h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.963zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.975v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.98v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.968zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973z" transform="translate(-237.397 -72.746)"/>
        <text font-family="Poppins-Medium, Poppins" font-size="28" font-weight="500" letter-spacing=".05em" transform="translate(78 70.476)">
            <tspan x="0" y="0">This is</tspan>
        </text>
        <text font-family="Poppins-Bold, Poppins" font-size="112" font-weight="700" transform="translate(79 172.476)">
            <tspan x="0" y="0">a test</tspan>
        </text>
    </g>
</svg>

¡ Tenga en cuenta que en este caso, DEBE importar sus fuentes!

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

¡Espero que esto ayude a alguien por ahí!

Buena suerte 😊

Me encontré con el mismo problema e hice una herramienta similar a nano y svg-buddy. En comparación con nano, es una herramienta gratuita. Y en comparación con svg-buddy, está escrito en NodeJS en lugar de Java, por lo que es fácil de instalar (¡o también de contribuir!) para cualquiera que ya tenga Node en su computadora.

La herramienta está optimizada para Google Fonts. Infiere qué letras se utilizan al escanear el SVG en busca de definiciones de fuentes. Luego, las letras se pasan a Google Fonts para que se puedan devolver los archivos de fuentes más optimizados. Esta optimización da como resultado un tamaño de archivo dramáticamente más pequeño.

https://github.com/coolov/svgum