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


48

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?


1
Una nota importante con respecto a las soluciones basadas en @import: no funcionan para imágenes de fondo. Debe incrustar la fuente a través de base64 o utilizar una etiqueta de imagen / objeto en su lugar.
Mickey

Respuestas:


39

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.


2
El tipo MIME correcto para .woff es ahora application/font-woff. stackoverflow.com/a/5142316/90674
sshow

3
Con respecto a "realmente 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", debe tener en cuenta que "Las fuentes SVG actualmente solo son compatibles con Safari y el navegador de Android". Ver developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts (también caniuse.com/#feat=svg-fonts )
Lucas

1
Este hilo ayudó mucho, pero la pregunta se convirtió en cómo convertir una fuente a base64. Este sitio transfonter.org ayudó mucho y permite elegir solo un subconjunto de la fuente para convertir, a fin de reducir el tamaño del archivo.
Fabien Snauwaert

Esta respuesta parecía tentadora, pero finalmente encontré que estos pasos eran más fáciles, así que los compartí: graphicdesign.stackexchange.com/a/124900/45239
Ryan

Cuando abro ese svg en adobe illustrator, las fuentes no se cargan. ¿Alguna ayuda?
Aamir Nakhwa

13

Una <defs>sección como

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

trabajos.


13
En los navegadores web actuales (febrero de 2016), esto solo funciona cuando se carga el archivo SVG independiente. Consulte marians.github.io/test-webfonts-in-svg/test.svg para ver un ejemplo. Al abrir el mismo SVG dentro de una página HTML, la fuente no se carga / representa. Use marians.github.io/test-webfonts-in-svg como ejemplo.
Marian

1
Las páginas SVG y HTML independientes parecen funcionar igual en la versión 73.0.3683.103 de Chrome (compilación oficial) (64 bits).
Paul Grime

Está cargando fuentes cuando abro svg en el navegador, pero cuando abro el mismo archivo svg en Adobe Illustrator, no está cargando fuentes. ¿Alguna ayuda?
Aamir Nakhwa

3

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:

ingrese la descripción de la imagen aquí

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


OK, genial se ve bien. Desafortunadamente, subir a un sitio de Wordpress que estaba muy feliz de aceptar el SVG antes de ahora no "Lo sentimos, este tipo de archivo no está permitido por razones de seguridad". - ¿Qué necesito volver a poner para que esto funcione?
Chris Pink

1

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.


0

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>

¿Por qué incluir tantas fuentes de Google? Ni siquiera todos ellos o los más usados ​​veo mucho y agregarán al peso total de SVG.
MrMesees

Está cargando fuentes cuando abro svg en el navegador, pero cuando abro el mismo archivo svg en Adobe Illustrator, no está cargando fuentes. ¿Alguna ayuda?
Aamir Nakhwa

0

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


Desafortunadamente, 'convertir a contornos' no es una gran opción para tamaños de texto más pequeños.
Chris Pink

@ChrisPink, ¡sí, tienes razón!, Comparte si has encontrado alguna otra opción para un tamaño de letra pequeño
Super Model

1
@SuperModel Usé Nano con gran éxito, con las fuentes recogiendo estilos del documento adjunto. Mis primeros intentos fallaron, pero con la amable ayuda del equipo de Nano que resolvimos, fue un caso de asegurarme de que el encabezado SVG permaneciera intacto.
Chris Pink
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.