Download di un font Google e impostazione di un sito offline che lo utilizza

Ho un modello e ha un riferimento a un carattere Google come questo:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

Come posso scaricarlo e configurarlo per l'uso nelle mie pagine che sono in esecuzione offline tutto il tempo?

Vai su Google Fonts: http://www.google.com/fonts/ , aggiungi il carattere che ti piace alla tua raccolta e premi il pulsante di download. E poi usa semplicemente @fontface per connettere questo font alla tua pagina web. A proposito, se apri il link che stai usando, vedrai un esempio dell'uso di @fontface

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Per un esempio

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

Basta cambiare l'indirizzo dell'URL nel collegamento locale sul file del carattere, che hai scaricato.

Puoi farlo ancora più facilmente.

Basta scaricare il file, hai collegato:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

Nome esso opensans.css o giù di lì.

Quindi basta modificare i collegamenti in url () al percorso dei file dei caratteri.

E quindi sostituire la stringa di esempio con:

<link href='opensans.css' rel='stylesheet' type='text/css'>

Dai un'occhiata a google webfonts helper

Ti consente di scaricare tutti i font web di Google e suggerisce il codice CSS per l'implementazione. Questo strumento ti consente anche di scaricare semplicemente tutti i formati contemporaneamente senza il fastidio.

Hai mai voluto sapere dove Google ospita i loro caratteri web? Questo servizio potrebbe essere utile se desideri scaricare tutti i file .eot, .woff, .woff2, .svg, .ttf di una variante di carattere direttamente da google (normalmente il tuo User-Agent determinerebbe il formato migliore).

Dai anche un'occhiata alla loro pagina Github .

Trovato un modo passo-passo per raggiungere questo obiettivo (per 1 carattere):
( al 9 settembre 2013 )

1. Scegli il tuo carattere su http://www.google.com/fonts
2. Aggiungi quello desiderato alla tua collezione usando il pulsante blu "Aggiungi alla collezione"
3. Fai clic sul pulsante "Visualizza tutti gli stili" accanto al pulsante "Rimuovi dalla raccolta" e assicurati di aver selezionato altri stili che potrebbero essere necessari, come "grassetto" ...
4. Fai clic sul pulsante della scheda "Usa" in basso a destra nella pagina
5. Fai clic sul pulsante di download in alto con un'immagine della freccia giù
6. Fai clic su "file zip" nel messaggio popup che appare
7. Fai clic sul pulsante "Chiudi" nel popup
8. Scorri lentamente la pagina fino a visualizzare le 3 schede "Standrd | @import | Javascript"
9. Fai clic sulla scheda "@import"
10. Seleziona e copia l'URL tra 'url('e')'
11. Copialo sulla barra degli indirizzi in una nuova scheda e vai lì
12. Esegui "File> Salva pagina come ..." e denominalo "nomeutente.css desiderato" (sostituisci di conseguenza)
13. Decomprimi il file .zip dei caratteri che hai scaricato (.ttf dovrebbe essere estratto)
14. Vai su " http://ttf2woff.com/ " e converti qualsiasi .ttf estratto da zip in .woff
15. Modifica desiredfontname.csse sostituisci qualsiasi URL al suo interno [tra 'url('e ')'] con il corrispondente file .woff convertito ottenuto su ttf2woff.com; il percorso che scrivi dovrebbe essere secondo il tuo doc_root del tuo server
16. Salvare il file e spostarlo nella posizione finale e scrivere il <link/>tag CSS corrispondente per importarli nella pagina HTML
17. Da adesso, font-familyfai riferimento a questo carattere con il suo nome nei tuoi stili

Questo è tutto. Perché ho avuto lo stesso problema e la soluzione in cima non ha funzionato per me.

Le altre risposte non sono sbagliate, ma ho trovato che questo è il modo più veloce.

1. Scarica il file zip da Google Fonts e decomprimilo.
2. Carica i file dei caratteri 3 alla volta su http://www.fontsquirrel.com/tools/webfont-generator
3. Scarica i risultati

I risultati contengono tutti i formati di carattere: woff, svg, ttf, eot .

E come bonus aggiuntivo generano il file css anche per te!

3 passaggi:

1. Scarica il tuo carattere personalizzato su Goole Fonts e scarica il file .css es: Scarica http://fonts.googleapis.com/css?family=Open+Sans:400italic.600italic.400.600.300 e salva come esempio.css
2. Apri il file scaricato ( esempio.css ). Ora devi scaricare tutti i file font-face e salvarli nella directory dei font .
3. Modifica example.css : sostituisci tutti i file font-face con il tuo download .css

Ex:

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

Guarda src: -> url. Scarica http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 e salva nella directory dei caratteri . Successivamente modifica l'URL in tutto il file scaricato. Ora sarà simile

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

** Scarica tutti i caratteri contenenti file .css Spero che ti possa aiutare

Se desideri dichiarare esplicitamente le dipendenze del pacchetto o automatizzare il download, puoi aggiungere un pacchetto nodo per estrarre i caratteri di Google e servirlo localmente.

npm - Google Font Download s

Il progetto caratteri tipografici crea pacchetti NPM per caratteri tipografici Open Source:

Ogni pacchetto viene fornito con tutti i fons e i CSS necessari per ospitare autonomamente un carattere tipografico open source.
Sono stati aggiunti tutti i font di Google e un piccolo ma crescente elenco di altri font open source.

Basta cercare npm per sfogliare i caratteri disponibili come typeface-roboto o typeface -open-sans e installarli in questo modo:typeface-<typefacename>

$ npm install typeface-roboto    --save 
$ npm install typeface-open-sans --save 
$ npm install material-icons     --save 

NPM - Google Fonts Download- ers

Per il caso d'uso più generico, ci sono diversi pacchetti npm che consegneranno i caratteri in due passaggi, prima ottenendo il pacchetto e poi puntandolo al nome del carattere e alle opzioni che desideri includere.

Ecco alcune delle opzioni:

• Plugin Webpack di Google Fonts
• Google Fonts offline
• Google Fonts
• Ottieni Google Fonts

Ulteriori letture :

• Come ospitare offline le icone dei materiali?
• Utilizzo delle icone dei materiali offline e del carattere Roboto nell'app Electron

In sostanza stai includendo il carattere nel tuo progetto.

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');

Quando si utilizzano Google Fonts, il flusso di lavoro è suddiviso in 3 passaggi: "Seleziona", "Personalizza", "Incorpora". Se guardi da vicino, all'estremità destra della pagina "Usa", c'è una piccola freccia che ti consente di scaricare il carattere attualmente nella tua raccolta.

Dopodiché, e una volta che il font è installato sul tuo sistema, devi solo usarlo come qualsiasi altro font normale usando la font-familydirettiva CSS.

Ho seguito la risposta di Duydb per produrre il codice Python di seguito che automatizza questo processo.

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

Spero che questo aiuti con la morte di copia-incolla.

Devi scaricare il carattere e fare riferimento a livello locale.

Scarica il CSSdal link che hai pubblicato, quindi scarica tutti i WOFFfile e (se necessario) convertili in TTF.

Quindi cambia il CSSdal link che hai pubblicato per includere i caratteri localmente.

A partire dal

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

Per

url(/path/to/font/font.woff)

Ecco! Potrebbe esserci qualcos'altro che devi fare ma quanto sopra è le basi. Questo articolo spiega un po 'meglio.

basta scaricare il carattere ed estrarlo in una cartella. quindi collegare quel carattere. il codice qui sotto ha funzionato correttamente per me.

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}