webfonts - para - ¿Cómo descargar varios formatos de una fuente web desde el repositorio(oficial) de fuentes web de Google?

fuentes personalizadas css (6)

He aprendido que Google sirve automáticamente los archivos de fuentes TTF , EOT , WOFF o SVG , según el navegador / dispositivo desde el que se accede.

Ahora planeo alojar y servir los archivos de fuentes de mi servidor, para lo cual primero tendría que descargar todos los formatos de archivo de las fuentes web.

¿Cómo o dónde puedo descargar los 4 formatos de archivo para una fuente web que me gustaría usar?

PD: Al usar diferentes navegadores: Chrome, IE9 y Safari (dev - iPhone UA), pude obtener los formatos WOFF, EOT y TTF. Aunque no hay suerte con el formato SVG. Sería increíble si hay una manera aún más simple.

EDIT: Ah, y por cierto, sí sé que puedo descargar varios formatos de fontsquirrel , pero estoy hablando de descargar desde el repositorio oficial aquí.

Cómo obtener los urls de descarga de fuentes, incluyendo SVG y woff2.

Los agentes de usuario necesarios para descargar cada fuente son los siguientes. source

module.exports = { USER_AGENTS: { eot: ''Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)'', woff: ''Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0'', woff2: ''Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML like Gecko) Chrome/38.0.2125.104 Safari/537.36'', // complete woff2 file for one variant svg: ''Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3'', ttf: ''Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.54.16 (KHTML, like Gecko) Version/5.1.4 Safari/534.54.16'' }, GOOGLE_FONTS_API_KEY: ''AIzaSyDY-C-Lt9uyPP5fSTjMCR4bB944SlI4spw'', CACHE_DIR: __dirname + "/cachedFonts/", }

Añadir estos agentes de usuario utilizando devtool.

source

ahora puede visitar https://fonts.googleapis.com/css?family=Open+Sans y falsificar su agente de usuario, descargar las fuentes visitando la url que se encuentra en @font-face .

Alternativamente, google-webfonts-helper hace todo por ti. Aquí hay una excelente publicación de blog del desarrollador donde adquirí la imagen.

¿Por qué quieres ser anfitrión?

Siempre use un CDN común si es posible, es mucho más probable que su fuente ni siquiera necesite ser descargada (navegador en caché).

Si le preocupa que Google envíe la fuente equivocada a los usuarios, lo más probable es que estén falsificando su agente de usuario, entonces hay otra opción y aún así obtener los beneficios de usar el hospedaje de Google.

Inserte el @font-face usted mismo, solo use los pasos anteriores para encontrar la URL de la fuente de Google e inserte esto en el <head> ;

<style>

@font-face { font-family: ''Open Sans''; font-style: normal; font-weight: 400; src: url(google-font-url-here/opensans.eot); src: local(''Open Sans''), local(''OpenSans''), url(google-font-url-here/opensans.eot?#iefix) format(''embedded-opentype''), url(google-font-url-here/opensans.woff2) format(''woff2''), url(google-font-url-here/opensans.woff) format(''woff''), url(google-font-url-here/opensans.ttf) format(''truetype''), url(google-font-url-here/opensans.svg#OpenSans) format(''svg''); }

</style>

¡Esto viene con sus riesgos ya que las URL pueden cambiar!

Escribí un script de PowerShell para descargar automáticamente las fuentes servidas a varios Agentes de usuario diferentes. Para la fuente básica, obtiene los cuatro formatos (woff, ttf, svg, eot). Google no parece servir archivos SVG y EOT para los pesos en negrita y cursiva.

$agents = "Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0",` "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1",` "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)",` "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7",` "Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; GTB7.4; InfoPath.2; SV1; .NET CLR 3.3.69573; WOW64; en-US)" foreach($arg in $args) { $arg; foreach($agent in $agents) { $agent; $webclient = New-Object System.Net.WebClient [void]$webclient.Headers.Add("user-agent", $agent) $url = "http://fonts.googleapis.com/css?family=$arg" $css = $webclient.DownloadString($url) $css $fonts = $css | Select-String -AllMatches "http://[A-Za-z0-9/._?&=%-]+" | Select-Object -ExpandProperty Matches | Select-Object -ExpandProperty Value foreach($font in $fonts) { $font $fontfile = [System.Io.Path]::GetFileName((new-object System.Uri $font).LocalPath) [void]$webclient.DownloadFile($font, "$pwd/$fontfile") } } }

Una vez que está en un archivo .ps1, se puede llamar con las fuentes para descargar como argumentos:

PS> ./DownloadFonts.ps1 "Open+Sans:400,700,400italic,700italic"

El script generará el CSS extraído de los servidores de Google para ayudarlo a determinar qué archivo es cuál (por ejemplo, en mi caso, la fuente SVG se extrajo como un archivo llamado "fuente").

Esto se basa en los scripts de bash publicados por RichardN y ldeck en la publicación del blog Locally Caching Google Web Fonts .

Para referencia, aquí está el script bash de ldeck:

#!/bin/sh for family in $*; do for url in $( { for agent in / ''Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0'' / ''Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1'' / ''Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)'' ; do curl -A "$agent" -s "http://fonts.googleapis.com/css?family=$family" | / grep -oE ''http://[A-Za-z0-9/._-]+''; / done } | sort -u ) ; do extn=${url##*.} ; file=$(echo "$family"| tr +[:upper:] _[:lower:]); echo $url $file.$extn; curl -s "$url" -o "$file.$extn"; done done

Referencia adicional: Uso de HTML5 AppCache .

Hice clon en linea :)

https://bitbucket.org/Tymek/google-web-fonts/ Ahí tienes!

No estoy afiliado a este negocio o sitio web de ninguna manera, pero pude obtener todos los formatos que necesitaba en onlinefontconverter.com .

Necesitaba los formatos eot, svg, woff y ttf. Ya tuve el ttf. Lo subí y el sitio creó el resto, todo en unos minutos.

Puede clonar el directorio de Google webfonts en http://code.google.com/p/googlefontdirectory/

También puede obtener archivos de fuente única en http://code.google.com/p/googlefontdirectory/source/browse/#font_name

======= ACTUALIZADO 2016-05-31 =======

Hice un pequeño script PHP para obtener enlaces de descarga desde una URL de importación de CSS de Google Fonts como: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic,900italic

Puede utilizar esta herramienta aquí: http://nikoskip.me/gfonts.php

Por ejemplo, si usa la URL de importación anterior, obtendrá esto:

Me cansé de actualizar esta respuesta en cada nueva versión de Chrome, porque siempre cambian la forma en que puedes falsificar la cadena del Agente de usuario, así que usa este script en su lugar.

======= SOLUCIÓN ANTIGUA =======

Usando DevTools desde Chrome, puede anular el agente de usuario.

Cómo:

Obtenga la fuente que necesita en la página de fuentes de Google.
Obtendrá una URL para importar en su CSS, como: http://fonts.googleapis.com/css?family=Cabin:500,700,500italic,700italic
Abra esa URL en su navegador y verá la URL completa donde realmente puede descargar la fuente.
Vaya a Herramientas de desarrollo (F12) y presione ESC
Seleccione la pestaña "Emulación" y luego haga clic en la subpestaña "Red"
Finalmente, en Spoof user agent seleccione IE9 para el formato EOT, Android 4 para TTF y esta cadena de UA para SVG: Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3 (gracias anónimo)